The Goldilocks Challenge of Responsive Email Design - Part III: Just Right

Having explored mobile email optimisation (or lack therefore) in ‘Part I: Too Little’ and ‘Part II: Too Much’ of the Goldilocks series, the best examples we’ve seen take the middle ground.

The answer is to optimise, but minimally, and with a scalable design. Good examples come from fashion sites Yoox and H&M.

At first sight, the optimisation isn’t obvious - but when you look more carefully, you’ll notice that in the optimised version, the top row categories in the H&M email are larger, and Yoox has gotten rid of the top row altogether. Both changes make the email cleaner and easier to read.

Optimised versions as seen in the iOS native mail app.

 

 

Optimised and non-scaled version as seen in the native Android mail app

 

Non-optimised but scaled versions as seen in the Gmail for iOS app

 

 

However, the designs are such that they look good and CTAs are clickable even if optimisation is not accepted by the email client (in this case, the Gmail for iOS app). Furthermore, these designs require minimum scrolling where it’s not scaled, such as in the native Android mail app.

Looking at what the good senders did, we’ve come up with a list of things to check before sending your email.

  1. Preview images & CTAs. Use them, but ensure good size and visibility. Apple® interface guidelines recommend that target areas be at least 44×44 pixels (and remember, 82% of mobile opens are on iOS devices!). For non-iOS devices that won’t scale automatically, keep the CTAs visible without scrolling past about 320 pixels. These tips can be taken into consideration and applied universally, lowering the chances of optimisation going wrong.
     
  2. Think of the font size too, Apple automatically increases font size to 13 pixels. For a header, just above 20 pixels is the way to go. This is where responsive design might be a better idea than uniform font sizes.
     
  3. Mind the width. Again, not every app automatically scales. It’s little effort to make sure the you're covering non-iOS devices.
     
  4. Know your list. Since the cost effectiveness of optimisation depends on the variety of devices applicable to your list, it’s worth knowing their percentage share. You might want to invest in previewing with different mobile simulators - for example with Return Path’s Inbox Preview.
     
  5. Check your preheaders. iOS’s preview is taken from the first line of the email’s content:


     
  6. The most common functional preheaders like ‘To view in your browser...’ as seen from mySupermarket are less appealing than what Secret Escapes has done. This is what the top of their email looks like:



    The functional ‘View this email online’ is still there, but carefully placed after the descriptive line. While its still good for spam and conversion rates to keep functional preheaders, you may want to add a descriptive line before them.
  7. Make vouchers easily usable. If you offer them, make sure they’re easy to redeem on mobile devices and don’t require printing. 74.2% of users are "somewhat to extremely likely" to do the former rather than the latter. (Bluehornet Report 2013).

  8. Optimise the landing page. Don’t let the good impression disappear due to an unreadable landing page. It’s no use having a beautifully optimised email if the landing page of the CTAs isn’t also comfortably usable on a mobile device. Both Atrapalo and Aldo offer good examples.

     


With these tips we conclude the Goldilocks trilogy for email marketers. Hopefully the suggestions outlined will help get your email optimisation just right. Happy sending!

Research and Content by Pearl Ho & Lisett Luik