The Foundations of Coding HTML Email

[ 0 By

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.

Email Coding 101 Infographic

Test out all of your hard work!

You’ve spent a ton of time coding your email—now it’s time to put it to the test! Make sure you’re putting your best email foot forward by using Litmus’ Email Previews tool to test before every send.

Start testing →

Additional resources

The infographic above covers many of the basics, but is far from a comprehensive guide. Here are some of my favorite articles and sites: