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:

alt="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.

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:

alt="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!

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:

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 vote for it on Digg: