6 Easy Ways to Improve Your HTML Emails

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:

• 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.

Here is the exact same email being rendered by the new version of Yahoo.

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:

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!

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.

If you like this tutorial, please give comments in that

Posted in: HTML Tips-Tricks