Email Templates

Email is often the last recognised area of website design because, well, it's not part of the standard website. This, however, does not make it any less importnat than your website design because a truly great design should span all the areas of your brand whether that be the website, business cards, letter heads or email templates.

Email design is the closest approximation to your website design because it's built with the same tools, HTML + CSS (albeit tables and inline css).

Looking at th 5000 subscribers to our Responsive Design Weekly we see a break up of Microsoft Outlook, Sparrow, Gmail, Hotmail, Yahoo Mail meaning that xx% of our readers view the email directly within the browser.... so why wouldn't we set up the email templates responsively.

If you're going to be taking your email marketing seriously you will probably look to someone like Mailchimp or Campaign Monitor to look after your email requirements. Both are fantastic in my opinion so it's really up to who you prefer when choosing a provider. We chose Mailchimp because they offered a free service for lists below 2000 subscribers and less than 12000 emails per month, plus I really liked the tone of their website and it always makes me smile when I stretch the email preview too far (try it for yourself).


Both of the products offer a responsive service allowing you to choose from some pre-existing templates that are responsive as well as providing previews of how the emails will render on a mobile at both portrait and landscape mode.

From these existing templates you are able to customise the CSS through their WYSIWYG editor and you can edit the layout through a HTML editor. If you're going to make any HTML changes to your template I would always advise taking a copy of the original code, and also saving the template back as a new template incase you've made any mistakes.

Responsive Email Rules

There are a few rules that you need to be aware when creating responsive emails. Actually rules is the wrong word, these are simply things you really should watch out for when you're creating your email templates.

Email is not a webpage

Ever wonder why there is a "Link to view if your browser" version? Well basically when you're viewing your email in Sparrow, Outlook, Apple Mail etc you're getting a rendering engine that is unlike those found in Chrome, Safari, Firefox, Internet Explorer; and the days are very much alike to the days when we used tables for layout to keep consistency in our designs.

You 'could' build an email template that contains's and an external stylesheet, but as of writing this only xyz will support it.

==== need to add more to this article ====