9 essential rules for responsive image galleries

Responsive design is an essential and necessary part of web development. One of the biggest issues with responsive web design as of late has been images. Many debate the best way to display images on a responsive site. And then, what about image galleries?

Image galleries feature far more complexity than single images; there are even more variables and things to think about when implementing entire responsive image galleries on your website. Let’s take a look at some helpful tips for implementing responsive image galleries the right way.

1) Slideshows: hide nav whenever possible

You might not have navigation elements on a tablet or mobile device, but on a desktop, it is a good idea to hide those elements until they are needed. Items like forward and back arrows and navigational dots should be set to only display when someone mouses over the sliding image gallery. This avoids distractions, and you avoid conflicts between content and nav elements. The entire experience feels less jumbled.

2) Avoid too many portrait images

If you are implementing a gallery that is a grid of images, you’ll want to choose images that are landscape oriented, or square if possible. This makes it easier to view them on a small screen. Portrait images would be fine on a smart phone in portrait mode, but the wide viewing area of a landscape oriented phone makes it tough to view portrait images. Landscape is best, but you can settle for square if landscape isn’t an option. All images can be set to fit within a viewing area, but portrait images on a landscape screen will appear very small. Your images won’t be viewed as intently as square or landscape images, which will fill more area of the screen and appear larger. When selecting images, be sure to keep the person viewing them in mind.

3) Use gestures on tablets & mobile

People love to use gestures on their touch screens. They feel more empowered when it feels like they are sliding an image, because the experience is more immersive. Trying to tap tiny arrows or navigational dots on a mobile device is too tedious. It is much more natural to be able to take your finger and swipe an image up, down, left, or right.

4) Avoid lightboxes: disable them on mobile

If you have images of products, like machinery or items that should be viewed in more detail (fabric, jewels, etc.), then a lightbox with larger images makes sense. Even then, they should only be used on the desktop. When you break down to tablet and mobile screen sizes, lightboxes should be disabled. They can cause a number of user experience problems. If something happens and the lightbox doesn’t size correctly, then they may not be able to access the exit button, or images may not display properly.

5) When using nav elements, make them unobtrusive

If you have a sliding image gallery with a significant number of slides, then navigation makes sense. You don’t want to make users wait to cycle through everything. They can easily click through at their own speed, get in, get what they need, and get out. When using these elements, make sure to tuck them in places that are out of the way. Don’t have navigational dots going over text or other links. Also, avoid overly complex controls. These take up a lot of space, distract users from the content, and create a cluttered look. Having dots that users can click to cycle through or skip to certain images, and having forward and back arrows is plenty. Don’t overdo it!

6) Don’t mix images & videos

Mixing different media is usually okay, but mixing videos in where they aren’t expected can cause problems. You don’t want a user to accidentally initiate a video, which plays sound for all to hear. Separate videos and images, so they know what to expect. No one likes those types of surprises.

7) Make sure images don’t scale beyond their maximum width

This is important, because you can avoid pixelated scaling of images that are too small for a space. Images should be large enough to fill 100% of a mobile device (for most cases), but desktop sized sites should set only the maximum width to 100%. I’ve seen some cases where someone has one of those large 27” displays, and when they drag out the browser width, the image scales with it, past its intended size.

8) Image scaling

If you have images scale, make sure they scale down, not up. It’s best to set exact dimensions for your images. Many times, a percentage is used for one dimension, while the other dimension is set to auto. For example, if you want an image to span 50% of the width of the browser, you’d set the image’s width to 50% and the height to auto.

9) Avoid using image captions

Image captions or any other accompanying text can cause all sorts of problems for you and your users. The first problem is that it is tough to fit the text on a mobile device. With smartphones, you have limited space as it is, but trying to add text can make the entire experience feel cluttered and crammed together. Another issue is that you are limited in the amount of text you can use. Adding a caption, or any extra text, adds the variable of responsive text into the mix. You have to consider word breaks, and how multiple lines of text will end up looking along with your image. If the text is used as an overlay, you also have to concern yourself with where it falls over the image. Light text over light area of the image will make the text unreadable. Contrast is key, and every image is different.

Conclusion

The bottom line when it comes down to any aspect of web design is that it has to work well, and have the user in mind. If no one can use your website, they won’t come back. Following these simple dos and don’ts of responsive image galleries will make it so that users won’t run into common problems when viewing your images.

James George

James George is a Professional Web & Graphic Designer. He owns Design Crawl, a site for graphic designers featuring free vector graphics and templates. He also owns G Squared Studios, which handles web design in Knoxville.