If you’re pulling your hair out wondering where to begin with responsive emails, here’s a headstart with the 3 top tools we found invaluable when developing ours.
Email clients are like the awkward, old-fashioned cousins of the modern web browser. Developing code for them means going back a decade or so to old-school HTML tables and inline CSS styles. Each one seems to come with its own list of quirks and pitfalls requiring different code snippets to make them behave. And like a Whac-A-Mole game, often patching up one issue will just pop up another one somewhere else!
This is where the boilerplate comes in. Combining the collective knowledge of the email design community together in one place, it resets any major rendering problems across the most common email clients. This makes it a great place to start with developing your templates and it can also help ensure a consistent output across your development team going forward.
However, its not as easy as copying the code into your own email and letting it work its magic. You need to understand exactly what’s going on in your chosen boilerplate in order to get the best outcome from it and to tailor it to your own design layout and needs.
We based our own boilerplate on this one from Sean Powell: http://htmlemailboilerplate.com/.
We liked how it brings learnings and techniques from various sources together and how it sets everything out really clearly with comments and links to further reading. It provides media query options for many different devices and also a handy bit of code to combat iOS’s styling of dates and addresses, which can render text unreadable with the wrong colour scheme. Sean Powell talks it through in more detail in this blog post.
Fortunately, you can now find plenty of ready-made responsive templates online that you can download and use as a base for your own, or pick apart to learn new solutions to different layout problems.
The best templates to use will depend on your particular communication, audience etc. Is it a newsletter? A product promotion? Is it aimed at businesses or consumers? It’s important to have a good idea of your content, it’s hierarchy and how it should flow on different devices before looking at templates so that you choose one that fits your email’s needs, not the other way around. It’s all very well finding cool templates that do funky things, but do they work for your particular scenario?
If you’re working with an acquired boilerplate it also makes sense to look for templates that are compatible with it. For example, Email on Acid have their own boilerplate and responsive template which work together well, and the set of templates by Stamplia use Sean Powell’s boilerplate. These even come Litmus-tested so if you have an account you can see how they perform across different clients. Which leads us nicely on to…
3. Litmus’ testing features
Litmus is great for testing your emails across a variety of devices and browsers. But what we’ve found a lifesaver in developing new templates is the interactive testing feature. It allows you to alter your email code and preview the changes in an email client instantly without having to send a new email and re-test. Now let’s face it, it’s usually Outlook that scuppers your best laid plans and pops up some strange abnormality that you can’t replicate anywhere else, so the ability to debug live in this client in particular can save a lot of troubleshooting time.
The code analysis feature also helps by giving you a handy summary of anything within your code that is unsupported per email client. Hopefully you’ll have most of the warnings covered off by other rules so you can ignore them but sometimes it may just alert you to something you’ve missed.
Don’t forget to hit the buttons at the top too to see your email with the preview panel on and images turned off. Happy developing!
For further reading, check these out:
The How-To Guide to Responsive Email Design by Litmus
Guide to Responsive Email Design by Campaign Monitor