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">
  <tr>
    <td align="center">
      <table width="auto" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="background-color:#21BADA; border-radius: 30px;"><a href="http://www.listrak.com" 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>
        </tr>
      </table>
    </td>
  </tr>
</table>

EXAMPLE CTA


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.




Share this post: