T
We're Happier Together! NYC Devshop has joined the HappyFunCorp family! Learn more!

Devshop

Bullet Proof Emails

Bullet Proof Emails

Development

Bullet Proof Emails

Posted by: Jesse Mauro

Tuesday, Oct 4th, 2016

The evolution of web and mobile app development has progressed quickly in the last couple of years, let alone the last decade. With new technologies being released what seems like monthly, it's hard to comprehend that an important aspect of a company's marketing strategy involves web practices that have been frowned upon for 15 years. Unlike prehistoric web browsers who stayed several years past their welcome (Rest in Pieces, Internet Explorer), eventually their time was up, leaving the door open for their shiny, newer model offspring. Unfortunately, this has not been the case for email clients. Microsoft Outlook 2013 is incapable of reading even the most basic of CSS capabilities. In other words: CSS, a language created in 1996, is virtually useless in an email client created 3 years ago. Having recently completed an email revamp for Tumblr's marketing and transactional campaigns, I've picked up on a few tricks along the way.

Importance

What's the importance of proper email development? The answer varies, but let's start with the simplest: there is none. This is the simplest answer, but not the best. Sure, you can code your emails in the trendiest CSS3 techniques. You can design your templates with rounded corners, and faded backgrounds, and only worry about the new school customers and clients who've adapted to recent mail options. The best answer to the question of email importance is: it should matter. For starters, sending out email templates that don't work on all devices and platforms makes your company look unprofessional. If you're a small company, no different from your actual product or website, a poorly designed/developed email may sway a user to pick your competitor over you. If you're a large company, it can give the impression that you don't care about your users experience or don't care to make an effort now that they are clients. However it may be perceived, there's no reason to risk misunderstandings for this simple reason: developing email templates that work for the past doesn't compromise those of the present.

Design

Let's start with the design. Since the late 2000s (regrettable) skeuomorphic trend faded, and simplistic "flat" design took over, email designs should fall inline with the lack of development capabilities. Keep your templates simple: avoid multiple columns with rows of images and backgrounds, if possible. If you're promoting news articles or a blog, show a few quick samples with a "Call to Action" back to your site for the full experience. Reading in a restricted email window is not agreeable anyways. The information that you want your users to see should be front and center, with clear actionable requests. Watch your image to text ratio. Too many images will often be flagged as spam by your user's email client. Another tip: The font-face attribute only works in Apple Mail 6.5 and ipad/iphone iOS 7 so forget about the fancy typefaces used in your brand guide. And I know what you're going to say, "but i've seen emails from companies wi"...they're images. If your image to text ratio is low, sure, go for it. Otherwise, choose a computer safe Font-Family that resembles your brand. Less is more.

Development

Once you have your beautiful, simple email design, it's time to build. A few notes:

1. The most reliable way to assure your email structure will work across all platforms is to use tables. Tables nested inside of tables to be exact. Believe me, I know how bad that sounds. But it's the only way. The good news is, other than making your skin crawl, using tables will still render as expected in newer browsers/clients. Here's an example of a template with a header, footer, and two column body:


<!-- *Note* I'm applying fail safe attributes both as table attributes and inline css styling -->
<table align="center" cellpadding="0" cellspacing="0" width="600" style="width:600px;margin:auto:padding:0;">
<tr>
<td>
<!-- header -->
<p style="font-family:Arial,sans-serif;font-size:18px;color:#000000;font-weight:bold">Header</p>
</td>
</tr>
<tr>
<td>
<!-- *Note* since we want a two column body we need to add a nested table -->
<table align="center" cellpadding="0" cellspacing="0" width="100%" style="width:100%;margin:0:padding:0;">
<tr>
<td>
<!-- left column content -->
</td>
<td>
<!--right column content -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- footer -->
<p style="font-family:Arial,sans-serif;font-size:18px;color:#000000;font-weight:bold">footer</p>
</td>
</tr>
</table>

2. Previous versions of Microsoft Outlook (remember the aforementioned 2013 version?) will not allow the use of padding, height, width and other basic CSS properties on any p, a, div or img tags. This is a huge issue, but there is a work around. Things like padding, height, and border-radius, (the last being for the email clients that will accept this) can be applied to the table cell itself. If you wanted to style a link to look like a button, you could do the following:


<!-- *Note* some email clients won't except the three digit hex shortcut: #000. To be on the safe side write all 6 numbers -->
<td bgColor="#00000" style="padding:20px;-webkit-border-radius:3px;-moz-border-radius:3px:border-radius:3px;">
<!-- *Note* since padding and height applied to links will only work on certain email clients you can use break tags to create the same effect -->
<a href="my-link.com" target="_blank">
</br>
Click Here
<br/><br/>
</a>
</td>

3. There are a number of email clients that won't read CSS defined in the <head> section of your template. Do you know what that means? Yep, to be on the safe side you need to use inline styling and inline styling only. Demonstration:


<p style="font-size:14;color:#000;text-align:center;">how much do you love this?</p>

Closing The Gap

There's no reason your email can't look the way you intended it to across all platforms and devices. You can use online services like Litmus or Email on Acid to view renderings of your email templates across any email client of your choosing. While the results are not 100% accurate, they're usually very close with some small discrepancies. Upload your HTML, and the results will output as static images in the shell of their respective email client. Using these tools and tips, you can send out perfectly crafted marketing or promotional emails with no viewing issues. Happy coding.

Jesse Mauro

Meet The Author

Jesse has 10 years of web development experience. He's almost complete with his goal of becoming a unicorn: design, front and back end development. He specializes in the front end while strengthening his backend development daily. As a UI/UX Designer he has helped craft a number of clean, innovative web apps from MVP's to fully functional products.