Is email communication important to you? – are your emails still not optimzed for display on mobile devices?
If you can answer yes to these two questions, then you should read this post to get a flavor of the possibilities with responsive email design.
The increased usage of tablets and smarthones started the responsive web design trend around 2010, with sites that automatically adapts to the screen size of the users browser.
According to a study by Litmus, 51% of all email opens are now from mobile devices, and this trend is currently accellerating.
Source: Litmus, november 2013
These figures might be different from site to site, but the trend is clear: It’s important that your emails looks fine on a mobile device.
Old school email design
A best practice when designing emails, has been to keep the width of the email at approximately 600 pixels, to ensure the email looked good in all the different email clients and devices.
However with the inceasingly usage of smartphones, this rule doesn’t work so well anymore. The typical width of a smartphone screen is around 300 pixels, which means that emails designed for 600 pixels width is reduced with 50% to be displayed in the smartphone email client.
As you can see in the examble below, the mail from Piwik renderes nicely on both the desktop version of Gmail and on the iPhone. However as the email isn’t responsive, the text is very small on the iPhone which isn’t very user friendly.
To ensure a good readibility of your emails on smartphones, it’s therefore a good idea to start working with the concept of responsive emails.
Continue reading to get tips and examples for creating your own responisve emails, and get inspiration from beautiful ready to publish templates.
Building your own responsive emails
When you’re designing a html email from scratch there are a few general rules that you should follow to get a good result:
- Use old school tables for the design grid instead of <div>
- Include the style sheet at the top of the html code (don’t use a external css file)
- Also include the styles as inline elements on the html elements of the template (ex. <a href=”#” style=”color: #ffffff;”>test</a>”
- Avoid using semantic tags like <h1>,<h2>,<p>….
- Don’t use css floating – it’s not supported by many email clients
- Test like crazy in the main email clients ;-)
Creating a responsive email adds anonther layer of complexity (or fun) to the design process. Besides the general rules, you now also needs to create style sheets for the most typical resulutions for the users email clients.
Normally it’s enough to create a stylesheet for devices with the following resolutions:
- Width > 479 pixels (mobile devices)
- Width > 640 pixels (desktion pc’s, tablets, and web mail clients like gmail)
You can find further information and sample code for your own responsive html email at:
All these sites contain valuable in depth information and examples on how to create your own responsible email.
If you don’t have the time or skills to create you own responsive email template, just continue reading to see a great collection of beautyful responsive email templates
Responsive email templates
Email on acid
Email on acid is a great looking free template responsive emails. The standard design is great but if you want to change the design you need to do the changes the hard way in the raw html.
Mailfusion is a premium theme that has been tested with Litmus to ensure high deliverability. The template is redy to use in both Mailchimp or CampaignMonitor.
Goodmail can easilly be customized by using a drag and drop editor. In the editor us can add/removed modules and change the color scheme of the mail. Goodmail is Litmus tested and supportes Mailchimp and CampaignMonitor markup.
Antworth is a free responsive email template that’s pretty basic, but has been tested in many email clients, and can be modified if you dig into the code.
CampaignMonitor template builder
CampaignMonitor template builder is a free responsive email builder from Campaign Monitor where you can build html mails in a few minutes.
Business mail is a modern template with a fresh look. It’s a premium template that comes with support and has been tested in all the major browsers.
Sendy offers a clean and fresh design for your emails. This is a premium theme that comes with full support, and is ready for both MailChimp and MailMonitor.
This premium email template is great for shops that want to upgrade their newsletter and present their products in a responsive email.