Next week, we’ll be launching a brand new set of default email templates for CheddarGetter. We learned a ton about coding and designing responsive and highly-deliverable emails through the process.
From the get-go, we had a few goals for the new templates in mind:
You’d think accomplishing these goals would be pretty straightforward. Unfortunately, coding emails is hard. We knew we wanted to create something mobile-first, but we weren’t quite sure what the best practices were or where to get started. THANK GOODNESS there are awesome resources out there. We really liked the mobile-first, single column approach we found here. Since notifications we send are transactional emails, not visually dynamic marketing emails, a single column structure works really well. It also makes editing the content a little less complicated.
According to FogCreek’s approach, our single column email should scale to fit smaller screens, but it shouldn’t get too wide to read in desktop clients. A max-width table does a pretty good job of restricting the email’s width in most email clients, but, as is often the case with emails, there are a few clients that don’t support this property: Apple Mail, Outlook, and Lotus Notes.
While Apple Mail doesn’t support “max-width,” it is one of the few email clients that supports media queries. By creating a style tag in the head and inserting this media query,
@media only screen and (min-width: 541px) {
.cheddar-content {
width: 540px !important;
}
}we can restrict the .cheddar-content table to 540px wide if the window is greater than 541px wide.
Neither Outlook nor Lotus Notes 8 support the “max-width” property. Luckily, these rogue clients are mostly used to view emails from desktop computers, so we don’t need to be as concerned with responsiveness here. A fixed-width table does the trick. We’re applying a few conditionals: (IE) covers Lotus Notes and earlier versions of Outlook, while (gte mso 9) covers Outlook 2007+. There’s also an identical conditional in the footer of the default notifications that contains all the close tags for this table.
<!--[if (gte mso 9)|(IE)]>
<table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->Now that we’ve gotten the basic responsive structure out of the way, let’s take a look at the email head. There are several differing opinions about the best DOCTYPE, HTML attributes, and meta tags to use in your emails. Below, we’re listing the ones we’ve chosen to use and why. If you’d like to learn more about email boilerplating, you can check out this interesting discussion on the Litmus community forum.
<!DOCTYPE html>We’ve chosen HTML5 as our DOCTYPE. This DOCTYPE tells the browser/email client to render the layout in standards mode, not quirks mode, and it’s required for standards validation. It is technically experimental, but in email testing and W3C validation, we haven’t run into any issues.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />The Content-Type meta tag is what controls the display of different character sets. Usually you’ll want to use utf-8.