I began coding and creating responsive email templates in early 2012. As a (somewhat) seasoned front-end web developer, I couldn’t believe how taxing this was on my demeanor. Never have I mumbled incoherently or dropped so many F-bombs out loud. I quickly realized the many challenges and nuances that came with email development. Like browsers, email clients render email templates differently, too, and this becomes the bigger issue when you need to include them all.
My first email template began with a company known as Santa Fe Natural Tobacco Co. and the designer for this email was just as inexperienced as I was so shen she dropped the PSD on my desktop, I said, “Sure, no problem”. I had no idea of the crusade this would send me on. First, I tested the best rendition using Email on Acid and failed across the board. In fact, I remember my reaction to those results and it wasn’t good. I saw a jumbled mess of slices and text. Nothing rendered and this was desktop! I didn’t even get to mobile yet. I was completely deflated, and so, the crusade began.
[the_ad id=”2319″]
One thing about email clients. They favor particularly well with table(s) based layouts. Nested tables to boot. I know, I know… Who wants to develop tables. I get it. But once you see the results, the structure and sectioning of your slices it’ll begin to make more sense. You need to take an unbiased approach to this. The second thing I quickly realized was how well attribute selectors played with my email when wrapped inside @media queries. Yes, this is not quite responsive but adaptive and necessary. We target breakpoints and keep our text/copy fluid within those breakpoints. This allows you to tell the email how to look when a device displays it (phone vs. tablet vs. desktop vs. landscape tablet and so forth).
I haven’t done much email development in the last 5 years but one thing I hear is clients haven’t changed much, which means they are just as archaic now as they were then. I swore back then I was going to develop a JavaScript driven platform that would eliminate each and every nuance I ever ran into with email. However, JavaScript doesn’t play well with clients, either. But in hindsight I developed some of the most compelling campaigns and never did I have to go back to my designer and say, “It can’t be done”.
The template library I developed in 2012-2013 still works (from what I hear) and I’m posting them here for whomever can get some use out of them. Keep in mind, these have been slightly modified for the browser but coded to work in the client as well. Always good to give your user the option of viewing your email in the browser.
Mark’s Email Template Library:
Template #1: