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.
If you want to read more from Brandon, subscribe to our weekly web business newsletter, the SitePoint Tribune.
Learn Responsive Web Design
- SitePoint's ebook: Jump Start Responsive Web Design
- Responsive Web Design: Key Concepts online course
- Unlimited access to SitePoint Premium Content
Join Learnable $29 Includes all SitePoint books
