Home > Others > What 22 Billion Newsletters Tell Us About Designing For Mobile Email

What 22 Billion Newsletters Tell Us About Designing For Mobile Email

August 21st, 2014 Leave a comment Go to comments
9% of opens occurred in an undetectable environment

Do you know which platforms and email clients to focus on when creating an email newsletter for yourself or a client? Using the data from over 22 billion email subscribers, we determined what designers should prioritize, both this year and beyond.

In this article, we’ll interpret the numbers from our “Email Marketing Trends401” report to help designers like you make informed decisions about what works and what doesn’t in email newsletters. Here are some of the things we’ll cover:

  • Which email clients and platforms should we be supporting now?
  • Does responsive design matter for email (even though we’re still coding with tables)?
  • Should we learn all of the email workarounds or just use existing builders and frameworks?
  • “Beyond the click” matters. Are your landing pages letting you down?
  • What should we prioritize in an email newsletter project?

Email: Is It Still All Table Layouts?

If you send email newsletters or have done even a cursory amount of design or coding for them, then you’ll know that CSS support in email clients is, well, broken. For the longest time, designers have avoided using even the most common CSS properties, in the fear that straying from the dullest table-based layout would result in significant rendering differences between email clients, including Outlook and Gmail.

However, some clients are more broken than others. And if you have the benefit of a lot of subscribers who read their email on, say, an iOS device, then you can probably create very web-like experiences in the inbox. A usage report for email clients2 can certainly guide you in this decision, as can some of the data we’ve collected.

A Look At The Numbers

Given the amazing volume of email that Campaign Monitor3 sends on behalf of its customers, we were able to collect and analyze data from over 6 million email campaigns and 22 billion(!) email recipients. In particular, we looked at opens across mobile, desktop and webmail clients; year-over-year trends; and patterns of click-through rates (CTR) based on opens by device.

4
Data is based on 1.8 billion opens from nearly 22 billion email recipients; 9% of opens occurred in an undetectable environment. (View large version5)

Some of what we found came as no surprise. As expected, mobile devices dominated market share across 2013 and 2014. Less obvious is what mobile’s upward trend means to designers who want to create a great email experience on all platforms — and, of course, get more opens and clicks in the process.

What We Can Learn?

Given our extensive experience in email design, we’ve rolled our findings into three practical tips that you can apply when building your next email campaign — and, not to mention, any landing pages. Without any further hesitation, here they are.

1. As With the Web, Design for Mobile First

In recent years, the market share of email clients has seriously shifted. In turn, designers have had to adapt to changes in email behavior. For example, desktop email clients dominated until early 2012, and now mobile devices are the natural environment for reading email. This means that playing it safe with a fixed-width, one-column layout isn’t enough anymore — we need to focus on making our content not only compelling, but easy to read and easy to navigate on a small screen. Responsive design for email6 is no longer a luxury, but a necessity.

If you zoom in on mobile market share, one thing jumps out: Nearly 90% of all mobile opens occur on Apple’s iOS devices. While this data is skewed by the fact that, unlike many Android email clients, iOS displays images by default (thereby registering more opens), it still shows how readily people consume email on iPhones and iPads.

7
Data based on 780,479,174 mobile opens across 2,164,665 campaigns in 2013. (View large version8)

iOS’ dominance has a wonderful upside. It means that many email designers (particularly those with a high percentage of iOS users) can get really adventurous with creating web-like experiences for mobile. For example, Panic9 now regularly integrates SVG animation, web fonts and responsive design in its campaigns:

Panic integrates SVG animation, web fonts and responsive design in its campaigns10
Panic integrates SVG animation, web fonts and responsive design in its campaigns. (View large version11)

The lesson here is to ensure that any CSS techniques you use degrade gracefully in less-capable email clients. What looks amazing in Mail might be unusable in Outlook.

Also, in case you’re wondering, switching to a mobile-friendly email newsletter template does yield results. DEG Digital’s redesign for Crocs12 resulted in a 16% higher reading engagement overall and 8% more clicks, while recent tests by SitePoint13 show that the responsive version of its “Versioning” newsletter14 received 16% more clicks than the previous template.

My Smashing Magazine article15 from 2011 is still a great primer on tailoring the email experience to mobile devices. We also have the more recent “Guide to Responsive Email Design16” to get you up to speed. That being said, almost every decent email-marketing service has a visual builder for creating mobile-ready newsletters — ours is called Canvas and is well worth a look17.

2. But Desktop and Webmail Clients Will Not Die

Given that mobile email readership is so far in the lead, is it even worth worrying about what’s happening in webmail or desktop email clients? Yes. While 87% of clicks happen when a reader opens an email for the first time, mobile readers who open an email a second time from their desktop are 65% more likely to click through in a given email, which goes to show that “email triage” is very much a real phenomenon.

Mobile readers who open an email a second time from their desktop are 65% more likely to click through in a given email.18
Mobile readers who open an email a second time from their desktop are 65% more likely to click through in a given email. (View large version19)

So, where do opens occur? Outlook 2007+ (as distinct from Outlook.com) accounts for 56% of all desktop opens and nearly 16% of total opens in any environment. Unfortunately, that the majority of desktop opens happen in different editions of Outlook doesn’t make life any easier for designers. Each edition of Outlook has its own rendering challenges20, which regularly require VML workarounds (for example, when applying background images21). As backwards as it sounds, newer versions of Outlook for Windows are more difficult to work with than older ones: 2000 and 2003 render HTML email using Internet Explorer, whereas 2007, 2010 and 2013 use Microsoft Word (thus, the VML tomfoolery).

Refreshingly, Apple’s Mail (which, thanks to WebKit, offers excellent CSS support) has a 33% share of email clients. And, of all email clients, it tends to throw up the fewest rendering problems.

The webmail scene perhaps saw the biggest market share dip last year, but it still accounts for 22% of opens recorded. Looking at other email clients in Microsoft’s stable, Outlook.com (previously Hotmail) accounts for nearly half of all opens in this group. In comparison, Gmail and Yahoo Mail each has an almost 25% share of the webmail market, tying them for second place.

Like the desktop Outlooks, Gmail in particular has some quirks in its CSS support that can be problematic for designers. For starters, Gmail still strips CSS styles22 from the head element of HTML emails, making tools such as CSS Inliner23 a necessary resource (in case your email platform doesn’t have a tool like this built in).

In the end, if you’re coding newsletters from scratch, then learn the different rendering quirks across email clients — for your own sanity.

3. Go Beyond the Click

Almost no one runs an email campaign that doesn’t link to something. So, landing pages should be considered a part of the overall experience. While in some cases, people are willing to view email on two or more platforms, the same isn’t necessarily true with landing pages. A poor mobile experience can have a big impact on bounce rates24. If your email newsletter is meant to generate online sales and yet 41% of subscribers can’t effectively navigate your pages via a mobile device, then you’re potentially losing a lot of revenue.

Looking at it positively, optimizing your website for mobile could have a positive impact not only on your email campaigns, but on your website and business overall. For instance, e-commerce is particularly tricky to get right on mobile devices. However, following a redesign using its ResponsiveJS framework, 5th Finger observed25 that one client measured a 54% increase in checkout conversions on smartphones and a 24% increase on tablets in less than 14 weeks.

The Nars Cosmetics site, post redesign.26
Nars Cosmetics after the redesign (Image: 5th Finger27) (View large version28)

The good news is that a lot of landing-page builders (such as Unbounce29), frameworks (such as Zurb Foundation30) and CMS themes (looking at you, WordPress31) focus on making mobile browsing pleasurable. These resources have been developed to do most of the hard work of building a responsive website: adapting navigation elements and forms to be usable, making text readable and scaling images.

In addition to the tools that handle the practical side of responsive design, designers also have formidable resources on the theory, including some great eBooks from Smashing Magazine32. So, regardless of whether you’re more comfortable building out of the box, coding or simply telling a designer what to do, you can provide a good post-click experience for email recipients.

Where Do We Go From Here?

One thing we know about email marketing is that technology is shifting all the time. Knowing and adapting to your subscribers’ email usage — and understanding how they consume your content — is critical to the success of your email campaigns.

Email client usage by environment from 2011-201433
Email client usage by environment from 2011 to 2014. Note that the yellow represents “undetectable” devices, which increased dramatically from Q4 onwards because Google’s decision to cache email images34 affected detection of both Gmail’s webmail and mobile email clients. (View large version35)

If we look at device trends, a few things are clear:

  • Design mobile-first.
    Now that the majority of opens occur on mobile devices (and will continue to do so for the foreseeable future), designers have to move on from a fixed-width, table-based approach to email design. Instead, look at how to create better experiences using CSS, responsive layouts, web fonts and more. In the future, we may even start to use flexbox to create pleasing layouts across a variety of inboxes!
  • But get comfortable with workarounds for desktop and webmail clients.
    Sadly, these email clients aren’t going away anytime soon. With 16% of all opens still occurring across Outlook’s desktop clients and an additional 15% being shared between Outlook.com and Gmail alone, both desktop and webmail clients are still very much in use — and will likely continue to be very broken. If working with VML isn’t your cup of tea, you have some great email builders to choose from, such as Canvas36. These tools have a lot of insider knowledge built in and are a great starting point for a mobile-ready campaign.
  • Think beyond the click.
    You probably don’t run email campaigns in isolation, so review the experience around them. On a mobile device, is it easy to subscribe, click through in a newsletter and then complete a goal (such as creating an account or purchasing an item on your website)? If 41% of your subscribers consume mail on a mobile device, then making all post-click interactions as easy as possible is critical.
  • Prioritize testing.
    Finally, the email client landscape is as fragmented as ever. Our “Guide to CSS Support in Email37” shows that the 18 email clients (split across three environments) all have very different levels of CSS support. If you’re designing and building an email campaign from scratch, then you probably won’t be able to get things “just right” in the most common email clients among your subscribers. So, put time into real-life device testing38, or invest money in virtual tests, such as the ones found in many email platforms and via services such as Litmus39.

Now that we’ve looked at what’s trending, it’s over to you. What kinds of email open trends are you seeing, and are they having an effect on how you design and send email campaigns? We’d love to hear your experiences in the comments below.

Other Resources

(al, ml)

Footnotes

  1. 1 https://www.campaignmonitor.com/guides/email-marketing-trends/
  2. 2 http://help.campaignmonitor.com/topic.aspx?t=201
  3. 3 http://campaignmonitor.com
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/08/02-opens-by-environment-2013-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/08/02-opens-by-environment-2013-opt.png
  6. 6 http://www.campaignmonitor.com/guides/mobile/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/08/03-mobile-email-trends-opt.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/08/03-mobile-email-trends-opt.png
  9. 9 http://panic.com/
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/08/04-panic-smashing-mag-opt.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/08/04-panic-smashing-mag-opt.png
  12. 12 http://www.degdigital.com/blog/the-benefits-of-responsive-email-design-a-crocs-case-study/
  13. 13 http://www.campaignmonitor.com/blog/post/4232/sitepoint-email-newsletter-redesign-ab-testing-results-canvas
  14. 14 http://www.sitepoint.com/versioning/
  15. 15 http://www.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/
  16. 16 http://www.campaignmonitor.com/guides/mobile/
  17. 17 http://campaignmonitor.com/canvas
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/08/05-how-mobile-users-interact-with-email-opt.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/08/05-how-mobile-users-interact-with-email-opt.png
  20. 20 http://campaignmonitor.com/css
  21. 21 http://backgrounds.cm/
  22. 22 http://www.campaignmonitor.com/blog/post/4219/gmail-and-google-apps-css-support-and-rendering-differences
  23. 23 http://inliner.cm/
  24. 24 http://www.simpleseogroup.com/case-study-how-web-design-affects-bounce-rate/
  25. 25 http://5thfinger.com/casestudies
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/08/06-merkle-nars-cosmetics-opt.jpg
  27. 27 http://5thfinger.com/
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/08/06-merkle-nars-cosmetics-opt.jpg
  29. 29 http://unbounce.com
  30. 30 http://foundation.zurb.com/
  31. 31 http://wordpress.com
  32. 32 http://www.smashingmagazine.com/ebooks/#mobile-design
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/08/07-opens-by-environment-per-quarter-opt.png
  34. 34 http://www.campaignmonitor.com/blog/post/4118/how-gmails-image-display-changes-will-affect-your-reports
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2014/08/07-opens-by-environment-per-quarter-opt.png
  36. 36 http://www.campaignmonitor.com/canvas/
  37. 37 http://www.campaignmonitor.com/css/
  38. 38 http://stylecampaign.com/blog/2014/04/managing-a-device-lab/
  39. 39 http://litmus.com/
  40. 40 https://www.campaignmonitor.com/guides/email-marketing-trends/
  41. 41 http://www.campaignmonitor.com/guides/mobile/
  42. 42 http://campaignmonitor.com/canvas
  43. 43 http://foundation.zurb.com/

The post What 22 Billion Newsletters Tell Us About Designing For Mobile Email appeared first on Smashing Magazine.

Categories: Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.