User experience problems with responsive photos

Thanks to the pioneering work of Ethan Marcotte, responsive design has become the hottest subject within the web design community. Within his book 'Responsive Web design' Ethan talks about how fluid grids, media queries and responsive photos present a consistent user experience regardless of the screen size of the device they are using.

In this article I'd like to focus on some of the user experience issues that result from responsive photos.

Responsive photos

Responsive photos are typically coded to scale to suit the size of the display that they are being viewed on. More importantly, the photos retain their aspect ratio so they still display correctly when viewed at different sizes.

This all seems very sensible. Regardless of whether you view the page on your laptop or phone the photos will remain proportional so the experience is consistent.

The scaling option will work well for photos that show one large subject such as in the following example.

But look what happens when you scale a photo with a subject that is smaller in the photo.

You can see how as the photo gets smaller the main subject (the torch bearer) gets lost and the impact and message of the photo diminishes.

'Contextual' photos

I took the photo of the torch bearer recently as the torch was carried through Bristol.

While I was waiting for the big event I listened to the pro photographers discussing which lens to use to get the best shot.

One suggested to the other that a lens of 70mm from a particular location gives a nice 'contextual shot'. What he meant was that lens is wide enough to show the torch bearer, the bridge and the crowd. This would add context to the resulting photo as it reveals the occasion, the location and the atmosphere, thus delivering an interesting and saleable final photo.

'Contextual photos' are abundant across the web, particularly on news websites where they are used to help to tell the story.

The problem with contextual photos when used in responsive websites is they become less effective when displayed on small devices the main subject becomes too small in the frame.

So does this mean we shouldn’t use these wider angle or ‘contextural photos’ within responsive websites?

Jason Grigsby recently presented a framework for discussing responsive image solutions  where he shows how photos can be cropped to suit different view ports. He writes;

"Authors need to be able to provide different sources for images at different sizes not based on resolution or based on network speed, but based on the judgment of the designer for what is the best image at a particular breakpoint."

'Crop points'

Jason's suggested solution is really interesting. Essentially as a photo scales down it is swapped out for a cropped version that retains the primary subject of the original. In the same way that a design may have breakpoints that determine when an alternative layout is served, a responsive photo can have ‘crop points’ that result in a new crop of the original being shown.

Here’s how this would work for the photo of the torch bearer.

 

 

You’ll notice how as the photo is cropped, the message that it communicates changes. You lose the fact it was shot in Bristol and that there was a big crowd. Arguably it should be treated as a new photo with unique alt text and descriptions because each crop is communicating something different as illustrated below.

 

Some things to consider

This is really interesting as it raises some key points when considering responsive images, those being:

1. The effectiveness of a photo is likely to change when it is displayed at different sizes, particularly if the main subject is less dominant in the frame as we've seen in 'contextual' photos.
2. Different crops of a single photo may change the context of the photo and should be treated as a completely new photo and not just a crop of the original.
3. As a photo is cropped the message that it communicates will change as well as its effectiveness in communicating that original message.
4. Someone within the workflow (Jason refers to an Art Director) needs to decide the most appropriate crop for each breakpoint and unique alt tags and descriptions will be needed to be added for each crop too.
5. This all relies on some smart coding to deliver the correct photo at the right time, which is far from simple. Matt Wilcox has outlined the numerous technical problems involved with delivering responsive photos.

So whether you decide to crop or to scale you should consider both the workflow and user experience impacts of your chosen approach.

The cropping approach may make sense for 'contextual' photos but be careful you don't crop out any context that the user might find useful.

For more information on photo user experience check out www.photoUX.co.uk which I have recently launched in an effort to improve the usability of web photos.