What 22 Billion Newsletters Tell Us About Designing For Mobile Email

What 22 Billion Newsletters Tell Us About Designing For Mobile Email

• By Ros Hodgekiss


• August 21st, 2014


• DevicesFrameworksMarketing


• 0 Comments

Do we know that platforms and email clients to concentration on when formulating an email newsletter for yourself or a client? Using a information from over 22 billion email subscribers, we dynamic what designers should prioritize, both this year and beyond.

In this article, we’ll appreciate a numbers from a “Email Marketing Trends⁴⁰¹” news to assistance designers like we make sensitive decisions about what works and what doesn’t in email newsletters. Here are some of a things we’ll cover:

• Which email clients and platforms should we be ancillary now?


• Does manageable pattern matter for email (even nonetheless we’re still coding with tables)?


• Should we learn all of a email workarounds or usually use existent builders and frameworks?


• “Beyond a click” matters. Are your alighting pages vouchsafing we down?


• What should we prioritize in an email newsletter project?

Email: Is It Still All Table Layouts?

If we send email newsletters or have finished even a cursory volume of pattern or coding for them, afterwards you’ll know that CSS support in email clients is, well, broken. For a longest time, designers have avoided regulating even a many common CSS properties, in a fear that deviate from a dullest table-based blueprint would outcome in poignant digest differences between email clients, including Outlook and Gmail.

However, some clients are some-more damaged than others. And if we have a advantage of a lot of subscribers who examination their email on, say, an iOS device, afterwards we can substantially emanate unequivocally web-like practice in a inbox. A use news for email clients² can definitely beam we in this decision, as can some of a information we’ve collected.

A Look At The Numbers

Given a extraordinary volume of email that Campaign Monitor³ sends on interest of a customers, we were means to collect and investigate information from over 6 million email campaigns and 22 billion(!) email recipients. In particular, we looked during opens opposite mobile, desktop and webmail clients; year-over-year trends; and patterns of click-through rates (CTR) formed on opens by device.

⁴

Data is formed on 1.8 billion opens from scarcely 22 billion email recipients; 9% of opens occurred in an undetectable environment. (View vast version⁵)

Some of what we found came as no surprise. As expected, mobile inclination dominated marketplace share opposite 2013 and 2014. Less apparent is what mobile’s ceiling trend means to designers who wish to emanate a good email believe on all platforms — and, of course, get some-more opens and clicks in a process.

What We Can Learn?

Given a endless believe in email design, we’ve rolled a commentary into 3 unsentimental tips that we can request when building your subsequent email debate — and, not to mention, any alighting pages. Without any serve hesitation, here they are.

1. As With a Web, Design for Mobile First

In new years, a marketplace share of email clients has severely shifted. In turn, designers have had to adjust to changes in email behavior. For example, desktop email clients dominated until early 2012, and now mobile inclination are a healthy sourroundings for reading email. This means that personification it protected with a fixed-width, one-column blueprint isn’t adequate anymore — we need to concentration on creation a calm not usually compelling, though easy to examination and easy to navigate on a tiny screen. Responsive pattern for email⁶ is no longer a luxury, though a necessity.

If we wizz in on mobile marketplace share, one thing jumps out: Nearly 90% of all mobile opens start on Apple’s iOS devices. While this information is lopsided by a fact that, graphic many Android email clients, iOS displays images by default (thereby induction some-more opens), it still shows how straightforwardly people devour email on iPhones and iPads.

⁷

Data formed on 780,479,174 mobile opens opposite 2,164,665 campaigns in 2013. (View vast version⁸)

iOS’ prevalence has a smashing upside. It means that many email designers (particularly those with a high commission of iOS users) can get unequivocally brave with formulating web-like practice for mobile. For example, Panic⁹ now frequently integrates SVG animation, web fonts and manageable pattern in a campaigns:

¹⁰

Panic integrates SVG animation, web fonts and manageable pattern in a campaigns. (View vast version¹¹)

The doctrine here is to safeguard that any CSS techniques we use reduce gracefully in less-capable email clients. What looks extraordinary in Mail competence be obsolete in Outlook.

Also, in box you’re wondering, switching to a mobile-friendly email newsletter template does produce results. DEG Digital’s redesign for Crocs¹² resulted in a 16% aloft reading rendezvous altogether and 8% some-more clicks, while new tests by SitePoint¹³ uncover that a manageable chronicle of a “Versioning” newsletter¹⁴ perceived 16% some-more clicks than a prior template.

My Smashing Magazine article¹⁵ from 2011 is still a good authority on tailoring a email believe to mobile devices. We also have a some-more new “Guide to Responsive Email Design¹⁶” to get we adult to speed. That being said, roughly any decent email-marketing use has a visible builder for formulating mobile-ready newsletters — ours is called Canvas and is good value a look¹⁷.

2. But Desktop and Webmail Clients Will Not Die

Given that mobile email readership is so distant in a lead, is it even value worrying about what’s function in webmail or desktop email clients? Yes. While 87% of clicks start when a reader opens an email for a initial time, mobile readers who open an email a second time from their desktop are 65% some-more expected to click by in a given email, that goes to uncover that “email triage” is unequivocally many a genuine phenomenon.

¹⁸

Mobile readers who open an email a second time from their desktop are 65% some-more expected to click by in a given email. (View vast version¹⁹)

So, where do opens occur? Outlook 2007+ (as graphic from Outlook.com) accounts for 56% of all desktop opens and scarcely 16% of sum opens in any environment. Unfortunately, that a infancy of desktop opens start in opposite editions of Outlook doesn’t make life any easier for designers. Each book of Outlook has a possess digest challenges²⁰, that frequently need VML workarounds (for example, when requesting credentials images²¹). As retrograde as it sounds, newer versions of Outlook for Windows are some-more challenging to work with than comparison ones: 2000 and 2003 describe HTML email regulating Internet Explorer, since 2007, 2010 and 2013 use Microsoft Word (thus, a VML tomfoolery).

Refreshingly, Apple’s Mail (which, interjection to WebKit, offers glorious CSS support) has a 33% share of email clients. And, of all email clients, it tends to chuck adult a fewest digest problems.

The webmail stage maybe saw a biggest marketplace share drop final year, though it still accounts for 22% of opens recorded. Looking during other email clients in Microsoft’s stable, Outlook.com (previously Hotmail) accounts for scarcely half of all opens in this group. In comparison, Gmail and Yahoo Mail any has an roughly 25% share of a webmail market, restraining them for second place.

Like a desktop Outlooks, Gmail in sold has some quirks in a CSS support that can be cryptic for designers. For starters, Gmail still strips CSS styles²² from a conduct component of HTML emails, creation collection such as CSS Inliner²³ a required apparatus (in box your email height doesn’t have a apparatus like this built in).

In a end, if you’re coding newsletters from scratch, afterwards learn a opposite digest quirks opposite email clients — for your possess sanity.

3. Go Beyond a Click

Almost no one runs an email debate that doesn’t couple to something. So, landing pages should be deliberate a partial of a altogether experience. While in some cases, people are peaceful to perspective email on dual or some-more platforms, a same isn’t indispensably loyal with alighting pages. A bad mobile believe can have a vast impact on rebound rates²⁴. If your email newsletter is meant to beget online sales and nonetheless 41% of subscribers can’t effectively navigate your pages around a mobile device, afterwards you’re potentially losing a lot of revenue.

Looking during it positively, optimizing your website for mobile could have a certain impact not usually on your email campaigns, though on your website and business overall. For instance, e-commerce is quite wily to get right on mobile devices. However, following a redesign regulating a ResponsiveJS framework, 5th Finger observed²⁵ that one customer totalled a 54% boost in checkout conversions on smartphones and a 24% boost on tablets in reduction than 14 weeks.

²⁶

Nars Cosmetics after a redesign (Image: 5th Finger²⁷) (View vast version²⁸)

The good news is that a lot of landing-page builders (such as Unbounce²⁹), frameworks (such as Zurb Foundation³⁰) and CMS themes (looking during you, WordPress³¹) concentration on creation mobile browsing pleasurable. These resources have been grown to do many of a tough work of building a manageable website: bettering navigation elements and forms to be usable, creation calm entertaining and scaling images.

In further to a collection that hoop a unsentimental side of manageable design, designers also have challenging resources on a theory, including some good eBooks from Smashing Magazine³². So, regardless of either you’re some-more gentle building out of a box, coding or simply revelation a engineer what to do, we can yield a good post-click believe for email recipients.

Where Do We Go From Here?

One thing we know about email selling is that record is changeable all a time. Knowing and bettering to your subscribers’ email use — and bargain how they devour your calm — is vicious to a success of your email campaigns.

³³

Email customer use by sourroundings from 2011 to 2014. Note that a yellow represents “undetectable” devices, that increasing dramatically from Q4 onwards since Google’s preference to cache email images³⁴ influenced showing of both Gmail’s webmail and mobile email clients. (View vast version³⁵)

If we demeanour during device trends, a few things are clear:

• Design mobile-first.
  
  Now that a infancy of opens start on mobile inclination (and will continue to do so for a foreseeable future), designers have to pierce on from a fixed-width, table-based proceed to email design. Instead, demeanour during how to emanate improved practice regulating CSS, manageable layouts, web fonts and more. In a future, we might even start to use flexbox to emanate appreciative layouts opposite a accumulation of inboxes!


• But get gentle with workarounds for desktop and webmail clients.
  
  Sadly, these email clients aren’t going divided anytime soon. With 16% of all opens still occurring opposite Outlook’s desktop clients and an additional 15% being common between Outlook.com and Gmail alone, both desktop and webmail clients are still unequivocally many in use — and will expected continue to be unequivocally broken. If operative with VML isn’t your crater of tea, we have some good email builders to select from, such as Canvas³⁶. These collection have a lot of insider believe built in and are a good starting indicate for a mobile-ready campaign.


• Think over a click.
  
  You substantially don’t run email campaigns in isolation, so examination a believe around them. On a mobile device, is it easy to subscribe, click by in a newsletter and afterwards finish a idea (such as formulating an comment or purchasing an object on your website)? If 41% of your subscribers devour mail on a mobile device, afterwards creation all post-click interactions as easy as probable is critical.


• Prioritize testing.
  
  Finally, a email customer landscape is as fragmented as ever. Our “Guide to CSS Support in Email³⁷” shows that a 18 email clients (split opposite 3 environments) all have unequivocally opposite levels of CSS support. If you’re conceptualizing and building an email debate from scratch, afterwards we substantially won’t be means to get things “just right” in a many common email clients among your subscribers. So, put time into real-life device testing³⁸, or deposit income in practical tests, such as a ones found in many email platforms and around services such as Litmus³⁹.

Now that we’ve looked during what’s trending, it’s over to you. What kinds of email open trends are we seeing, and are they carrying an outcome on how we pattern and send email campaigns? We’d adore to hear your practice in a comments below.

Other Resources

• “Email Marketing Trends⁴⁰¹,” Campaign Monitor


• Responsive Email Design⁴¹, Campaign Monitor


• Canvas⁴², Campaign Monitor
  
  An email newsletter builder


• Foundation⁴³, Zurb
  
  A manageable front-end framework

(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/

↑ Back to topShare on Twitter

What 22 Billion Newsletters Tell Us About Designing For Mobile Email