Lately, I have been making quite a few of these responsive emails and I must admit that they are quite a different beast from responsive websites – for email, there are certain limitations and quite a few workarounds you need to establish for it to be readable in today’s slew of email clients – whereas in the browser world, you would only need to contend with IE, Chrome, Safari, Firefox and Opera as well as Mobile Safari, Mobile Chrome and the Android web browsers – In email, you have to support all different versions of MS Outlook, Lotus, Thunderbird, Apple mail as well as web clients Gmail, Yahoo mail, Hotmail and the mobile email clients of devices such as Blackberry, Windows Phone, iOS and Android (at the very least!). Also, for the web email clients – you would have to make sure it renders correctly in each of the respective desktop/mobile web browsers. It is really hard work and I often find myself having to sacrifice support for devices such as Blackberries and Windows Phone because the user statistics for these devices are very low or often nil.

If you are just starting off, then I know how difficult this challenge must be for you – so to fast track your project – here are a few tried and tested email templates you could start with. I have tested these extensively using Litmus and I highly recommend that you subscribe to their service if you want to do any email design at all. I do notice however, that not all these emails look exactly the same across all the platforms and you will often notice that the odd client or device will render it completely different but they do a good job of degrading nicely on those few unsupported clients.

Here is a good one:

Take a look at the HTML version.

Here is another one that is more e-commerce oriented:

View the HTML version.

Here are two email templates I created for UBC:

View the HTML version.

And a newsletter version:

View the HTML version.

Here are a few more samples:
http://benjamingaw.com/email/responsive-test2.html
http://benjamingaw.com/email/responsive-test3.html
http://benjamingaw.com/email/responsive-test5.html

Feel free to tinker and tweak with these templates and make it your own.