The Foundations of Coding HTML Email

[ 15 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

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:

  • chiMaxx

    One more suggestion: Run your code through premailer: http://premailer.dialect.ca/

    • http://www.litmus.com Justine, Litmus

      Thanks for the suggestion! While I agree that premailer can be a handy tool, I’d caution email newbies to be careful until they get familiar with how email and CSS work together.

      There are some portions of CSS you may not want inlined (such as client-specific fixes or media queries).

  • Dimi Rogovyk

    When using big images in my newsletters, I usually slice them and put the parts in separate table cells. The problem is that Google Mail put a gap between two vertically arranged parts of the image. I use the style property “line-height:1px;” to fix it:

  • http://twitter.com/carlinscuderi Carlin Scuderi

    This article was super helpful. Thanks!

    • http://www.litmus.com Justine, Litmus

      So glad to hear it, Carlin! We have another HTML troubleshooting infographic coming soon.

      Be sure to sign up for our newsletter, as we’ll be sending it out sometime next week! :)

  • sergiunaslau

    oh, oh, oh! got this give these a try!

  • Dave Panfili

    So is it alright to use the HTML background property to replace the CSS background limitation?

  • Pingback: Email Coding 101 | E-Commerce: Art + Science | Scoop.it

  • ddphilly

    I would like to nominate: http://www.EmailSlicer.com/
    Upload your design and it will convert it into HTML for email, with links and everything..very easy

  • Stephanie R

    Can I buy this as a poster? Seriously, this is great!

    • http://www.litmus.com Justine, Litmus

      We don’t offer any infographics as posters at the moment, but it’s something we’re considering for the future! In the meantime, if you click to enlarge, you should be able to print off a decent copy!

  • Scooby 6995

    The style of your ‘Email Coding 101′ graphic above reminded me of one of my favorite movies … The Incredibles. Thanks for making me smile & putting something meaningful in my brain cells.

    • http://www.litmus.com Justine, Litmus

      Awesome! Always glad to put a smile on a customer’s face!