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.