I’ve been having a look at the current best practice for the design and coding standards of HTML email newsletters. I thought I’d turn my key findings into a brief check list to act as a prompt and link to some very useful resources.
The key thing to understand when designing email newsletters is that most email clients take a rather archaic approach to rendering modern web standards. This means that the best advice is to keep it simple and tend towards the lowest common denominator in coding standards.
Use tables for layout
Using DIV tags and CSS for layout in an email is unlikely to work consistently so the best approach is to “code like it’s 1999” and use tables for layout. So nest multiple tables inside each other and set padding and margins using empty table cells.
One tip is to set the width in each table cell and not to rely on setting the width in the table tag.
I like the suggestion of using one container table to set the width and background colour of the newsletter and then nesting within it separate tables for the header, body and footer.
Set a maximum width of 600px
Emails are usually shown in environments where the screen space is limited, often they are displayed in the preview pane of an email program, so the width of the newsletter should be limited. Most of the advice seems to be that 600px works best as a maximum size.
There is the issue of taking account the display in mobile being less than this, and the transfer of some responsive web design techniques into email newsletters to cope with this, but I reckon that if you keep the design simple mobile devices should cope reasonably well.
Even so a good tip is to ensure that your important content is placed on the left side of the email towards the top.
Use pixel units to define your sizes
Widths and font sizes should be defined in pixels. Support for percentages and other units is patchy.
Use inline CSS
Except for layout, as discussed above, do use CSS for styling but again it is best to aim for the lowest common denominator. It may be useful to check the support for the CSS properties your are using.
Always move your CSS inline. Once you’ve completed your design, you will need to go through and add inline styles to your elements – although some email services help you with this.
Also avoid using shorthand for fonts and hex notation. Hex colors such as
#ccc should be written in full as
With paragraph alignment you should set the margin inline via CSS for every paragraph in your email. Do not use the
float property in CSS instead use the
align tag in the HTML.
Take care with the design of links
It seems that some email clients will overwrite your link colours with their defaults. To avoid this you should set a default colour for each link inline then also again set the colour using a redundant
span tag inside the
Users will expect your links to open in a new tab or window so include the
target="_blank" attribute in each link.
Be careful with images
Don’t assume that images will be viewed. In many of the major email clients, your images will not be shown by default.
So always include good alt text for every image. Specify height and width for images to ensure that the blank placeholders don’t throw your design off.
Also don’t rely on background images – use blocks of colour instead.
Finally, avoid using PNGs, they don’t get displayed in Lotus Notes, so stick to using use GIF and JPEG.
Include a plain text version of your email and/or a prominent text-based link to a Web version of your newsletter.
I think my biggest conclusion from all this is to do yourself a favour and use a pre-existing template. If you are using a third party service to send your newsletters, such as MailChimp and the like, then they will have a range of existing templates for you to use and adapt.
- MailChimp Email Template Reference
- MailChimp Email Blueprints (on GitHub)
- Campaign Monitor – Resources