In Design, Web Development by Jonathon Symons

How to Build Responsive HTML Emails

Sadly, Jan who has been working with us for the past few months will be heading home to the Czech Republic at the end of this week. But before he leaves us, we have managed to persuade him to write us another of his wonderful blog posts. This time Jan shares some of his expertise on developing responsive HTML email templates. Enjoy!

Nowadays, every company, that is seriously thinking about implementing an internet marketing strategy should be considering email.

Emails can communicate event information, news about new products and about your company direct to your clients.  Email campaigns are built on HTML emails, which can be sent out regularly or occasionally depending on your strategy. Statistics say that more than 50% of e-mails are now first opened on a mobile device and this alone is a good reason why you should make your HTML emails responsive. I would like in today’s article to say something about the building of responsive emails and mention some of my experiences of doing this. In this article I will not deal with the general guidelines for creating a HTML emails. There is a lot of information and articles about this theme on the internet. I will focus mainly on the information about responsive HTML email building. I would especially like to mention some of the experiences from practice. Responsive Email Template

What to remember when creating emails

This is only a short summary of what we have to remember while building HTML emails.

  • We must use a table layout.
  • We can’t use external CSS.
  • We can’t use some of the CSS properties, we use generally older versions of HTML and CSS.
  • We don’t use CSS property margin and border. If we need make border- color, we use a table with a width 1px and with a color background.
  • We don’t use PHP and JavaScript.
  • All pictures and images used in the newsletter must be saved somewhere on the server, we need to have them online so we can paste the URL of the pictures into our source code.

Generally, we can say that the encoding of newsletters is not so complicated. Graphical design of the newsletter is often very simple and if we designed a website with the same simple appearance of an email, it would be done quickly. Especially, as the browsers are improving with better and better support for modern technologies. But today we write about HTML emails, and newsletters need to be optimized for e-mail clients. We have many email clients and many different devices so we have to optimize emails for most of them. Some email clients have horrible support of the necessary technologies. Creating HTML email in Notepad and checking it in a browser is not problem, the problem is optimizing email for all email clients. We need usually to spend a few days testing the email until it’s correct. We must reckon with a lot of compromises and a lot of troubles, some which have only a difficult solution and some which are without a solution.

How to Get Started With Responsive HTML Emails

We build the basic structure of an email in the same way as we would do with unresponsive emails. We create a table layout with main table and a lot of nested tables and we build an appearance of the email step by step with inline CSS and HTML. There is one very important thing at this stage of email template development. We give most of the widths of the table layout in percentages and not in pixels. In some cases can we afford to give the width in pixels, for example in the situation where we create a space using cells. If we have created designs for the emails in editor, it’s right time for responsive design creations. First we must add  the responsive meta tag into head section of website between the head tags.

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />

 

Settings of Width for Desktops

In next step we must determine the width of the e-mail for all email clients. It’s very important and a little complicated. The normal maximum width (for desktop) is 600px for responsive emails. The main table, that underlies the structure of responsive email design, may look like this HTML table.

<table border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” style=”max-width:  600px; width: 100%; height: auto;” > <tbody> <tr> <td> /* content */ </td> </tr> </tbody> </table>

We insert the following CSS code between head tags.

<style> .content {

max-width: 600px!important;

} @media only screen and (min-device-width: 599px) {

.content {width: 600px !important; height: auto;

}

} </style>

This code will ensure that we have maximum table width 600px for most the email clients and main table will be prepare for mobile devices. Inline CSS will ensure this width for modern email clients like e.g. Gmail, Yahoo! Mail or Thunderbird and many others. Table will be fluid with a maximum width 600px. The fluid table is very important for mobile email clients without media queries support. We can also ensure it works by inserting class .content with CSS property max-width: 600px!important into internal styles in the head section of an HTML page. Special situation is for Apple Mail. This email client doesn’t support CSS property max-width. Fortunately it can be solved. We use a special type of media queries. Media only screen and min-device-width works only for Apple devices.

@media only screen and (min-device-width: 599px) {

.content {width: 600px !important; height: auto;

}

}

For Apple desktop devices we can give fixed width 600px, because Apple supports media queries. We don’t need fluid tables, because we can make a mobile version for iPhone and iPad using media queries. Now we have optimized the main table for email clients Apple Mail, Outlook 2000/2002/2003, Outlook 2011, Thunderbird, AOL Mail, Gmail, Yahoo! Mail, Outlook.com. But we have still problems with the width of the table in Outlook 2007, Outlook 2010, Outlook 2013 and in Lotus Notes. These email clients don’t support CSS property max-width and some other properties and so the width of the main table in these clients will still be 100%. We have to covert our current code for the main table into hack code for Outlook 2007 – Outlook 2010 and Lotus Notes and we give a fixed width of 600px in HTML. It looks like this:

<!–[if (gte mso 9)|(IE)]> <table width=”600″ border=”0” cellpadding=”0″ cellspacing=”0″ align=”center”> <tbody> <tr> <![endif]–>   <table border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” style=”max-width:  600px; width: 100%; height: auto;” > <tbody> <tr> <td> /* content */ </td> </tr> </tbody> </table>   <!–[if (gte mso 9)|(IE)]> </tr> </tbody> </table> <![endif]–>

We used conditional comments for Outlook and write in this comment, that table will 600px wide for Outlook email client version 9 (Outlook 2000) and later. More about conditional comments will be in text below. Now is the table 600px wide for all most used email clients on desktops and now we can solve other things.

Structure of Email

We divide the main table on the rows and cells and into cells we insert other tables. We give the width of the cells in the percent as needed or we combine the width in percent in inline CSS and in pixels in HTML. The width of each box in design we adjust by entering the cell width in <td> tag, width of the insert tables is usually 100%. One row from the table might look like this:

<tr><td width=”20%” style=”width: 20%”></td> <td> <table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%” style=”width: 100″> <tbody> <tr><td> <table border=”0″ cellpadding=”6″ cellspacing=”0″> <tbody> <tr><td></td> </tr> </tbody> </table></td> </tr> </tbody> </table> </td> <td width=”20%” style=”width: 20%”></td> </tr>

 

Content Optimization HTML email

If you need to insert a text box into the content of the newsletter, it’s difficult. You choose the appropriate table cell and insert the code, which can look like this, between <td> and </td> tags.

<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”  style=”width: 100%;” > <tbody> <tr> <td width=”10″ style=”width: 10px;”>&nbsp; &nbsp;</td> <td align=”left” valign=”top”> <p style=”line-height: 18px; padding : 0px; “> <span style=”font-size: 12px; color: #111111; font-family: Arial;”  color=”#111111″> Etiam in ultricies magna. Suspendisse potenti. Integer varius lobortis ante non iaculis. Ut tempor magna convallis sapien auctor, non egestas quam pellentesque. Phasellus tristique mollis quam, non tincidunt dui facilisis ut. </span> </p> </td> <td width=”10″ style=”width: 10px;”>&nbsp; &nbsp;</td> </tr> </tbody> </table>

We make style of text in HTML and inline CSS and we duplicate some properties in both. It gives us the chance that it displays well in all email clients. We use always table properties border=”0″ cellpadding=”0″ cellspacing=”0″ for reset to the default properties and property width=”100%”  and style=”width: 100%;” for use of the full space. If we would like to insert images, it’s even more complicated and we will have a lot to do with testing. Below is an example how to a table cell with a photo in it would look in responsive in HTML emails. Width of the table cell is fixed with style=”width: 210px;” and width=”210px”. We make picture width fixed for older email clients without support of max-width by inserting code width=”210″ and we make the picture fluid for modern mobile email clients with code style=”height: auto;  width: 100%; max-width: 210px;” . This solution works for most email clients, except Apple Mail on devices with higher resolution. We will add class to the picture e.g with name fix-apple for

<td style=”width: 210px;” width=”210px”> <img src=”http://www.cloudspotting.co.uk/assets/img/email/save-the/bear.jpg” width=”210″ style=”height: auto;  width: 100%; max-width: 210px;” /> </td>

We make fixed width for Apple Mail and for iOS Devices email clients. Width for smartphones

@media only screen and (min-device-width: 481px) { tbody[yahoo] .fix-apple { width: 210px!important; height: 124px!important; } }

Width for tablets and desktops

@media only screen and (max-device-width: 480px) { tbody[yahoo] .fix-apple { width: 110px!important; height: 65px!important; } }

Note We must be careful with Yahoo!  Mail property. Yahoo! Mail can‘t see media queries and takes the code contained in media queries as a standard code. This can be a problem. To resolve this, we add to the the body tag or to the tbody tag (in the parent table) word yahoo. It looks like <body yahoo> or <tbody yahoo>. In the next step we insert body [yahoo] or tbody [yahoo] before CSS property in media queries. This indicates that this property isn’t applied to Yahoo! Mail.

Conditional Comments

We can also use CSS conditional comments for HTML emails. With conditional comments we can write special source code only for the selected email clients. We use usually conditional comment for all versions of Outlook except Outlook 2011. These conditional comments also apply to Lotus Notes. We can also use special code only for Apple Mail, Outlook 2011 and iOS Devices and we can disable some code for Yahoo! Mail.

Conditional Comments for Outlook

We can choose whether we want a conditional comment for one particular version or multiple versions. Individual versions of Outlook are denoted by numbers. (Version 2011 is a different case, conditional comments don’t apply here.)

  • Outlook 2000 –  9
  • Outlook 2002 – 10
  • Outlook 2003 – 11
  • Outlook 2007 – 12
  • Outlook 2010 – 13
  • Outlook 2013 – 14
  • To use the code for one version and any later versions – we use in conditional comment shortcut gte.
  • To use the code for all newer versions than is indicated version – we use in conditional comment shortcut gt.
  • To use the code for one version and any older versions – we use in conditional comment shortcut lte.
  • To use the code for all older versions than is indicated version – we use in conditional comment shortcut lt.

This is code for Outlook 2000 and latest versions.

<style> <!–[if (gte mso 9)|(IE)]> .outlook-content  { width: 600px!important; } <![endif]–> </style>

We can change in this code version number (9) and the specification of the version to which the code is related (gte). Special Code Only for Apple Mail & Outlook 2011 & iOS Devices If we insert into head section of website between <style> tags this media queries: @media only screen and with property min-device-width (or max-device-width).  This code included in media queries will function only for Apple devices.

@media only screen and (max-device-width: 599px) { .left-box {width: 300px; } }

Disabling Code only For Yahoo Mail Yahoo! Mail ignores media queries and we can have troubles with this property of Yahoo! email client. If we need to disable some CSS property from style e.g. from media queries, we insert body [yahoo] or tbody [yahoo] before CSS property

tbody[yahoo] .left-box { display: none;} And we insert word yahoo into tbody (or body tag) <table > <tbody yahoo> <tr> <td> /* content */ </td> </tr> </tbody> </table>

The Specifics of Most Used Email Clients

Lotus Notes Lotus Notes doesn’t support a lot of important technologies. Older versions don’t support inline CSS and images in PNG file. Newer versions behave similarly to older versions of Outlook.  It’s possible to optimize email for new version. For optimization of Lotus Notes the same conditional comments can be used, just like for Outlook. It isn’t a much used email client, so maybe it isn’t profitable to optimize a responsive newsletter for Lotus Notes. Outlook 2000/2002/2003 In these versions of Outlook we can use CSS, support is quite good. We can use CSS inline and in the head section. We can also use conditional comments. Outlook 2007/2010/2013 The day Microsoft began selling Microsoft Office 2007 with Outlook 2007 was a black day for all email developers. With release of Outlook 2007 developers are returned back to prehistoric time of emails development. This email client doesn’t support most of CSS properties. We can use style sheet in head section but we haven’t a lot of CSS properties to choose. We can also use conditional comments but with same problem – we haven’t a lot of supported CSS properties. We have to make all styles with HTML. It’s quite hard to optimize responsive newsletters for Outlook 2007. Outlook 2010 and 2013 have same mistakes. Outlook 2011 Outlook 2011 is Outlook for Mac and works really good. We can use media queries and a lot of CSS properties. This email client works very similar like Apple Mail. We can have trouble only with CSS property max-width. About solving max-width I wrote in the introduction text. Apple Mail About Apple Mail we can say same things as about Outlook 2011. If we optimize HTML email for Apple Mail, it will probably work also for Outlook 2011. We can use something like special source code only for Apple Mail. I wrote about this in Conditional Comments section Thunderbird Thunderbird is a well-functioning email client. Don’t worry about optimization. Optimize for Outlook and Thunderbird will definitely look good. Yahoo! Mail Yahoo! Mail is a quite good email client with wide support of CSS. One defect of this email client is that it ignores media queries and takes only style from media queries. I wrote more about this and about solutions upstairs in articles. Gmail Gmail removes the head portion, so we can’t use style sheet between <head> and </head> tags. But support of inline CSS is very good, Gmail support most of the CSS properties and so we can easily do style for this email client. Outlook.com Outlook.com is modern web-based email client and works acceptably. Outlook.com and desktop Outlook versions are connected just with the name, Outlook.com works fortunately much better. Outlook.com has some specifics. You can find list of specifics here: http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook.com Android Android Email app is really good mobile email client. Android Email supports style sheet in head section of website including media queries and support also most of CSS properties. Gmail for Android Gmail for Android is good email client, but there is one big mistake. This email client doesn’t support media queries and it’s a big problem, because Gmail is also mobile email client. This is the reason why we build fluid HTML emails and not only responsive – to adapt on the different resolution of smartphones without the support media queries. Reason why mobile Gmail doesn’t support media queries is that the entire head section of website is cut off by email client, so we can’t use CSS in this section. This is a big limit for developers and they can’t make so great emails. We must use inline CSS. Support for CSS is otherwise good. iOS Devices Devices with iOS work perfect without big troubles. On these devices is support for media queries and so we can create a great responsive HTML emails. Support for CSS properties is almost 100%. Older versions (and still are used) of iOS didn’t support CSS property max-width. You may have problems with one thing in your iPhone emails. If you use in your HTML email some phone numbers, iOS makes sometimes this phone numbers blue and underline. It doesn’t look nice. You can change it, if you insert line below between <style> and </style> into head section of website.

a[href^=tel]{ color:#ffffff; text-decoration:none;}

BlackBerry OS Older versions of BlackBerry don’t support HTML, so it’s impossible to do HTML emails for BlackBerry. The newer version support HTML, but I hadn’t opportunity to test them. Windows Phone Windows Phone supports media queries (the newer version) and because it’s relatively new OS and because Microsoft supports upgrading of systems, so most users use the latest version. Make your design for iPhone and Android and Windows Phone will look good

All You Need Is Litmus and MailChimp

The most important thing when we create responsive HTML emails is testing. With testing we spend most of our time. I use more tools for testing of responsive HTML emails. In my opinion is best tool Litmus. Most email services offer testing only form of sending test email. Litmus is different. Litmus shows your result on all most used email clients on three click (and after five minutes of waiting). Litmus Email Litmus works without registration, you need only insert your email address and you can test. It works very simple you just insert your email, insert your source code from editor and click on Show me my Free Previews. And in five minute you see your email in many email clients and in many devices. Litmus displays emails like pictures in different devices and clients. Litmus Email Testing You can test email more times but after several tests the Litmus prompts you to register and testing stops working. Fortunately, there is way how to do more testing. You can delete history and cookies in your browser and Litmus testing works again. If that doesn’t work, you need only change browser and you can testing again. And next day, you can testing again in your prefer browser. The biggest advantage Litmus is a chance to see emails in all necessary devices and email clients. In Litmus you can currently test the following clients: Apple Mail 6, Lotus Notes 6.5/7/8/8.5, Outlook 2000/2003/2007/2010/2011/2013, Thunderbird latest, Android 2.3/4.2, Gmail App, BlackBerry 4 OS/5 OS, iPhone 4s/5s/5, iPad Mini, iPad Retina, Windows Phone 8, AOL Mail (in IE, Chrome, Firefox), Gmail (in IE, Chrome, Firefox) and Yahoo! Mail (in IE, Firefox). Litmus hasn’t only advantages. The biggest disadvantage is the long duration of the test (usually 5 to 10 min).  Sometimes it is necessary to test every change which you make. It takes a very long time. This is why I recommend combine Litmus with other tools. I personally use Litmus in combination with MailChimp. MailChimp is great tool for quickly testing.  First, I need to have an account on Mailchimp, then I insert source code of email to Litmus editor and I can send test emails to my email accounts. In MailChimp Editor I can also create HTML emails and I can see now the result on the left side of the page. For testing in MailChimp we need have email accounts in different email clients and we can send test emails from MailChimp to our emails. Mailchimp Email I think, it’s very useful to have an account on Gmail.com, Outlook.com and Yahoo.com. And very useful is install desktop email client Outlook on our desktop. Installing a version of 2007/20010/2013 to our desktop makes our work easier. Outlook is very problematically and if we can make quickly testing with MailChimp, we save a lot of time. Trust me. So if we use the MailChimp and Litmus, we can quickly test desktop Outlook and some of the web-based email clients in the MailChimp and all other devices in the Litmus.   Note Be careful to WYSIWYG editor, which is part of some email services. Sometimes during converting HTML to email in editor occurs to change appearance of email. I recommend testing emails during development also in the service, which you use to sending emails.

Most Popular Email Clients

Whenever I’m starting create a responsive email template, I check first current top email clients. Information, where people usually open emails is very good for the identified of our priorities. There is is a lot of resources of email client popularity on the internet. We can find that some of email clients use only 0.05% of people and it’s not profitable to optimize HTML email for this email client. The great resource of information about email client market share makes Litmus: http://emailclientmarketshare.com/

Some Advice in the End

When you have trouble with formatting make you sure that you have in your table a value of zero for cellpadding, cellspacing  and border and that you have width=”100%” in your table (except main table).

  • Feel free to use !important in your CSS.
  • Duplicate the same properties in inline CSS and in HTML.
  • Read the Litmus and the MailChimp blog.

Be really very patient, each developer of responsive email template is often desperate.

Share this Post

Want great digital content? Join our mailing list today!

* indicates required