Whatever your personal feelings are about HTML emails, they do work effectively as a communications and marketing tool. And worst of all, you can’t ignore them, you just know that at some point a client is going to ask you to create a template for them.
If you have never designed an HTML email template before you may be thinking: “Whats the big deal? You use some basic HTML with a little CSS, no problem at all!”. Little do you know that the actual design of the email is the least of your problems. When designing a web page you do need to cater for only a handful of browsers, each with there own particular little quirks. With emails, you need to design them to display properly in 50+ (!) email clients, with each one not willing to cooperate with.
There is no fun when designing an email template. You have to roll up your sleeves and test, and then test some more.
A well designed email template can be the difference between a companies success and failure, so its has to be designed right and formatted correctly.
To help you with this we have collected a huge array of email design Best Practices, tutorials (both HTML and CSS), testing tools, ready made templates (there are only a few, as most of the free templates out there look like they were all designed in the 90s) and finally some email inspiration.
Don’t forget usability and accessibility rules when designing emails, perhaps you should read these articles first:
Design of Email Newsletters – Alertbox and
Email Newsletters: New Results From Eyetracking and User Research.
Email Design and Best Practice Guides
This article gives you the information you will need to plan, design and build an HTML newsletter that renders well and can actually be useful to recipients. It’s a quick and dirty guide for effective email newsletters.
These are the ten main email newsletter rules this article covers:
- 1. Respect your reader. Don’t waste their time or attention.
- 2. Ask nicely first.
- 3. Focus on relevance.
- 4. Design with a goal in mind, so that you’ll know if it worked.
- 5. Make unsubscribing easy.
- 6. Code like it’s 1999 (literally) and use inline CSS.
- 7. Always include a plain text version.
- 8. Don’t assume that images will be viewed.
- 9. Follow the law.
- 10. Test everything before sending, because you can’t take it back.
In this article, you'll get the opportunity to explore the common design patterns of email newsletters and learn which approaches work well, so that you’ll be prepared to create one for yourself and your clients.
They've also included a compilation and analysis of different newsletter designs so that you can learn from them as well as offer tips on what to do and what not to do.
Even for experience designers, building email newsletters isn't easy. You receive a lovely looking design, and you crack on with the development. Unfortunately, it just doesn't work as it should in every email clients – Styles don't display, images aren't visible, etc. This is where these twenty best practices come in handy.
Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.
Campaign Monitor have put together a downloadable guide that will save you the time and frustration of having to do it all yourself. With 23 different email clients tested, they cover all the popular applications across desktop clients, web apps and even mobile email.
You can download the guide here:
Most of designers and developers tend to think that if you can design a web page, then hell, an HTML email will be a piece of cake! Well…almost. But before you decide to plunge into HTML email design head first, there are a few guidelines to follow that can ensure the best results for you and your clients.
The guidelines fall roughly into these recommendations: how you should design your email, how you should code it and finally the essential content you should include.
HTML emails have often been the black sheep of the web design world, and have either been ignored or actively repelled. Despite that, HTML email usage continues to grow, and it has continually proven to be an effective tool for businesses to communicate with customers.
An email inbox is a very noisy place, with tons of messages, folders, calendars, and other distractions. Your subscribers may only ever read the subject line, or perhaps see your email through a tiny preview pane, so you need to design it accordingly and make the best use of the screen space and time the reader gives you. So, what makes a good, modern HTML email design? Read on to find out…
Have your e-mails already been flagged as spam, although you’ve sent a seemingly legitimate proposal to your client? Have you ever wondered why the efficiency of your newsletter campaigns suddenly dropped down? In both cases you deal with a problem which is harder to get done with than you think it is: bulletproof e-mail delivery.
This article suggests over 20 bulletproof techniques, best practices and related services you can use to ensure best e-mail and newsletter delivery rates.
Here are ten tips you could give to any new customers that are wanting to send out their first email campaigns. Share them with your clients before you begin your next email marketing projects, and you might prevent more than a few headaches!
It's astounding how many professional web designers (and programmers!) make silly mistakes in their HTML email campaigns. With the exception of just a few little tweaks, HTML emails are really just miniature web pages. So there's really is no excuse for the mistakes that keep on cropping up.
If you're a web developer, and you're totally new to designing HTML emails, read this article before you start offering email marketing services to your clients.
Newsletter Design Tutorials
This article will bring you up to date on how to code HTML email so that it will display well in most email clients and describing the results of the authors hands-on experience creating HTML email newsletters for clients, as well as bits of technical information from the Internet.
Basic HTML Email Templates from MailChimp.com
Here are four basic, flexible templates that you can use to get started with email development. They've all been tested and render properly in all the major email programs, like Outlook 2007, Lotus Notes, Gmail, and more.
The basic templates above have been created by CakeMail, they are free to use, distribute and modify under a Creative Commons Attribution Share-Alike license.
Advanced HTML Email Templates
Campaign Monitor offer 30 free and professional email templates which have been tested in all the major email clients, so all you have to do is add your own content.
Email Testing
Litmus will show you exactly how your email is seen through the eyes of your readers, whatever email system they might be using. Within a few minutes you can perform a thorough test which would eitherwise be time consuming and expensive to do by hand.
Litmus runs your email through a wide range of spam filters. From consumer desktop filters, to high-end gateway systems used by ISPs and large corporations. If your email doesn't pass them all, Litmus shows you exactly what caused the problem so you can fix it quickly. (Please don't abuse this).
Your customers use a variety of clients to view their emails from desktop programs such as Outlook, Entourage, Thunderbird and Mac Mail to web-based programs like Gmail, Hotmail and Yahoo. Each email client has its own rules on how it renders CSS, plain text and HTML messages and many times these rules vary considerably from one version to the next.
The Email on Acid test not only renders your code in the top 15 most popular email clients but it will also show you exactly which lines of code where not supported by each client.
This test can be used to efficiently optimize each of your emails prior to sending so that you maximize rendering, user readability and performance.
This article will outline the process for testind HTML emails, including what to look for when you test, how to test for various viewing scenarios, what techniques/utilities to use for debugging and finally what email clients to use.
Email Design Showcase
Written and designed by Mailchimp, the Email Design and Coding Tactics from the Ancient Web Masters, is a look at the lighter side of email newsletter design. Very funny!
| View | Download OTF St Marie | 1 Style | OpenType | Stereotypes 
