HTML e-mails with CSS

Document Sample
HTML e-mails with CSS Powered By Docstoc
					?HTML emails are widely used for all kinds of professional correspondence. Beyond
email newsletters they're used for all sorts of application-generated messages, such as
receipts and confirmations. Styled messages have lots of appeal for marketers,
designers and consumers -- but for coders, it's a real headache to create them properly.

Creating an HTML email that looks right to every reader is a job that makes
cross-browser testing look easy. What can go wrong? After reaching its final
destination, an email could be read using any of a number of standalone email clients
(such as Outlook, AOL, and Eudora), and even more Web-based clients (Yahoo,
Hotmail, and Gmail to name a few). Each of these email clients displays your HTML
email message a little bit differently, so ensuring that your message displays correctly
can be a daunting task.

How are coders coping with this mess? Some say the only solution is to go retro -- by
ditching CSS and using old-school HTML for formatting, but what about serious CSS
coders who can't even type a font tag with a straight face? Fortunately, we have

Stylesheets that Stick

When you're coding an HTML email with CSS, make sure that you don't use linked
CSS files (.css files attached using link or @import). These are the stylesheets most
widely ignored by email clients.

CSS style declarations in the head of an HTML document (using style tags) are
ignored by some email clients, such as Gmail, so they should be avoided for styles
that are key to the email design. I sometimes use a style tag for styles that are
"expendable" -- for example, when making all the links green instead of blue isn't
crucial, it's a good style to define in a style tag.

The most reliable way to include CSS in an HTML email is to use inline styles. They
aren't pretty, but few email clients ignore them. These styles are defined within the
HTML tags in the body of the document, like this: green and arial text. Using span
tags to apply inline styles also works well. [Remove spaces before and after ""]

Layout Techniques

Most people suggest using table, tr, and td tags for page layout within an HTML email.
Tables are the most stable option, especially if you're creating email messages that
require a more complicated multi-column layout. Gmail simply removes div tags, and
coverage in other clients like Hotmail is spotty. Also, floating div tags don't work in
several email clients, so any floating elements can be placed in a table (using , for
example). [Remove spaces before and after ""]
Using a div tag for a layout or background color is a better option when you're
working with a single-column layout. Applying styles to div tags using inline styles
versus a style tag will help keep that style in place when the email ships out to the

On the bright side, you can scale back on div tags if they're causing problems, and use
the almost universally supported table, tr, and td tags for anything you can't
accomplish reliably with a div.

Formatting Text

The best way to make sure your text formatting sticks is to use inline styles, but
applying an inline style to every bit of text is tedious and may add too much extra
weight to the HTML. If you aren't especially picky about details like the exact pixel
size of your text, whether your "black" text shows up dark gray, and how your links
are underlined, you'll probably be happier applying text formatting with a style tag
rather than inline.

One place where inline styles may make a real difference is in the headings and
special notes within your email. When you want to ensure that a certain notice is
always red, or that headings are the same shade of orange as your logo, you should
use inline styles for that formatting.

Some email clients are notorious for changing text in strange ways that can only only
be overridden with inline styles. Hotmail, for example, always displays links in small
blue Verdana, regardless of the appearance of the rest of the email. If this is a problem
for you, you should use inline styles on each link tag to override it.

Images and Backgrounds

The ability to include images a key advantage to HTML email -- they allow you to
show as well as tell, plus they're often used to track email open rates. Like most perks,
they have their downfalls. Spammers frequently abuse HTML images, so some email
clients don't display them at all without the user's permission. Some email clients
display images that are included in an img tag, but not images that are included with
CSS, or as a background image, or both.

When creating HTML emails, you should also avoid using dark background colors,
especially in the background of your email. If one of your lighter background colors is
ignored by an email client for some reason, users may see the email as black text on a
dark blue background and ignore the message or, even worse, report it as spam.

General Do's and Don't's for HTML/CSS Emails
To wrap up, here are some do's and don't's:

Do ...

Use inline style declarations for the most important styles.

Declare styles in a style tag when they're not absolutely necessary.

Use table tags for multi-column layouts and floating elements.

Test your email in multiple standalone and Web-based email clients.

Don't ...

Use external stylesheets.

Use floating div tags for multi-column layouts.

Expect CSS background images to show up in most email clients.

Rely on images showing up, especially background images.

Shared By: