Email 101: Basic Layout

HTML email is special.

There’s basically no agreed upon standards for HTML email, so every email app, every device, and every combination of factors can make your email render slightly differently.

There’s a few things that you can do to make your user’s email experience more uniform, and more pleasant.

Note: Things are changing all the time and really awesome #emailgeeks are constantly experimenting and coming up with new options. What I’m talking about here are some tried and true methods for the beginner.

side by side comparisons of html emails on various devices, via Litmus

Get Your CSS Inline

Unlike a web page, it isn’t recommended that you use a separate CSS doc for your email’s appearance and styles. And, while there are some improvements, there are still a lot of email providers that don’t read CSS if it’s in the head of your HTML.

I recommend keeping a master email template to keep your styles consistent. You also can write your CSS in the head of your HTML document and use a CSS inliner to automatically inline your styles. Personally, I either use a template or do it by hand, because I have control issues. But Litmus/PutsMail has an excellent CSS inliner for you to use. So does Campaign Monitor. And your ESP might even have one, like MailChimp.

Get Specific

Again, maybe it’s just my control issues, but when it comes to font-family and font-size, I really don’t want Outlook desktop deciding for me. And it’s not exciting, because web fonts won’t work in every email provider, so you might want to stick to fonts that you know will work. Here’s a list of web-safe fonts.┬áSpecify the font, a fallback (‘serif’ or ‘sans-serif’), the font-size, and the line-height. And inline it (see above).

If you’re feeling adventurous and want to try something fancier, read Litmus’ guide to using web fonts.


Max out your width

Ok, actually that subheader doesn’t make any sense. But pick a max-width for the body of your email. I know some email geeks are moving away from that, but I still think it’s pretty important, especially if your email is mostly text. I recommend between 600-700px for your max-width, and I’d pick something that divides easily between the number of columns you plan on having in your email (I do this so it’s easier for me to do the math in my head when I’m creating the containers for the columns).

Setting a max-width for your email has a few advantages:

  • It creates a more consistent look across different email platforms.
  • It helps you control your layout (and I’ve already noted my control issues)
  • It helps shorten your line length in one-column layouts, which will make your body copy easier to read (see this article about line-length)

This post is part of a series based on an email training presentation I did for my co-workers. Want to read the whole series?

1 Trackback