Create beautiful and modern emails with responsive design

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.

email opens by platforms
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.

non responsive email in mobile device and gmail

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

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.

See more

Guttis

guttiaGuttis is a premium responsive theme that comes with full support and a markup that’s ready for use in Mailchimp.

See more here

Mailfusion

mailfusion responsive email template

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.

See demo

Goodmail

goodmailGoodmail 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.

See more and test the template builder

Antworth

Antworth responsie email builder

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.

See more

CampaignMonitor template builder

Market - free responsive email

CampaignMonitor template builder is a free responsive email builder from Campaign Monitor where you can build html mails in a few minutes.

See more

Business mail

business mail email template

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.

See more

Sendy

sendy responsive email template

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.

See demo

Boxline

boxline premium responsive email template

See more

Saturday

saturday

This premium email template is great for shops that want to upgrade their newsletter and present their products in a responsive email.

See more

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

One Reply to Create beautiful and modern emails with responsive design

  1. manelgarcia says:

    Are those templates responsive by using media quieries or how does it work?

    Nice read though!

Comments are now closed for this article.