How to build an HTML email
Once you’ve identified the message and the specific contents of your email, the next step is building the email in HTML format for delivery.
Tips on how to Build an HTML Email:
- Size does matter. Keep the maximum width to 650 pixels so it’ll fit in most email clients/devices.
- Make it responsive. Many email clients now support responsive emails, and while the numbers will vary depending on your industry, an ever-increasing proportion of users read email on mobile devices. You want it to look good on phones, tables, laptops, and desktops. Make sure you set your styles appropriately.
- Use tables. We rarely see tables in a website these days, but email clients can be less predictable than browsers, and while many support css, it’s still safer to use tables to build the main structure of your email.
- Go easy on the images. Too many images will slow the loading of the email, and if the user has images blocked, it won’t look good. Background images are still not supported by many email clients so we don’t recommend using them. Host images on your server or delivery service, never embedded in an email.
- Use web safe fonts, ideally about 14px for body copy.
- Make sure your calls to action are clear and stand out visually in some way.
- Consider a template as a time saving starting place. Mashable recently released this list of 32 responsive email templates. I cast a vote for ZURB and Antwort, but I haven’t tried all 32. There are templates available in a wide range of styles.
- My favorite way to build html emails is to prep your template with an in-page style sheet, then once you’re happy with it when previewing it in a browser, run it through an inliner. An inliner is a service that automates the process of applying styles to each applicable element. Effectively it takes a style sheet and converts it to inline styles for you. This allows you a much cleaner workspace when you’re prepping the email, and a quick run through an inlining program saves loads of time manually placing all those styles. Inliners are available from Mailchimp, ZURB, Campaign Monitor, and my personal favorite is Premailer (also sponsored by Campaign Monitor) because it works so well.
- If you know your target demographic will be dominated by a specific email client, research issues with that client to make sure nothing breaks for your users. Litmus shares their email analytics reports showing the top 10 email client market share here. As of December 2013, the top 3 email clients are Apple iPhone, Outlook, and Google Android.
- Ensure that the email footer contains valid contact information.
- Last but not least, TEST! We send out loads of tests prior to any email launch. At least two people should click every link. We’ve actually had links that fail but not universally. View your email test on as many devices, browsers, and email clients as possible. Consider a testing service like Email on Acid or Campaign Monitor if you’ve got the budget, and your email layout is complex.
Email is an awesome tool, make the most of it.