Email Design Best Practices

There are two types of emails: plain-text and HTML email. Everyone who uses email has seen a plain-text email with no formatting. You can definitely still send plain-text emails to your subscribers, but in this article we’ll be talking about emails of the HTML variety.

HTML emails should be sent in multipart/alternative MIME format; this includes an HTML version, and a plain-text fallback for email clients with HTML turned off or that lack HTML capabilities. This means that when writing and designing an HTML email, you still need a plain-text version as well. Fortunately, most of the popular email service providers will create a plain-text alternative from your HTML content.

Design Constraints

In a lot of ways, designing HMTL emails is very similar to designing a web page. They’re written using HTML and CSS, and are rendered using a browser.

If you’ve been designing websites long enough to remember the browser wars, it’s only about ten times worse. Different email clients will render emails differently, and there are a lot of email clients out there. There are desktop email clients such as Microsoft Outlook, Windows Mail, and Apple Mail, web services such as Gmail, Yahoo Mail, and Microsoft Hotmail, and mobile email clients too.

Style Sheets

Some of the biggest email clients (cough, Outlook, cough) still use ancient rendering engines with awful CSS support. Since they have a substantial market share, you must design to the lowest common denominator. Some web-based clients, like Gmail, are also very limited in what CSS features they support.

Essentially, you should design your email newsletter like you would’ve designed a website for Internet Explorer 5.5 back in the olden days. You need to use inline styles, and should avoid CSS3.

For a full list of the popular email clients and supported CSS for each, check out CampaignMonitor’s Guide to CSS Support in Email Clients.

Size

Email windows vary in size, but are typically smaller than browser windows, because of sidebars and navigation. It’s best to keep your emails to between 500px and 600px in width, or use a fluid layout.

Keep It Simple

Avoid embedding video, JavaScript, or Flash in email newsletters. If you want to show video, create a graphic of the video player (even a screenshot), and simply link it to the video embedded on a page of your website, or the web-based version of the email.

Call to Action

What is it you want your subscribers to do? Do you want them to visit your website or blog to read an article? Do you want them to purchase a product? Be sure to clearly define the goals of your email, and include several clear calls to action in your email message. Don’t just assume your visitors will know what to do; think of each email as a standalone landing page.

Testing

Litmus is an email-testing web service that will show you how your message displays in all the popular email clients, both desktop and web-based. CampaignMonitor offers Litmus integration, so you can test your emails without ever leaving the software. MailChimp has a similar built-in service that will perform the same function.

You could also set up test email accounts with each major web service, and have a few computers with different desktop clients. Obviously, unless you have access to several computers and a lot of time, a testing service will probably be quicker and easier.

Regardless of the method you use, be sure to test any new or substantially changed templates to ensure they display well in the popular email clients.

Free Templates

Whether you’re a designer or not, check to see if your email provider has any free downloadable email templates. Both CampaignMonitor and MailChimp offer lots of free templates.

You can use templates as they are and just add your logo, or use them as a base framework and change what you see fit. Regardless of your situation, free downloadable templates can give you a head start on your email newsletter, so you can avoid starting from scratch.

note:Want more?

If you want to read more from Brandon, subscribe to our weekly web business newsletter, the SitePoint Tribune.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Raphaelle

    I haven’t used Litmus but I’ve tried the free trial of Email on Acid (http://www.emailonacid.com/), and it seems really powerful. More than mere testing, they provide an email simulation service for a wide range of web and desktop clients as well as mobile devices. It also has useful tools for debugging.
    I swear I don’t work for them! It’s just that when I came across their service, it seemed like everything I’d always dreamed of when I was creating lots of newsletters. I hardly ever work on HTML emails these days, which is why I haven’t felt the need to pay for their service.

  • http://www.deathshadow.com deathshadow60

    Better practice would be to restrict yourself to plain-text… but I say that because there is ZERO legitimate e-mail I would ever expect from anyone that warrants the presence of HTML in it — which is why all my servers are set up to actively block any e-mail if it so much as contains HTML.

    … and that INCLUDES multi-part mails.

    But if you want to be blocked as SPAM, please by all means keep wasting bandwidth by vomiting up HTML 3.2 and calling it e-mail. I’ll never see it!