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.

hm iphone native  yoox iphone native


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

yoox on gmail for ios  hm on gmail for ios

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:swecretescapes
  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:preheader in preview Secret Escapes

    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.

    atrapalo landing page  aldo landing page

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

minute read

Popular stories



BriteVerify email verification ensures that an email address actually exists in real-time


The #1 global data quality tool used by thousands of Salesforce admins


Insights and deliverability guidance from the only all-in-one email marketing solution

GridBuddy Cloud

Transform how you interact with your data through the versatility of grids.

Return Path

World-class deliverability applications to optimize email marketing programs

Trust Assessments

A revolutionary new solution for assessing Salesforce data quality


Validity for Email

Increase inbox placement and maximize subscriber reach with clean and actionable data

Validity for Data Management

Simplify data management with solutions that improve data quality and increase CRM adoption

Validity for Sales Productivity

Give your sales team back hours per day with tools designed to increase productivity and mitigate pipeline risks in real-time