I have been working with responsive HTML emails for a good amount of time, and have developed my own method of programming them. My process allows for very fast turnarounds and support for most email clients ranging from Outlook 2000 and Thunderbird to iPad and Gmail.
The biggest problem with responsive emails is we’re trying to force a trend from the present day onto the web capabilities of over a decade ago. That being said, old software isn’t truly the problem. We can produce single-column responsive emails that work across the board without incident, but the issue arises when multi-column designs are intended to snap under each other (like a modern website in a browser does today). Furthermore, the email client holding things up actually isn’t one of the email clients almost old enough to drive a car, it’s actually Google’s Gmail client.
In my templates, it is possible to create an email with a sidebar that snaps into a one-column design on mobile email clients using a combination of HTML widths, inline styles, media queries and !important tags. However, this technique will not work in Gmail.
It is still possible to create a fully responsive HTML email with support for Gmail, but the design has to be a single-column layout. I’ve been able to get multi-column designs to work without snapping to single-column, but it would need to be known going into it that it would remain multi-column for mobile as well (and is not recommended).
The standard coding tricks for emails are still true- we want to use inline styles and never have any naked text tags (all p, span, a, etc. tags need to be styled including font-family, font-size, and color properties).
The best trick for developing responsive emails quickly and with flexibility for fast edits and changes is to use a new table for each section (I like to use a new table for every row). This way, rows are entirely independent and can be altered or removed quickly and without adversely affecting any other element in the email. In fact, I would avoid rowspan and colspan altogether! It would look something like this:
<table> <tr> <td>This is the first row</td> </tr> </table> <table> <tr> <td>This is the second row</td> </tr> </table>
The next trick for responsive emails when dealing with browser-based email clients like AOL, Yahoo!, Outlook.com, and Gmail is to have wrapping tables surrounding the entire email set to 100% width.
I define classes on each table in addition to setting an HTML width. This way, if the email client strips the head styles, the HTML width is used, and for clients that allow header styles, a percent width along with a max-width property is used.
I could write all day about the inner-workings of my responsive email template, but the quickest way to see how it works would be to just download it and check it out. I’m happy to answer any questions about it.
