Alternate mobile images

Our newsletter subscriber’s top two email clients are Outlook 07 and iPhone, opposite ends of the rendering spectrum. So while the gradient in my recent webinar invite looked sweet under iOS, with background images stripped out it appeared guillotined in Outlook.

Serving different images to different clients

Different creative for Outlook users

Via the UA string in the HTTP request header, our dynamic image server (DIS) knows which client is being used to view an email. So were able to serve different images to different clients on open. This enabled us to fix the hacked off gradient, by generating a different foreground image just for Outlook users.

Context-aware

This capability has me thinking about the problems you could solve by serving alternate images to desktop and mobile users. Particularly retailers, who typically use one large hero image. The downside is extra prep. Though you’d still send the one HTML file, but with a dynamic image URL.
Legibility - Banana Republic’s desktop layout becomes unreadable when scaled down (left). The text is too small, CTA’s tiny and photo detail is lost in translation.

Desktop creative on the iPhone                           Alternate iPhone creative

Different creative for desktop and iPhone via one HTML file

Emphasis - Compare the email on the left with Gap’s mobile site on the right. It’s the same creative, given a different treatment. Not only are elements designed for touch, the store locator is given increased prominence. We can finesse our content to better serve mobile users; in this AE email you could emphasize the short code.

Gap email                                                                      Gap mobile site

Different creative for desktop and iPhone via one HTML file

Image resizing: In the Gap email above, the hero image is 109k compared to 38k on the mobile site. I looked at 50 retail emails, and found 258.4K to be the average weight of the images. Ideally you’d serve smaller resolution images to mobile users, increasing download speed and reducing data charges.

650px wide and 80K                                                320px and 25K

Different creative for desktop and iPhone via one HTML file

Why not just use Media Queries?

While writing this I’m working on a welcome series that uses media queries, I’m a fan. Nevertheless there are limitations with image replacement.

Performance: Using @media, your desktop images get downloaded along with the mobile images. So instead of a 50K download it’s a 300K download. Same if you hide a large desktop image, while not visible it’s still downloaded. With DIS, you only request the small mobile image. Resizing is done server-side, not on the users mobile browser. When streaming, you can also adjust image compression, depending on the bandwidth.

Support: Media queries are not supported in IE8 and below, older BlackBerrys, anything below Firefox 3.5, WP7 and most desktop clients like Outlook. EmailonAcid found support to be, “buggy to say the very least” on Android. Dynamic images have universal support.

Capabilities: Dynamic images are programmable and assembled on-the-fly. You can update time-sensitive offers after send or generate images based on time of day and location e.g. If its 7am on the East Coast and your on an iPhone - heck and the weather is cold - generate this image on open.

Media queries are a thing of beauty if you want to rework your CSS. I plan to use them in conjunction with DIS. They’re also free if you know how to use them. But there are solid reasons why mobile web devs have started to build responsive image solutions to manage their image assets.

Design for mobile & send to desktop?

This has worked for me with a skinny layout. But it becomes strained if you have a 600-850px wide template. Your buttons, text and images can become jumbo-sized on the desktop, in order to be legible once they’re scaled down. It just depends on the execution, I have seen some slick designs using this tactic.

Though you’re still sending large desktop assets - like 677K worth of images - to mobile users. When Google Maps was reduced from 100K to ~80K, traffic was up 10% the first week and 25% in the following three weeks.

Mobile email is more likely to be “in bed” than “on the go”. But I still think simplified layouts are a safer bet. Small screen sizes mean you can view fewer products at a time (though here’s an interesting idea).  Whereas the desktop can accommodate more detailed imagery and exposed product, without sacrificing clean design.

Goodbye editorial layouts                                      Hello glance-friendly layouts

Different creative for desktop and iPhone via one HTML file

Nothing’s perfect

Skinny layouts float in a sea of white space, fluid layouts rock but we’ve no max-width support in early IE or Outlook, media queries download desktop assets that mobile users don’t need, wide scalable layouts come with large file sizes and alternate images require extra resources.

Which tactic you use will depend on your audience, the devices you’re targeting, if you plan to serve identical creative to desktop and mobile, your resources, how image heavy your creative is and if you have a mobile commerce site.

4 Responses to “Alternate mobile images”

Leave a comment: