(Re-post from my blog archives)
This blog post covers some of the tips and tricks I’ve picked up when building responsive emails.
Before you start
This guide won’t teach you HTML and CSS from scratch. If you don’t know enough about them to build a static web page, you should go and learn how to do just that.
Step 1: Build the basic HTML
The first thing you need to do is write the HTML for your email.
I strongly encourage you to start this process with a totally blank text file. You could start with someone else’s template, but I always find it easier to learn a new skill when starting from scratch.
Don’t worry about coding for mobile just yet. Just get the layout to look as you want it to on desktop. Pick your favourite text editor (I recommend PhpStorm / WebStorm, or SublimeText), and start coding. Open the file in your web browser so you can see how the page looks as you build it.
A couple of quick tips that may help:
- If you’re using images that will always be the same size, use Placehold.it to display placeholders while you’re writing the initial code so you don’t have to worry about using real images. This also makes it harder to miss editing out the placeholder images in future (sometimes, dummy images get left in a template if they look like the real thing).
- Comment liberally. Add opening and closing comment tags for every table cell so you remember what goes where. This will help a lot with future editing.
Now for some conventions you should follow to ensure maximum compatibility across email clients (this list is a good starting point, but it’s probably not exhaustive):
Doctype, HTML version and self-closing tags
Include an HTML doctype at the top of the file or Chrome won’t parse the email correctly. For instance:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Stick to HTML4 tags – don’t use HTML5.
Avoid using self-closing XHTML/XML-style tags. For instance, a line break should look like this:
<br>
Not this:
<br />
Tags, layout and styles
Don’t use p tags or headers (h1, h2, h3 etc). Apply inline styles to table cells and use <br><br> for double line breaks.
Use tables, not divs.
Use inline styles, rather than IDs or classes with styles in the header.
Use six-character hex codes, not three character codes. E.g. #00ff00 rather than #0f0
For links, use inline styles even if you just want to make them blue.
Fonts
Style every table cell with appropriate text formatting, otherwise it will revert back to the default font. Look out for this when you send yourself a test email, and fix the issues before sending the final email.
Use px for font size.
Line height works pretty well if you need it.
Don’t use webfonts – Outlook will display them in Times New Roman regardless of any fallbacks you set.
Images
Add display: block to every image or you may get gaps between them in some clients.
Use width and height attributes (not inline styles) for all images. E.g.
<img src=”image.jpg” height=”100″ width=”100″ alt=”Giraffe”>
Tables
Always set the width of a table, even when building tables within tables. If you don’t set the width to 100%, it will change size depending on the content within it.
Use width and height attributes (not inline styles) for all table cells.
Colspan can be used, but rowspan is unpredictable.
Don’t use CSS margins or padding in tables. Cellpadding is ok. Use spacer GIFs instead, and set the width and height of the cell to the amount of space you wish to use. E.g.
<td class=”hide” width=”20″ height=”1″>
Hotmail has issues with margins.
If you’re laying out multiple sections within the same column, it’s best to put each section in its own table rather than trying to style p tags. You then style the table cell. For instance, an article with a header and then body text might have one table for the header and one table for the body text. If the text style is the only thing that’s different and you don’t need any extra spacing or colours, for instance, you could just style a span tag.
Step 2: Start adding classes
There are a few CSS classes you should include.
Choose a named class for your template. E.g. for City A.M. I used body class=”cityam”. You’ll need this for a Yahoo fix later on.
Add a class to the table wrapper too. E.g. table class=”wrapper”.
For mobile users, note the use of columns. If you have a two-column layout and you want to show this as a single column on mobile, add a column class to each of the column tags. E.g. td class=”column”
You should also identify anything that needs to be hidden on mobile. If you have used spacer cells in your tables, make sure you hide all of these on mobile. For now, just do this: td class=”hide”
Step 3: Add the style tag
We now need to add a style tag to the header of your email template. Between the <head> and </head> tags, add the following code:
<style type=”text/css”>
/* Hotmail fix */
.ExternalClass * {line-height: 100%;}/* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
body {-webkit-text-size-adjust: none; -ms-text-size-adjust: none;}/* Custom styles go below this line */
</style>
The comments should explain what these are for. There are other fixes you can add, but these are the main ones you are likely to need.
Step 4: Add responsive styles
Finally, you can add your responsive styles. These go beneath the “Custom styles go below this line” comment in the style tag you added in step 3.
/* Need to target body class cityam to avoid Yahoo rendering the styles */
@media only screen and (max-width: 800px) {
body[class=cityam] .wrapper {width: 320px !important; margin: 0 auto;}
body[class=cityam] .column {float: left; width: 320px !important;}
body[class=cityam] .column img {max-width: 320px; height: auto;}
body[class=cityam] .hide {display: none !important;}
}
Change cityam to the named class you added to the body tag in step 2.
Basically the above code will target screens with a width of 800px or below. The styles will then kick in. The wrapper and columns are now only 320px wide. Images in the columns will be forced to have a maximum width of 320px. Anything with a class of “hide” will disappear.
You can add more styles here if you wish.
Summary
This is not an exhaustive guide, but perhaps it might be useful to someone out there. Let me know if you found it useful!
