Inbox Wars: The Email Awakens

Monday, January 11, 2016 Listrak 4 Comments

By Aaron Pearson, Product Manager

Email development can be hard to get right! Even for veteran email developers and web jedi, the rendering limitations of inboxes have created a disturbance in the force. I just saw the new Star Wars, so bear with me. No spoilers, I promise.

Even with the multitude of limitations, 2015 was a great year for email! We saw some of the most creative solutions and improvements that really pushed the boundaries of what we thought emails could do.

Pret gave us this refreshing, interactive smoothie email.

Litmus got everyone talking with a live Twitter feed in email.

Mark Robbins, from RebelMail, used punch card coding to create a live email shopping cart and checkout experience.

These are all amazing, impressive examples of what is possible, but lightyears beyond what most email padawans are capable of. Yet, there are several techniques and philosophies that each of these emails use that email marketers can begin implementing, even with limited development resources.

Two Sides of the Force

Two perspectives of developing email that come from the web development world areprogressive enhancement and graceful degradation.

Progressive enhancement is developing for the least common denominator or least supported inbox. Sometimes we call this “Outlook first”, since Outlook is often the most difficult to support. Once the email is well supported in all inboxes, you can enhance features and functionality with custom styles that will be supported in advanced inboxes.

Graceful degradation focuses on developing for the most advanced/capable inboxes, forcing “older” or less capable inbox users to just deal with it. Depending on your audience, usually the majority of users are opening in well supported inboxes.

Typically, because of the vast differences of rendering support for email inboxes, a combination of both methods will work for different scenarios.

Email Client Market Share

It’s important to know your audience and to understand the limitations and capabilities of the inboxes they are using. Source

As of December 2015, 50% of email opens are occurring on Apple devices, between iPhone, iPad, and Apple Mail. This gives us “A New Hope” for the future of email, as these inboxes offer us the most support for future forward coding practices, with support for CSS3 and HTML5.

"Do or do not, there is no try" - Yoda

Clearly, Yoda never tried to develop an email, or his quote would have been more like:

Even Pret’s interactive smoothie email has a great fallback design for inboxes with minimal support for interactivity.

Let’s take a look at one example that shows the use of graceful degradation and progressive enhancement, as well as best practices for user experience.

Bulletproof buttons is the common term for creating call-to-action buttons in email. It’s nearly impossible to have them render consistently across inboxes, so we had to add “bulletproof” to let everyone know, it’s okay that they don’t look the same everywhere. Form follows function. In other words, it just needs to be clickable!

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <td align="center">
      <table width="auto" cellpadding="0" cellspacing="0" border="0">
          <td style="background-color:#21BADA; border-radius: 30px;"><a href="" title="" target="_blank" style="font-family:sans-serif; font-size:14px; color:#ffffff; text-align:center; display:inline-block; background: #21BADA linear-gradient(to bottom, #4ACDEB, #1091CB); border:1px solid #21BADA; text-decoration:none; padding:12px 30px; border-radius: 30px; box-shadow: 0 0 8px grey; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;"><strong>EXAMPLE CTA</strong></a></td>


It’s easy to see how styles gracefully degrade in inboxes with limited support. Custom styles like box-shadow, border-radius, and background gradients slowly lose support in Gmail, Yahoo, and Outlook. However, the functionality still exists.

The best example of progressive enhancement in email development is responsive design, which we don’t often think of in that way. The fact is, media queries are not supported in all inboxes, so it’s important to consider the fallback state of emails viewed on mobile devices.

In a few short steps, let’s make our button full width and increase the font size to make a more thumb-friendly button.

Add a media query into the embedded style sheet in the head of the document. This media query will engage the styles associated with the classes when the viewport hits 414px.

@media only screen and (max-width : 414px) {
 .full-width {width: 100%;}
 .larger-text {font-size: 16px !important;}

Finally, add the “full-width” class to the wrapping table and link, and include the “larger-text” class on the link.

The most beneficial reasons for using bulletproof buttons rather than an image, are the ability to enhance styles on mobile and also provide the best experience for users when images are turned off. It’s generally a sight for sore eyes when an image heavy email loads with images turned off. Consider “images off mode” a rendering support limitation for those inboxes. It’s probably best if this isn’t a user’s first impression.

Surprisingly, a high number of email users still view emails with images turned off. Once Gmail began caching and loading images automatically, we learned that about 43% of users were reading emails with images turned off. I’ve seen my mom do it. The problem is real.

Light Side vs Dark Side

There are pros and cons to developing emails with progressive enhancement. It requires more planning and development time, and segments your audience by delivering a different experience. But sometimes different is unique and that can be a good thing.
Here is what Litmus had to say about their live Twitter feed:

“We were blown away by the results from this campaign! Over 53% of our opens came in a WebKit email client, so many of our users saw the progressively enhanced version. In total, there were 750+ tweets about #TEDC15 in the first 24 hours after sending the email. Additionally, the email helped drive over 4,000 new visitors to our website and generated over 1,000 new prospects in that same amount of time! Not to mention, this email saw the best engagement we’ve seen from any email we’ve ever sent—almost 60% of users viewed the email for over 18 seconds!“

Use the Force

Give it a try the next time you start developing an email. Think about how your email gracefully degrades and what enhancements you can style to better engage your audience.
Here is my favorite progressively enhanced email, and the fallback for unsupported inboxes.

Come join me in New York City on February 2 and Southern California on February 11 for a showcase of great emails from 2015. I’ll share some additional insight about the overall email audience and market share from the past year and examples of campaigns and tactics to try in 2016. This event is open to retailers and I can offer you a discounted pass using code “Listrak50” at checkout. Visit our event page here to learn more. In the meantime, let me know if you have any questions!


  1. Hey this is an amazing article, thanks a lot. Quick question, do you have any idea if for the smoothie email a tool have been used to calculate the values of the CSS?

    1. A tool hasn't been made to recreate the animations of that email, however the site Fresh Inbox does create email-specific tools for animations and effects. That's a good resource for those kind of things.

      - Aaron

  2. Interesting as many of your examples seem to require image-only emails, yet the same "images-off" best practice advice is given at the bottom of the post. With the majority of the clients in the Litmus "top clients" list supporting images by default, is HTML text really necessary? Is this still a best practice in 2016? Also noticed HTML text in the buttons, which seems unnecessary vs. images.

  3. Very true, more inboxes are starting to cache images by default, however it’s still an option for users to disable this feature and we need to support a wide variety of inboxes. All of the emails in this article have html text calls to action as opposed to image based. This would allow them to render without images being downloaded. Certainly the interactivity would suffer without loading images, but for a more standard marketing email we would still recommend text based CTAs to ensure your readers aren’t left without context of what the message intent is. - Aaron