Advertisement
HTML & CSS

6 Easy Ways to Improve Your HTML Emails

by

Like many other web designers, I thrive on coding beautiful yet flexible web pages that display virtually identical in every web browser. Unfortunately, designing email newsletters sends you back ten years. Deprecated tags, tables, inline styling, oh my! In this article, I'll list six methods that will immediately improve your email layouts.


Email Newsletters.

As a new hire at opt-in email marketing service AWeber, my first assignment was to create a couple dozen new HTML email newsletter templates for our customers. For the clean code-loving web designer, HTML email is a reminder of a dismal past. After weeks of work and countless headaches, I delivered the goods. I also learned a lot about designing for email.

To help you avoid a lot of the headaches I encountered during testing, here are 15 things you can do to create great-looking HTML emails.


Set Up Multiple Email Accounts For Testing!

If you only take away one tip from this article, please let it be this. As designers, we spend a lot of time creating the perfect user experience on the web and testing that experience across multiple platforms. Yet when it comes to email, too many of us fail to deliver the same attention to detail.

Much like testing for the web, creating an email layout that displays the same in every email client can be an absolute nightmare.

In order to be sure your subscribers will receive your message as intended - test in everything you can!

This includes but is not limited to:

Some of the various clients you should test your emails in.
  • Yahoo
  • Gmail
  • AOL
  • Windows Live Hotmail
  • Outlook 2007
  • Outlook 2003
  • Lotus Notes
  • Thunderbird
  • Entourage
  • Mac Mail

But wait - there's more!

Some of these email clients have multiple versions, each of which will render CSS and HTML differently.

This is part of an HTML email being rendered by the old version of Yahoo.

HTML rendered in old Yahoo mail client
Here is the exact same email being rendered by the new version of Yahoo.

HTML rendered in new Yahoo mail client

Subtle differences, I'll admit. But enough of these subtle differences and it adds up to a sloppy design. And if that's not enough... the user's internet browser can also play a part in how your design renders.

Now before you throw your computer out the window in frustration... these next few steps can help you rule out a majority of testing problems.


Design Your Emails To Degrade Gracefully

I'm amazed to see some of the largest advertisers breaking basic usability rules regarding HTML email.

Here are some guidelines to live by:

  • Never rely on images to communicate important information... especially one big one. A huge majority of email clients have images turned off by default. Unless the user takes some initiative... you just sent them a nice blank message.
  • Never rely on background images to make text readable. Make sure your text has enough contrast with or without images enabled. Outlook 2007, for example, will not display background images in table cells even if images are turned on.
  • Provide a link for people who are having trouble viewing your message Ok, this isn't absolutely necessary - but its thoughtful to give your subscribers the option to view your message in their web browser (especially if it's a particularly HTML heavy design).
  • Use ALT tags on important images I can't stress this enough! With images disabled by default, descriptive ALT tags are your last, best chance to convince a user to enable images.
  • When using ALT tags, cut the clutter. Fill in the ALT tags that matter and leave the others blank
    (Note: I didn't say exclude them!)

This is a header of an email I received from Discovery Health:

Screenshot from Discovery Health showcasing a cluttered looking email.

I took this screenshot from my Gmail account - before enabling images. See how the ALT text "bullet" and "spacer" get in the way?

Adding ALT tags to elements that only serve for design purposes clutters the design and distracts from your message.


Use Tables to Structure Your Layout

Huh? I spent all this time learning CSS and now I have to go back to tables? When it comes to email design, tables are hot like its 2003 - they're the closest thing to standards we have.

A few things to take note of:

  • Make sure to set all available table attributes where possible. This includes cellpadding, cellspacing, border, valign, width and height.
  • Nested tables are your friend. Make sure to use proper indentation for clean easy to read code.
  • Use the background attribute on a table cell to set background images. This is the easiest way to get passed backgrounds not displaying in Gmail.

    Note: Your background images will behave as if they were tiled... so plan accordingly.

  • Be aware that background images applied to tables or divs are not supported by Outlook 2007 In fact, the only way to use a background image in Outlook 2007 is to apply it to the body of an email, which of course isn't supported by other email clients such as Gmail, Yahoo, or Windows Live Hotmail. Awesome, right?

    I didn't think so either.


Use Inline Styles When Coding Your CSS

Some popular email clients ignore the code inside your head tags. Gmail and Hotmail are particular culprits that come to mind.

With your layout set up in table format, it's time to apply styles to your text and images.

Here are some tips and tricks to ensure your message looks nearly identical in every
browser:

  • Use break tags as a replacement for vertical padding To alter the amount of space they consume try wrapping them in span tags and set a smaller/larger font size.
  • Use inline styles repetitively and often. Applying a font tag to a parent table doesn't necessarily mean it will carry that attribute down to all of its children. Make sure to set inline styles on all of your HTML elements.
  • Apply detailed inline styles to links Especially for Gmail users - you must set specific styles to every link. Otherwise, they will inherit the default font-family, size and color set by each user's browser.
  • Wrap your images in span tags and set font attributes to style your ALT text accordingly. This allows you to style your ALT text, making it more readable when images are disabled.

Use Gmail's Inbox Formatting To Your Advantage

Did you know that the subject line of every email sent to a Gmail account is followed by the first snippets of text within that particular email?

Why not use this to your advantage!

Gmail Snippet

Above is a picture from my Gmail inbox.

Both newsletters have the same header content.

Only one difference - Newsletter 1 takes advantage of Gmail's inbox formatting.

Here's how I did it:

Insert a 1px x 1px image as the very first element in your email. Wrap the image in span tags setting the font color to the same as the background. Whatever text you put in the ALT tags for your 1px x 1px image will now replace that google snippet in the users inbox.

It's as easy as that! This subtle difference will set your message apart from other emails in the reader's inbox.


So, Now What?

I've done my best to share some things I do when creating HTML emails. It's your turn!
How do you go about designing, coding and testing your email campaigns?

Any recommendations, tips or tricks you would like to add will be greatly appreciated by your fellow design community.

Related Posts
  • Computer Skills
    Office
    Tame Your Outlook Inbox with Subfolders, Rules and FiltersOutlook icon
    Outlook is the most popular business email client, and it has the powerful features you need to automatically keep your inbox clean. Here's how to use folders, subfolders, rules and filters in Outlook to make your email work the way you want it to.Read More…
  • Web Design
    Email
    Getting Started With MailChimp's Email DesignerMailchimp tool thumb 2
    This tutorial will walk you through the steps of using the MailChimp Email Designer tool to build a clean, mobile-friendly newsletter.Read More…
  • Design & Illustration
    Interface
    How to Design an iOS 7 Email App in PhotoshopEmail app interface preview400
    In this tutorial, I will show you how to create a flat and modern, Gmail-inspired, iOS7 email app in Photoshop. We will begin by showing you how to sketch out your ideas, then we will see how to create your design in Photoshop, and finally, how to incorporate your design into an iPhone mockup. Let's get started!Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Web Design
    Email
    The Complete Guide to Designing for EmailEmail thumb
    Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it's worth employing as many tricks in the book as possible to make sure your message gets through. The underlying principles are all about respecting your readers by giving them something valuable in return for their time which is, after all, the reason they signed up to hear from you in the first place.Read More…
  • Web Design
    HTML/CSS
    Build an HTML Email Template From ScratchEmail build thumb
    The best way to understand any process is to carry it out yourself, from the ground up. Today, we're going to do just that with email design, by building an HTML email template from scratch.Read More…