- 13 Jun 2012
- 11 Comments
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.
Photos with dominant subjects scale well as viewport size decreases
But look what happens when you scale a photo with a subject that is smaller in the photo.
Photos with less dominant subjects lose their impact when scaled down
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.
As the viewport size reduces a different crop of the original is served to suit
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.
As the subject of the photo changes the caption needs to change to suit
Some things to consider
This is really interesting as it raises some key points when considering responsive images, those being:
- 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.
- 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.
- As a photo is cropped the message that it communicates will change as well as its effectiveness in communicating that original message.
- 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.
- 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.
Surely by the time your scale had reduced to that of a mobile device, the photograph would ideally be sat at 100% width in a column occupying 100% of the screen. Would your contextual photographs not hold their subject at 3.5-4.5 inches wide?
Nice article and good insight.
I would argue this slightly though, purely for the fact the context within which the user is viewing the image in kind of restricts things, and that is a given in most devices.
I recently read an article about responsive design and it explained that the amount of new devices that will eventually hit most developers and designers project specs will hinder the responsive argument and lean more towards the fluid responsive design. This means there are no breakpoints it just fits whatever device you have.
My question would be how can this idea fit in with the fluid responsive way of thinking if there are to be an unknown quantity of breakpoints in the design?
Good post.
I have recently been working on mobile responsive sites and I have also seen this problem.
I think the content is driving the site so cropping should be a last resort the we should do as much as possible to preserve content before resorting to altering it.
A possible solution in body content might start with serving smaller (file size) images and then scale them down but show images at the maximum width of the screen, so 480px if we are talking about iPhone. This should still show most of the context of the shot without loosing the detail, after all a picture paints a thousand words.
If you can’t use that approach for some reason you need to start thinking about a different layout and using mobile templates as apposed to responsive. We shouldn’t really be altering layout (DOM) on responsive size too much unless using CSS because we end up adding load with lots of JavaScript. Responsive sites either need it their own designs and templates (expensive option) or it will always be a compromise. Clients want the compromise in most cases because it’s cheaper. More user testing need perhaps.
Great article James, addressing a very real problem. I’d be interested to know your thoughts about the potential of seam carving as a more scalable solution to this?http://en.wikipedia.org/wiki/Seam_carving
Thanks for your comments everyone.
Russell – Absolutely. When viewed at 100% and filling the screen (e.g. within the wonderful ‘Eyewitness’ app from the Guardian) these contextual photos can still be powerful. The problem arises when photos are not given the space they need within mobile viewports.
Mark – Great point. The breakpoint approach seems unsustainable in some ways as soon there will be connected devices of all screen sizes to design for. This also comes down to the constraints that the page design puts upon the photo size regardless of the device. It may be the case that we can code in some logic that if the layout/ device determines the photo has to be a certain size then we must serve the most appropriate crop instead. How you work out the relevant photo description and alt text for a fluid approach with multiple photos is all sorts of fun and games!
James – Thanks so much for your practical suggestions. I agree, cropping seems to open up a whole world of pain for large websites that deliver thousands of photos (think any sizeable news website). You make a great point with regards to user testing. People are great at giving feedback about photos.
Pete – Thanks for reminding me about seam carving. I remember reading about it a while ago and it blew my tiny mind. I have seen it used to increase the physical size of photos but not thought about the reverse situation. Maybe it is the solution of delivering ‘fluid’ responsive design? (not that i’d imagine you can just plug it into your CMS and off you go!)
Great post :)
The one point I would argue is that you *should not* need different alt text at different resolutions.
Each image should convey the same core semantic content and thus have the same alt text – it is against core principals to serve different semantics to different devices. That’s the main difference between responsive designs and dedicated mobile sites – the content should be the same. The *display* of the content can be different; as reflected in the design or indeed the crop (as demonstrated in your post).
Thanks Matt for the comment.
I just don’t understand why you wouldn’t change the alt text. The crop could potentially completely change the message that the photo conveys.
Surely by changing the alt text we are doing those who rely on it a favour?
I agree with Matt Wilcox here. If the alt text needs to change, the source should change as well. As Stephen Hay put it on twitter recently, “A cow won’t become a sheep at 480px”.
In the example you gave, I don’t think the photo has changed because of the cropping. Yes, some context is lost, as the context was lost in the photo of Obama that I used in my example, but the core of the photo is still the same. It is still a photo of a person running with a torch through Bristol.
From the perspective of someone who hasn’t visited Bristol, I have to take your word for it that it took place there regardless. I don’t recognize any of the landmarks.
Bristol is the location and context, but not the subject of the photo.
BTW, it isn’t just photographs that suffer from the problem of reduction. See the graphs in my recent post:
http://blog.cloudfour.com/explaining-the-ios-and-android-mobile-disparity/
On a small screen, the lines are too small to read. Bryan Rieger describes a project faced similar problems with images of constellations in this presentation:
http://www.slideshare.net/bryanrieger/prime-sky
Finally, look at how the browser for meego image in this responsive design (again by the Riegers) changes as it gets smaller:
http://browser.nokia.com/smartphones.html
So yes, there is some worry that someone can crop away all the meaning from a photograph and people should be careful about that. But there are many instances where providing a different, edited version of an image at a small screen size greatly enhances the meaning an utility of an image.
In fact in many cases (e.g., the line graphs in my post), without making changes, an image will lose all of its meaning at small sizes.
Hey Jason, thanks so much for commenting, and for the other examples you share.
This is interesting. We agree that we may need to serve different crops of the same image but following on from Matt’s point the alt text should remain the same to follow core principles.
I can imagine how this result in alt text and image descriptions that describe elements that users wont be able to see within the photos on small viewports.
That sounds pretty undesirable.
I’m wondering what kind of support for this type of photo management is being offered by the big CMS vendors to actually make any of this remotely feasible?
The editors draft of the W3C standard around the use of photos within responsive designs and for retina displays is now available, http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html
Hey James
I mocked this really simple example up to try and answer your question. Something like this is very achievable through a wysiwyg for less skilled editors. All that’s changing for each BP is margin.
http://moople.co.uk/rwd/images/
A
Leave a comment