Email Design for All: The Mobile Inbox

So what's all the hype with mobile email lately? First, let's start fresh in our approach. Try not to refer to any email message as "mobile" - your audience will likely view a message on desktops, tablets and mobile devices. Unless there is a specific use case for a mobile-only email, it's best to approach optimization considerations that focus on overall experience, respecting all environments.

*These statistics represent industry averages, and results for individual audiences may have more or less for any particular email client. iPhone can commonly range up to 30-40%, Android is often in the 8-12 range, and iPad is often 6-10. For current industry averages each month, check out

Industry average stats show us that over 17% of subscribers are reading their email on the iPhone. Android isn't far behind, sneaking up around 7% - so with tablet devices like the iPad thrown in, we're seeing over 30% of audiences using a small screen to get their daily marketing fix. In other words - we simply can't afford to ignore it anymore. While some brands do fail to adopt a friendly approach for smaller screens, we're seeing a large trend towards the following two solutions for the most effective email optimization: aware and responsive.

Aware | Simple improvement without specialization.
The actual design and build effort is standard, with optimization efforts going into a layout that works well for all viewing environments. Focus on a single column layout with important content on the left for preview pane views, using larger text and increased button size for optimal conversion.

Responsive | Delivering a customized mobile experience.
This is done by starting with a basic layout, the default version, and then adding a media query in the head tag of the email's HTML to set new styles that override the default when a smaller screen size (under 480px) is detected. In the past, brands experimented with using media queries to serve up an entirely different email, but we've found it smarter and more successful to use the same base email and use the query for simple alterations. You can shift a two column layout into one, resize the email and images, or alter font sizes and more. This is always a safe approach because environments that don’t support the media query will simply show the default. If you’ve done your job correctly, both the default and alternate view are highly viable messages.

So where do you go from here? Here's a few tips for joining the 'in crowd'.

Design for your audience.
If you're seeing mobile opens anywhere near or over 10%, it's definitely time to do something about it. Weigh the effort needed to specialize with a realistic view of your content and production timeline, and pick an approach that makes sense for your brand. For example, certain emails in a program might be just fine with an aware approach, but a higher traffic welcome message or special offer could benefit from a few responsive elements.

Design for touch.
Tablet devices and most smart phones use touch screens for navigation, so stop thinking about click-based interaction and more about swipes and taps. As with any good design, use grid-based layouts to ensure content is easy to digest and interact with. The average finger isn't as precise as a cursor, so elements like buttons and links need to be a large enough touch target so the user doesn't accidentally click the wrong thing or miss entirely. If you're going to design a button that's easy to press, shoot for a height that's 1/3 of an inch or larger.

Design for legibility.
There are several factors to consider to ensure your message is legible:

  • Contrast: The older we get, the less light enters the human eye, making it harder to see screen contrast. Computers and phones let people alter these settings, so carefully consider your color choices, ensuring the message stands out properly against imagery and background colors.
  • Text size: In my opinion, never go smaller than 13px for body copy. If you expect people to read the message without having to zoom in, realistically start at 14-16px, depending on the actual font, and test thoroughly to ensure it can actually be read. The width of your email also determines how the email scales down on a mobile device, so testing is still important in order to really know what the on-screen result is. Designers - as a former print designer who loved nothing more than gorgeous 11pt typography, this was a change I had to ease into and play around with. I've learned that you might need to be more generous with margins and whitespace to ensure a beautiful design holds true using larger typography. Marketers - be sure to check with your designer as you alter the text size so they can help make sure balance and layout coordinates well with the new font sizes. Go big or go home!
  • Imagery: Bold, beautiful imagery is slowly taking over our inboxes in more than just retail email, as we take cues from Pinterest and redesigns to social hubs like Facebook and Twitter. Images help tell your brand's story, so consider spending more time choosing artful shots that complement your message. Especially in B2B messaging, think outside the realm of traditional stock photography and make your messages unique.
  • Layout: A one-column approach works best in both aware and responsive designs. If you have a multi-column layout, carefully plan how design elements would shift in a responsive design, using a grid to ensure the technical aspect is possible. See more great information on multi-device layout patterns from the book Mobile First's author Luke Wroblewski.

Design for reality.
Most people take their mobile devices everywhere with them - because you, know, they're mobile - and we can't ignore the fact that it's very likely the user is distracted while they're thumbing through their inbox. Think about it - if someone's in a meeting at work, or in line at the grocery store, or even waiting in the carpool lane to pick up the kids from school - any distraction may take them away from actually reading your email, or opening it and forgetting about it altogether. In addition to considering what font size you use, you have to tailor your message accordingly:

  • Keep it simple with direct content.
  • Get to the point via a clear call-to-action. Make it 100% clear what you want the reader to do.
  • Condense and edit. Is there a better or more intriguing way to say the same thing?

Keep in mind that if it's difficult to find a link or see the point of the email, the reader will jump ship and move on.

Design for longevity.
Whatever you decide to do, remember that it takes time to thoroughly plan, design, code and test a new approach. Optimizing often is more than just a code tweak or quick look and feel refresh, since the content approach needs to be carefully considered. You’re not just slapping a new shell on old content. Plan ample time for an optimization effort, and find new ways to make your brand voice distinct and effective.

For more mobile inbox information, join us at Connections 2012 – keep your eyes peeled for our breakout sessions, including Email Design for the Age of the Mobile Inbox. Share your optimized efforts with @ETDesign on Twitter!

Andrea Smith
Senior Design Consultant

ExactTarget Campaign Solutions Team

Connections 2014

Experience Digital Marketing Like Never Before

See For Yourself

Comments are closed.