Skip to Main Content

Research Guide Design: Best Practices and Guidelines

Image Basics

ADA Compliance for Images

If you have images, you should provide meaningful texts or descriptions in the alt-text box (see image below). WebAIM has good resources for learning more about alt text:

Making the Most of Responsive Design

If you want to change the size of an image or table on your LibGuide, change the table or image widths as percentages, not pixels (see image below). This ensures that the image will look better in your guide when viewed on screens of different sizes.

Click on the image if you'd like a clearer view of it.

Screenshot of LibGuides Image Properties screen with explanatory text
 

More Image Tips

Alignment

You can choose the alignment of your image in order to make it appear on one side of the box or another. This can be especially useful when you want the image to appear alongside text rather than under or over it.

It is highly recommended that you use the alignment feature rather than attempt to insert your image into a table in your guide. Images in tables work poorly with responsive design.

H Space and V Space

You can enter an amount of H Space (horizontal space) to indicate how much space you'd like between the image and other elements that might on either side of it. If you don't want to create horizontal space, simply leave the box blank.

You can enter an amount of V Space (vertical space) to indicate how much space you'd like between the image and other elements that might appear over or under. If you don't want to create vertical space, simply leave the box blank.

Border

You can choose the thickness of a border to go around your image. If you don't want a border, simply leave the box blank.

Link

You can use the link tab in Image Properties to link your image to a URL.