Connections 2012 Key Takeaway: Design for ALL Inboxes

[ 0 By

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.

Mobile Opens Over Last 18 Months

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:

Help Scout - Mobile Aware Approach

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 Responsive Design Example
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:

Detailed Compatibility Report

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

Tags: