Tips to write HTML Emails that I’ve found. Note this post can be bsolete as email readers are constantly changing and evolving.
Background images
It is just not possible to add an image as a background at the moment. While most readers will accept it Outlook Office seems to have issues and Hotmail/LiveMSN just doesn’t support it. So unless you don’t mind some of your users not getting the image at all this doesn’t look like a good idea.
As a tip: None of the big companies I checked use background images on their emails, this included Amazon, Google, Ebay, HSBC, Channel4, BBC, … that should give you a hint.
Solutions
You can use plain colors on the background using a table’s BGColor property and the CSS property. Instead of using background images, use real image elements. To make it as “part of the background” you can always create some design with a visual effect that makes an image fuse with the background in a cool way. More job for the designers this time!!
Background color
Looks like Internet Explorer doesn’t like the property bgcolor, and others like GMail Android App only accept the bgcolor property on a cell.
Solution
To make sure your color is there:
- Add the HTML property bgcolor to the cell for GMail App compatibility (IE adds black background)
- Add the CSS property too (Outlook 2013 and IE prefer it this way)
Internet Explorer can also be a bit tricky setting a black background when you try to use bgcolor without a CSS background style, so make sure you use the CSS one too!! Example:
<table>
<tr>
<!-- Logo -->
<td bgcolor="#00a8e2" style="background:#00a8e2;">
Blah, blah, blah
</td>
</tr>
</table>
Using all the width (width:100%)
Looks like most email readers have 4 ways to accept this being set apart of GMail’s Android App, which only accepts it setting the HTML property width with the value in pixels on the cell. To check browsers compatibility on this I decided to make a survey using 6 methods to achieve my goal:
Method 1: Set HTML property width with the value as a percentage (width=”100%”)
Method 2: Same but applied to the cell.
Method 3: Set HTML property width with the value in pixels (width=”600″)
Method 4: Same but applied to the cell.
Method 5: Set CSS property (style=”width:100%;”)
Method 6: Same but applied to the cell.
Method 7: Set CSS property in pixels (style=”width:600px;”).
Method 8: Same but applied to the cell.
And this is what I got:
| Reader | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|---|
| Apple Mail 7-8 | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Outlook 2011-16 | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Outlook 2013 | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✗ |
| Gmail App | ✗ | ✗ | ✗ | ✔ | ✗ | ✗ | ✗ | ✔ |
| Android 4.2 | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Android 2.3 | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| iPad | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| iPad mini | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| iPhone 5s iOs7 | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| iPhone 5s iOs8 | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| iPhone 6 | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| iPhone 6 plus | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| GMail (IE) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| GMail (Chrome) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| GMail (FF) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Outlook (IE) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Outlook (Chrome) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Outlook (FF) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Yahoo (IE) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Yahoo (Chrome) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
| Yahoo (FF) | ✔ | ✗ | ✔ | ✔ | ✔ | ✗ | ✔ | ✔ |
Solution
So looks like most of them accept 6 ways of doing it without problems except for GMail’s Android App and Outlook 2013’s aberration, which only agree on the forth method. This causes trouble on making the template flexible and responsive but it all depends on if you want to add too many widths and if GMail’s App/Outlook13 are relevant to your business or not. In any case, this is the most compatible way:
<table>
<tr>
<td width="600">Blah, blah. Width set on the cell in pixels.</td>
</tr>
</table>
Of course, that means you need to know how much width you have, but I have no problems using 600 as the max width for our emails.
Space gap below images
As email readers get closer to standards they have started considering images “inline” elements which means they are expected to have a default margin below them to allow some space for text (as some letters need to paint below the bottom, like “j” or “q”).
Solutions
To avoid this happening you can try several solutions, one of the quickest ones is to set “display:block” on the image element, if your image doesn’t need to behave as an inline element that saves the day.
Another is to set the “line-height:0” to its parent container, if there is no text in the same container that will get rid of the margin easily.
