From a purely technical point of view, HTML based emails can be a nightmare to get right. I have had experience of this recently when I was given the task of designing an HTML email that was to be sent to students within the university.

Being a web designer it was natural instinct for me to design the HTML email using CSS. I designed a really simple light weight template using a couple of images and a grey background. The next step was to test this template across a variety of popular email clients and to my glee the template worked well across most of the email clients including Google, Outlook 2003, Yahoo and LiveMail. It wasn’t perfect as the background colour was lost on all the email clients except Outlook, but it didn’t really matter as the template still did its job well.

This is when it struck me that the default email client used by the students would be Outlook Web Access. So did a quick template check on it and to my utter disbelief the template had lost all its CSS styling. I tried different techniques on the template including using internal CSS and inline CSS but nothing seemed to work. This was a major issue as 98% of students would be using Outlook Web Access and if I didn’t get this right, it would be the same as sending a pure text email.

There was little I could do with my current template as it was clear that Microsoft have provided very little to no support for CSS in Outlook Web Access. So it was back to the drawing board and I decided to discard everything I learnt about web standards and web design and go back to designing a template purely using HTML and no CSS styling. Back to the caveman era thanks to Microsoft. The re-designed template worked like a charm in Outlook Web Access and to my surprise in most of the other major email clients except Yahoo Mail where the spacing between paragraphs was lost.

Designing a template purely using HTML and no CSS styling. Back to the caveman era thanks to Microsoft.

I checked a few HTML emails sent by major organisations such as Amazon, Tiscali e.t.c and found that their templates were also flawed on Outlook Web Access.

Below are a few pointers that you may find useful when designing your own HTML emails –

1. HTML email template layout designed using tables rather than divs seem to be better supported by email clients.
2. Avoid using background images as many of the email clients don’t display them
3. If using styles, inline styles are the way to go, though if correct display on Outlook Web Access is important to you then don’t use CSS styles just stick to designing using HTML.
4. Do not use images to highlight important content as images are switched off by default on major email clients.
5. For the same reason as above ensure all images have ALT text.

Happy Designing….

Useful Links –

A Guide to CSS support in Email by Campaign Monitor

Woes of Designing for Outlook 2007 by Campaign Monitor