Connections 2012 Key Takeaway: Design for ALL Inboxes
Justine & I recently got back from Connections 2012 and are happy to report back that the conference was great and we sat in on some very informative sessions! I’m already looking forward to next year’s event.
One of my favorite sessions was, “Email Design for the Age of the Mobile Inbox,” which was hosted by Chris Studabaker, Global Practice Manager, Design Solutions at ExactTarget. In addition, Linsday Mueller, Marketing Manager, and Brenna Scurlock, Email Developer, from Rewards Network, joined in on the session to discuss how they moved towards a mobile strategy.
With mobile opens increasing 123% in only 18 months, we are definitely in the age of the mobile inbox! Mobile can no longer be ignored.
September 2012 Email Opens By Platform:
- Mobile: 38%
- Desktop: 33%
- Webmail: 29%
Note: The data in the chart above is based on more than 1 billion opens collected from Litmus customers worldwide using Email Analytics.
The session raised a really valid point — while everyone is talking about creating “mobile emails,” you must make sure you are designing for EVERY inbox since your audience is (most likely) composed of users who view emails on desktops, tablets, and/or mobile devices. In fact, ExactTarget has found that 42% of subscribers will view an email ONLY on a mobile device, 56% will view an email ONLY on a desktop, and 2% will view it on multiple devices — this 2% figure is strikingly similar to our stats which have shown us that only 3% of users have viewed a single campaign in more than one environment. With that being said, emails must be designed to look great in ALL environments!
Chris Studabaker discussed two strategies for the most effective email optimization: aware and responsive.
Mobile Aware: Simple Improvement Without Specialization
With the mobile aware approach, email designers should establish a mobile-friendly, visual framework without creating a customized mobile email. Tactics for following the mobile aware approach include:
- Single column design
- Key information & CTA in upper left of email
- Larger text
- Touch-friendly buttons
- Key subject line info should be in the first 35 characters
- Preheader should be under 80 characters
- Preview pane optimization – include an intro to the email & the primary CTA
If a designer takes this kind of approach, no matter which environment the email is read in, it will be easy to interact with. Here is a great example from Help Scout of an email designed with these tactics in mind:
Responsive Design: Customized Mobile Experience
Ethan Marcotte coined the term “responsive web design,” in which he believes there are three parts:
- Flexible, grid-based layouts
- Flexible images (and media)
- Media queries
These components work on the web, but what about in email? Since email clients are fussy about code, the support for all three of the above can be a little iffy. However, media queries allow you to be the most flexible and they have the most support.
CSS media queries allow you to write rules that will alternate different styles for different screen sizes (media queries do not detect specific mobile devices; rather screen size in pixels are what is being detected). CSS media queries can auto-adjust the layout, content and text size of an email depending on the screen size of the device it is being read on.
Which mobile clients support media queries? And what happens when an environment doesn’t support media queries? It will fall back to the default email — not such a bad alternative! Check out Style Campaign’s chart of compatibility:
| Media Query Support | |
| iPhone | Yes |
| iPad | Yes |
| iPod Touch | Yes |
| Android 2.1 Eclair native client | No |
| Android 2.2 Froyo native client | Yes |
| Android 2.3 Gingerbread native client | Yes |
| Android 4.0 Ice Creme Sandwich native client | Yes |
| Android 4.1 Jelly bean native client | Yes |
| Android Outlook Exchange 3rd party app | No |
| Gmail app on all platforms | No |
| Yahoo Mail 1.4.6 Android app | No |
| Microsoft Surface tablet (default native client) | No |
| Windows Mobile 6.1 | No |
| Windows Phone 7 | No |
| Windows Phone 7.5 (Mango) | Yes |
| Windows Phone 8 | Yes |
| BlackBerry OS 5 | No |
| BlackBerry OS 6 | Yes |
| Palm web OS 4.5 | Yes |
| Kindle Fire (silk) native client | Yes |
| Kindle Fire HD (New vr. of Silk) native client | Yes |
Check out Twitter’s use of responsive design in this email:
Twitter not only changed the layout of the email depending on the size of the screen it was being read on, but it changed the call to action as well! On the desktop version the CTA is “Try it now” and on the mobile version it’s “Get the app and try it now.”
Which is right for you — the mobile aware approach or responsive design?
Before making a decision, it’s important to understand your audience. You should find out which environments your subscribers are opening your emails on most frequently (you can do this with our Email Analytics tool) and then determine if you need to put a mobile strategy in place. If you’re seeing mobile opens anywhere near or over 10%, you definitely need to do something about it. In her post, “Email Design For All: The Mobile Inbox,” ExactTarget’s Andrea Smith states, “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.”
Best case scenario: Use both options together (mobile aware + responsive) so that if the media query isn’t supported in a specific client, it’ll still look great no matter what device it’s opened on!
Whatever approach you decide to use, make sure you plan for the long term. It isn’t simply tweaking the code of a single email, it’s optimizing your entire email marketing framework, so make sure you plan thoroughly, code & design, and TEST TEST TEST your new approaches to see what resonates with your audience best.
Additional Tips for Designing for ALL Inboxes
Justine recently participated in a webinar with Subscription Site Insider, “Mobile Email Creation for Subscription Sites,” in which she outlined some additional tips for creating emails that look great on every environment:
- Create touch-friendly links and buttons
- Include a clear CTA
- Use short, direct copy
- Increase font sizes (body copy: 15-20px; headlines: 22px+)
- Create content hierarchy
- Use a one-column layout
- DON’T: Group links closely together
- DON’T: Forget to make landing pages mobile-friendly too!
In addition, since there are no “mobile email standards” and compatibility varies across devices, you should plan for an “images off” environment and use the preheader/snippet text to your advantage. Here is a chart showing compatibility across some of the most popular mobile devices:
What mobile approach are you taking? How did you come to use that approach? We’d love to hear what you’re doing!
Additional Resources
- 10 tips to make your emails more mobile-friendly
- Email Design for All: The Mobile Inbox — an article by ExactTarget’s Andrea Smith
- Four Responsive Email Layouts by Chris Studabaker
- Webinar: Mobile + Email — hosted by Justine Jordan & Chris Studabaker
- Check out the latest Email Client Market Share stats, collected from over 100 million email opens!
