Flickr recently published an article that addressed how they rebuilt their lightbox presentation for mobile devices: Lessons Learned from the Flickr Touch Lightbox. This article shows that perceived performance is extremely important on a mobile device. User’s expect something to occur as soon as they touch the screen and any delay degrades the experience.
I can not emphasize this enough. Of course, any UI must be responsive. But a touch UI doubly so. Apple clearly “got” this in the development of the first iPhone. Possibly because there is no “click” sound when you interact with the device it is very hard to tell if the device has registered your interaction without immediate feedback. Further, if there is even a tiny delay in how the device responds to touch interaction it feels clunky. Much clunkier than a slightly glitchy desktop UI. One of the things keep us from supporting the desktop lightbox on touch devices was that it felt very slow and clunky. Once we figured out that this was a matter of percieved responsiveness it was pretty clear where we needed to focus: percieved performance.
Lessons Learned from the Flickr Touch Lightbox – Stephen Woods, Flickr
Part of their solution replaced the standard image tags with divs that used the image as a background.
When we first tested this, however, we found performance quite disappointing. Another team pointed us to a trick: don’t use <img> tags. We got a huge performance boost when using <div> tags with the photo as a background image.
Semantics and Performance
Obviously divs are not images. User interfaces do not treat them equally. While we believe it’s best to use the correct semantic element while building web applications, we wanted to see how this affected accessibility and how we could solve the problems. Todd Kloots, Yahoo! Accessibility Lab, summed up our concerns: “My biggest concern is that this trend is going to quickly erode the semantics of the web that we fought so hard for 10 years ago when we were battling against <table>s for layout.“
The problem with images on mobile applications arises when doing CSS transformations. While answering some of our questions, Stephen expanded on the technical limitations:
When using 3d acceleration (translate: transform3d) the performance difference between <div> and <img> is enormous. Like night and day. It seems that when using css background images the browser is making optimizations that we must take advantage of. I see your point about semantics, but until mobile browsers can handle <img> tags like they can divs I can’t see moving away from this practice.
To expand on that: in order to get interfaces on mobile devices to perform you need to offload as much as possible to the graphics hardware (and/or the thread that runs layout and css). This means pushing a lot of stuff into css rules and simplified markup. Bad I know, but hard to work around.
Moving Forward with ARIA
ARIA roles and attributes allow us to fix this non-semantic presentation. ARIA roles allow us to take a container and tell the user it should be treated like another. The aria-label attribute also allows us to place alternate text on this pseudo image.
Visit our test page for more information: Test Page: using ARIA to fix non-standard image usage
Screen readers not only announce ARIA-enhanced divs as images, they are also available via the image navigation menus. Flickr updated their mobile apps within a few hours of seeing our test page. We’re working with other mobile app developers to make sure they understand how using non-semantic markup for performance reasons can affect the user’s experience and how some simple ARIA attributes and restore that structure.
VoiceOver announces ARIA-enhanced divs
Try it on your mobile device
You can view the ARIA enhanced lightbox on your iPhone or iPad by clicking on an image at m.flickr.com.
There has been some confusion about this article. We are not suggesting you use divs with background images on mobile web applications for all situations. This article deals with complex animation of images. Please use a basic image tag with alt attribute for non-animated images.