Coding Responsive HTML Email Like it’s 1999

I’ve been designing and coding HTML emails for over a decade now and much to my amazement, very few things have changed since I first started. Where else can you find people still using tables for an entire layout? However, no matter how long you have been doing this and how little the process has changed, there are always challenges to be had when it comes to consistency. I don’t know about you, but when I manage to have an email render consistently across all the major desktop and web-based email clients (and now mobile clients), I can honestly say I’ve had a good day.

You see, even though coding for the web involves using HTML markup from decades past, the challenges faced are very much the same as those of your everyday web developer today. It sure isn’t fun to make a website play nice with every major browser out there and it’s pretty much the same situation when dealing with email clients (please leave a comment if you hate MS Outlook 2007 and 2010 as much as I do). As if all that weren’t enough to keep you on your toes, responsive web design came along as a result of the explosion in the use of smartphones and tablets. Many reports and research studies point to the evident rise of mobile devices for email reading, to the point that as much as 40% of all emails read today are first read on a mobile device. If you call yourself an email marketer and are somehow still wondering about the merits of responsive emails, then you need to get out of your comfort zone before you lose your job.

I’m hoping to start a series of posts on the challenges that I’ve come across when designing responsive emails and the solutions that I’ve found scattered all over the web. There are plenty of great resources out there, such as Litmus’ blog, as well as Campaign Monitor’s and Mailchimp’s. Responsive email design involves more than just CSS queries and every design layout that we are tasked with comes with a unique set of challenges, which I’m hoping to address here as much as possible. Please feel free to comment or provide better solutions to the issues presented, as all information shared helps all of us improve as members of a community.

Let’s start with the first question of the series:

How do you prevent the two tables included in the following section of code from stacking on top each other when viewed in MS Outlook 2007 and 2010?

The code works as expected in every major email client (the exception being MS Outlook 2007 & 2010. It actually works just fine for Outlook 2011 for Mac).

March 23, 2013
Juan Rojo

Leave A Reply