In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.
Media Queries: Only Half the Solution
There was a time when media queries were quite enough to get responsive emails working in iOS and Android mail applications, both of which support media queries.
Since then, there has been a proliferation of mail applications created for both iOS and Android platforms, with varying degrees of support for responsive email development methods.
Most notable is the latest update to the Gmail app for Android, which is twice as popular as the default mail app for Android users (which now comprise 11% of total opens). It has never supported media queries, and still doesn't, however it now scales down your emails by compressing the size of the outer table to fit within the viewable area of the screen. It's difficult to control and, when your entire email relies on media queries to display properly on mobile, generates some very unpleasant results.
Why Fluid Is the New Black
The good news is that you can design and build an email that will look excellent in every mail app, including those that don't support media queries. You can do this by using a fluid layout.
There are, however, a few design compromises that you have to make. Those lovely equal column layouts that stack to a single column don't work so well using this method. If you can learn to live without them, there are some very functional designs that can work extremely well.
Here's what we'll be creating today:
Getting Started
Ok, let's start off with our blank canvas.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>A Simple Responsive HTML Email</title> <style type="text/css"> body {margin: 0; padding: 0; min-width: 100%!important;} .content {width: 100%; max-width: 600px;} </style> </head> <body yahoo bgcolor="#f6f8f1"> <table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> Hello! </td> </tr> </table> </td> </tr> </table> </body></html> |
What we are creating here is our basic page with its
header, doctype and container table with a background colour applied (to both the body and a big wrapper table, since styling of the body tag isn't fully supported). For more information on this basic setup, see Build an HTML Email Template from Scratch.
I've then added our main content table to the centre with a class of 'content'.
Pay Attention
Note: You will notice that in this tutorial I'm going to be placing CSS in the head of our document. I generally place styles in the head when I am going to re-use them, and keep one-off styles inline.
Important: Whenever you use CSS rules in the head of your document, you mustuse a tool to bring it all inline at the end of the process. If you use a service such asMailChimp or Campaign Monitor, they will automatically offer to bring your styles inline for you when you import your design. You must do this because the some clients, such as Gmail, will ignore or strip out your
<style> tag contents, or ignore them. You can also use a tool such as Premailer to bring your CSS inline. If you use Premailer or a similar tool, remember to take out your media queries before processing (since we want them to remain intact), then re-insert them at the end. MailChimp and Campaign Monitor automatically take care of this for you.Hiding Mobile Styles From Yahoo!
You will notice that the body tag has an extra attribute. Yahoo Mail loves to interpret your media queries as gospel, so to prevent this, you need to use attribute selectors. I find the easiest way to do this (as suggested by Email on Acid) is to simply add an arbitrary attribute to the body tag. I use the suggested 'yahoo' but it could be anything you like:
1
| <body yahoo> |
You can then target specific classes by using the attribute selector for your body tag in the CSS.
1
| body[yahoo] .class {} |
Two Tricks to Master the Fluid Method
As you can see, our 'content' table is set to be 100% wide so that it will be fluid and take up the full width of smartphone and tablet screens. We'll also set a maximum width of 600px to avoid the email taking up the the entire screen on bigger devices.
There are now two slightly tricky things that we need to address to ensure that everything displays as planned across all email clients. These two fixes are thanks toTina Ye's excellent tutorial on this method which is available over at FogCreek Blog.
1. Overcoming the Lack of Max-Width Support
Unfortunately,
max-width is not supported by all email clients. In order to get our email to display properly in Outlook and Lotus Notes 8 & 8.5, we need to wrap each table in some conditional code which creates a table with a set width to hold everything in. It targets IE (which is the rendering engine used by Lotus Notes) and Microsoft Outlook.
We'll wrap our table in some conditional code:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
| <!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> Hello! </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr></table><![endif]--> |
2. A Fix for Apple Mail
Weirdly, Apple Mail (normally a very progressive email client) doesn't support the max-width property either. It does support media queries though, so we can add one that tells it to set a width on our 'content' class table, as long as the viewport can display the whole 600px.
1
2
3
4
5
| <style type="text/css">@media only screen and (min-device-width: 601px) {.content {width: 600px !important;}}</style> |
Creating the Header
Now we'll add the first row of our table — the header. Add the following to style to the row that we already created:
1
2
3
| <td class="header" bgcolor="#c7d8a7">Hello!</td> |
And then in your CSS, add the padding for the header:
1
| .header {padding: 40px 30px 20px 30px;} |
Adding the First Responsive Row
Now we are going to create our very first responsive row. The way we do this is to create two tables that 'float' next to each other by using the 'align' HTML property.
Left Column
Replace our little "Hello!" Greeting with the following:
1
2
3
4
5
6
7
| <table width="70" align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="70" style="padding: 0 20px 20px 0;"> <img src="images/icon.gif" width="70" height="70" border="0" alt="" / > </td> </tr></table> |
We create our 70px table and also add some padding which will act as our gutter between the two columns. The padding on the bottom will add vertical breathing room when the two columns stack on mobile.
Right Column
We'll create the right column by again aligning a table to the left. This table is going to be 445px wide, which will leave us 25px to spare on the right hand side. This very is important because Outlook will automatically stack your tables if there isn't at least 25px to spare on any given row.
As long as you allow at least 25px of breathing room, your tables will behave as expected.
0 comments:
Post a Comment