| Whether you like it or not, HTML email marketing | | | | Image of email in web-mail client (Thunderbird) – |
| campaigns are a core requirement for any successful | | | | notice that even with the images turned off the |
| email marketing program. | | | | email still reads well, with the headline drawing you |
| An email campaign can boost a companies revenue | | | | into the main content of the email. Simple design, yet |
| by millions of pounds, for example over this | | | | to the point and easy to read, effective. |
| Christmas period how many do you think you will | | | | |
| receive from your favourite brands – electronics, | | | | 7. CSS SUPPORT IN EMAIL CLIENTS |
| music, etc? | | | | Enter The email standards project |
| Email marketing is a cheap and successful online | | | | These guys have taken the email design issue by the |
| marketing method. Cheap in relation to posting out | | | | scruff of the neck and are actually getting Yahoo, |
| printed flyers to every recipient. And successful by | | | | Gmail, Outlook to take notice of the need for Email |
| being able to measure the success of every email | | | | standards compliance. |
| campaign, tracking every open time and read time | | | | Currently we grade the email clients in the following |
| for each email. HTML emails done correctly, offer a | | | | way: |
| better conversion rate, and people choose HTML | | | | The Angel’s Choir: |
| over plain text format more often. | | | | Strong and generally reliable HTML rendering |
| So, here's a list to help all email marketers and | | | | capabilities – Thunderbird, AppleMail, and Opera |
| designers create the perfect email, and make sure it | | | | Mail |
| appears as you intended on your customers | | | | You can essentially treat these mail clients as if they |
| computers. If you feel I’ve missed any | | | | are normal, modern browsers. |
| important ones, feel free to leave a comment. | | | | The Muddlers: |
| Make no mistake, HTML email design and | | | | This group includes the majority of the remaining mail |
| development is a complete minefield. There are very | | | | clients and includes Outlook 2003, Outlook Express, |
| few rules that you can rely upon across all mail | | | | and Yahoo Mail. |
| clients. Let’s do this: | | | | While you’ll probably encounter some variability in |
| 1. USE INLINE CSS + TABLES | | | | their renderings — often in text size and margins |
| External and internal style sheets are ignored by a | | | | padding – the Muddlers will generally honour your |
| number of email clients. Back to the old school with | | | | page layout. |
| tables too. Yes, it means going back to 1999 coding, | | | | The Legion of Doom: |
| and does make the code heavy, but it means you | | | | Each uses their own unique but evil super-powers to |
| can guarantee locking down the styles to be correct | | | | subvert and destroy your HTML |
| in the ‘majority’ of email clients. | | | | Outlook 2007, Gmail, Lotus notes – rewrite CSS, |
| 2. EMAIL TEMPLATES | | | | padding/margins, no positioning support, removes |
| Unless you have extensive personal experience to | | | | backgrounds. |
| draw on,you’re most likely going to want start | | | | 8. TESTING |
| with a template that gets most of the fundamentals | | | | |
| right. Save yourself some time, get some inspiration | | | | Use which sends back how your email looks on the |
| and free templates here: | | | | following email clients: |
| - carbon graffiti | | | | Web-based email clients |
| - campaign monitor gallery | | | | * AOL Web |
| 3. USE ABSOLUTE DIMENSIONS | | | | * Comcast |
| In pixels for all measurements. For example, give | | | | * Earthlink |
| images and tables exact pixel dimensions – so the | | | | * Gmail |
| browser knows exactly how to display it. Email clients | | | | * * MSN Hotmail |
| are not as forgiving as web browsers. | | | | * Windows Live Hotmail |
| 4. THE DESIGN | | | | * Yahoo! Classic |
| The width of the email design to be no more than | | | | * Yahoo! Mail |
| 600 pixels wide, so the full width of the email can be | | | | Desktop email clients |
| seen in the view port in email preview mode. | | | | * AOL 9 |
| 5. ACCESSIBILITY | | | | * Lotus Notes 6.5.4 |
| Make sure it is readable, with images turned off does | | | | * Outlook 2003 |
| the email make sense? By default images are not | | | | * Outlook 2007 |
| displayed in most email clients (unless you have | | | | * Outlook Express 6 |
| added the address to your contacts), also not | | | | * Outlook XP |
| creating the best look for your company. | | | | * Thunderbird |
| Image of email in web-mail client (Gmail) – notice | | | | * Windows Mail (actually, what is that?) |
| that the email doesn’t make much sense with | | | | Mobile email clients |
| the images turned off? This can be improved by | | | | * Blackberry |
| adding copy to the ALT attribute in the html code: | | | | * Windows Mobile 5 |
| | | | * Windows Mobile 6 |
| - Use Alt attributes - en.wikipedia.org/wiki/alt | | | | 9 . THE FUTURE |
| - Use anchor link as well to take people to important | | | | At various sites there are thousands of new |
| subheadings in your email | | | | subscribers to html newsletters every single month. |
| - Last resort – have a prominent link to | | | | And those subscribers still always choose HTML over |
| your web version of the same email | | | | plain text at a rate of 15-20 to 1. In short, while we |
| 6. FANTASTIC COPYWRITING | | | | might not like it, your clients probably prefer HTML |
| Attention grabbing headlines that will make users | | | | email, and so does their audience. |
| want to read more and click through. The attention | | | | 10. STICK WITH IT |
| grabbing information should be already visible in the | | | | Use the templates, HTML formats are here to stay |
| viewport area when the email loads, very few people | | | | so remember to keep it simple as possible, and test |
| will scroll – like on web pages unless they like the | | | | early and often. |
| information, drawing them down the page. | | | | |