10 top tips for HTML email development

From our recent partnership with Pure360 on email marketing, I was asked to expand on my notes from the class. So here they are.

Whether you like it or not, HTML email marketing campaigns are a core requirement for any successful email marketing program.

An email campaign can boost a companies revenue by millions of pounds, for example over this Christmas period how many do you think you will receive from your favourite brands – electronics, music, etc?

Email marketing is a cheap and successful online marketing method. Cheap in relation to posting out printed flyers to every recipient. And successful by being able to measure the success of every email campaign, tracking every open time and read time for each email. HTML emails done correctly, offer a better conversion rate, and people choose HTML over plain text format more often.

So, here’s a list to help all email marketers and designers create the perfect email, and make sure it appears as you intended on your customers computers. If you feel I’ve missed any important ones, feel free to leave a comment.

Make no mistake, HTML email design and development is a complete minefield. There are very few rules that you can rely upon across all mail clients. Let’s do this:

1. USE INLINE CSS + TABLES
External and internal style sheets are ignored by a number of email clients. Back to the old school with tables too. Yes, it means going back to 1999 coding, and does make the code heavy, but it means you can guarantee locking down the styles to be correct in the ‘majority’ of email clients.

2. EMAIL TEMPLATES
Unless you have extensive personal experience to draw on,
you’re most likely going to want start with a template that gets most of the fundamentals right. Save yourself some time, get some inspiration and free templates here:

3. USE ABSOLUTE DIMENSIONS
In pixels for all measurements. For example, give images and tables exact pixel dimensions – so the browser knows exactly how to display it. Email clients are not as forgiving as web browsers.

4. THE DESIGN
The width of the email design to be no more than 600 pixels wide, so the full width of the email can be seen in the view port in email preview mode.

5. ACCESSIBILITY
Make sure it is readable, with images turned off does the email make sense? By default images are not displayed in most email clients (unless you have added the address to your contacts), also not creating the best look for your company.

Image of email in web-mail client (Gmail) – notice that the email doesn’t make much sense with the images turned off? This can be improved by adding copy to the ALT attribute in the html code:
slumdog email preview

  • Use Alt attributes
  • Use anchor link as well to take people to important subheadings in your email
  • Last resort – have a prominent link to your web version of the same email

6. FANTASTIC COPYWRITING
Attention grabbing headlines that will make users want to read more and click through. The attention grabbing information should be already visible in the viewport area when the email loads, very few people will scroll – like on web pages unless they like the information, drawing them down the page.

Image of email in web-mail client (Thunderbird) – notice that even with the images turned off the email still reads well, with the headline drawing you into the main content of the email. Simple design, yet to the point and easy to read, effective.
business link email preview

7. CSS SUPPORT IN EMAIL CLIENTS
Enter The email standards project.

These guys have taken the email design issue by the scruff of the neck and are actually getting Yahoo, Gmail, Outlook to take notice of the need for Email standards compliance.

Currently we grade the email clients in the following way:

The Angel’s Choir:

Strong and generally reliable HTML rendering capabilities – Thunderbird, AppleMail, and Opera Mail
You can essentially treat these mail clients as if they are normal, modern browsers.

The Muddlers:

This group includes the majority of the remaining mail clients and includes Outlook 2003, Outlook Express, and Yahoo Mail.

While you’ll probably encounter some variability in their renderings — often in text size and margins/padding – the Muddlers will generally honour your page layout.

The Legion of Doom:

Each uses their own unique but evil super-powers to subvert and destroy your HTML
Outlook 2007, Gmail, Lotus notes – rewrite CSS, padding/margins, no positioning support, removes backgrounds.

8. TESTING
Use litmusapp.com which sends back how your email looks on the following email clients:

Web-based email clients

* AOL Web
* Comcast
* Earthlink
* Gmail
* Mail.com
* MSN Hotmail
* Windows Live Hotmail
* Yahoo! Classic
* Yahoo! Mail

Desktop email clients

* AOL 9
* Lotus Notes 6.5.4
* Outlook 2003
* Outlook 2007
* Outlook Express 6
* Outlook XP
* Thunderbird
* Windows Mail (actually, what is that?)

Mobile email clients

* Blackberry
* Windows Mobile 5
* Windows Mobile 6

9 . THE FUTURE
At various sites there are thousands of new subscribers to html newsletters every single month. And those subscribers still always choose HTML over plain text at a rate of 15-20 to 1. In short, while we might not like it, your clients probably prefer HTML email, and so does their audience.

10. STICK WITH IT
Use the templates, HTML formats are here to stay so remember to keep it simple as possible, and test early and often.

Need our help? We offer web design and development services that will take the stress away from your email marketing campaign. Contact us to find out how we can help you.

Jim Callender

Since 2003, Callender Creates have been responsible for delivering high profile sites for a variety of Award Winning Design & Marketing Agencies. Our Strengths are in Front-End Development and Cutting Edge Web Technologies. Services include Web Consultancy, Strategy, UX, HTML5, CSS3, WordPress, and Magento. >> Need to Discuss your Next Digital Project? Contact Us

  • Nice article Jim, and thanks for the link to my templates. More of those soon!

    Another quick note would be to ‘know your customers’, as a lot of work can be streamlined by ID’ing what email clients your base is likely to use, and design/code with that in mind.

    Where B2B are often using desktop clients when rec’ing your email during work hours, and B2C are web-based at non-work hours, you can trim some fat (and save time) by designing for client type.

    As you point out, it’s now harder to code for B2B because of the ridiculous Outlook 2007 rendering engine (MS Word), so by knowing that your audience likely uses Gmail, you needn’t bother with an MS headache!

  • Great tips for enhancing the mails sent to your email list

  • I send just plain text mailings:

    http://eisbrecher.net/mailmachine/index.html

    With GREAT success:

    http://blogorama.eisbrecher.net/2008/12/08/blog-o-rama-hat-1000-besucher-taglich-danke

    It only depends on the CONTENT = IS KING !!! If you have something to say (sense! not just nonsense) you can use just plain text mails. No faster way to get your information out!

  • Normally I don’t leave a reply, but I really enjoyed your post. Well done!

  • Wow! Thank you! I always wanted to write in one of my sites something like that.

  • I am always searching online for resources that can help me. Thank you

  • Ankur

    Hi,
    Nice Article.
    I am a software developer from India.
    I have some problem.
    I wants to get the notification from the client side when ever he/she deletes my mail(s).
    Is that possible.
    If so , please tell me.
    thanks for your support.
    Ankur
    [email protected]

  • @Ankur – Campaign monitor and other mailing applications let you know whether emails have been read or not, using tracking cookies. This is not possible to tell whether it has been moved to the deleted folder.

    If you measure the unopened stats this is a good indication of ones that go straight to the deleted folder.

  • This is very up-to-date info. I think I’ll share it on Twitter.

  • Keep writing the stuff that you do!

  • Really cool stuff la, can I copy your article for my blog?