The Foundations of Coding HTML Email13
Creating HTML emails that will look awesome on the dozens of email programs out there is tricky. If you’re new to the email world (or have picked up HTML in the last several years), learning how to get an email to look good can be a little like figuring out whatever happened to Jimmy Hoffa.
Simply put, many HTML and CSS properties used in modern web design are not supported in email. Email programs like Outlook 2007 and 2010 actually use Microsoft Word (yes, a word processor) to render HTML. In other words, building an email is not like building a website, unless you’re still building websites like we did back in 1999.
For best results, you’ll want to:
- Keep your design simple: avoid drop shadows, fancy fonts, rollovers and other interactivity
- Use tables for layout, and basic inline CSS for formatting
- Know your audience: testing to see which email clients your subscribers use to read messages can help you know where to focus your efforts
- Test regularly: email programs change frequently, often with little notice
- Check out the infographic below for more specific tips!
Click on the graphic for an enlarged view.
The infographic above covers many of the basics, but is far from a comprehensive guide. Here are some of my favorite articles and sites:
- MailChimp has a series of guides on every topic you can imagine (and some you won’t!)
- Campaign Monitor’s legendary CSS support guide outlines what will work where
- 20+ pages of tips and advice from Responsys in their “Email Design & Coding Recommendations” PDF
- If you’re the bookish type, check out SitePoint’s Create Stunning HTML Email that Just Works!