We produce a fair few HTML emails here as part of our production process and our DigitalMill volume service, so it’s fair to say we know a thing or two about making them work in as many email clients as possible. Some are much more difficult than others, and we’ve found that the worst culprit is Lotus notes 6.5/7. It has very little support for CSS and tends to ignore a lot of HTML attributes such as heights or widths.
Second up is Outlook, which even with the latest version still uses Word as its HTML rendering engine; hindering design and quality, and producing a number of inconveniences for us. Those two clients aside; here’s a run-down of our top things to remember when designing and building:
- No frills: Remember this isn’t a web site, or anything like the basic Internet; you are designing for HTML4 and it needs to be table-based. So keep it simple, and keep it ugly.
- No borders: Borders around the whole email via either CSS or cell backgrounds often break in clients, so it’s just simpler to go with a header-content-footer approach.
- No changes: Don’t change the line height on text; the design may look nicer with different leading or font spacing, but let’s face it; it will probably only work in one client.
- No overlapping: Don’t overlap any background images with text; make all text on a solid colour (or color!) background.
- Stay safe: Use web-safe fonts, for body copy; Arial is usually the best font to work with as it’s readable, looks pleasant and is widely compatible.
- Forget what you know about making a structured document.
- Forget 90% of CSS best practises; they won’t work.
- Remember to put border=”0″ and style=”display:block;” on all of your images.
- Use the correct HTML codes for special characters e.g. use £ instead of £.
- Most new email clients will have a preview that blocks external images; therefore ALT tags are a must for images, and on image links – a title tag will always help.
- Don’t use <p> tags around content, nearly all the email clients render the margin and padding differently, so it’s best to avoid this altogether rather than trying to counter with inline CSS.
- Font tags can have similar effects to the P tag mentioned above; using spans with in-line styles seems to give the most compatible results without creating a messy HTML code.
- Don’t use rows or colspans; nesting tables are the simplest (and easiest to debug) when laying out content.
Once you’ve done all this, don’t forget the simplest rule: test, and test again. Cross browser testing along with a decent service like http://www.emailonacid.com/ means that you can cover most bases and check your emails in the most popular clients, making sure your hard work doesn’t go to waste, and the audience sees what they should.