Best practices for styling HTML emails

I'm designing an HTML template for an email newsletter. I've learned that many email clients ignore linked stylesheets, and many others (including Gmail) ignore CSS block declarations altogether. Are inline style attributes my only choice? What are the best practices for styling HTML emails?

I've fought the HTML email battle before. Here are some of my tips about styling for maximum compatibility between email clients.

• Inline styles are you best friend. Absolutely don't link style sheets and do not use a <style> tag (GMail, for example, strips that tag and all it's contents).

• Against your better judgement, use and abuse tables. <div>s just won't cut it (especially in Outlook).

• Don't use background images, they're spotty and will annoy you.

• Remember that some email clients will automatically transform typed out hyperlinks into links (if you don't anchor <a> them yourself). This can sometimes achieve negative effects (say if you're putting a style on each of the hyperlinks to appear a different color).

• Be careful hyperlinking an actual link with something different. For example, don't type out http://www.google.com and then link it to https://gmail.com/. Some clients will flag the message as Spam or Junk.

• Save your images in as few colors as possible to save on size.

• If possible, embed your images in your email. The email won't have to reach out to an external web server to download them and they won't appear as attachments to the email.

And lastly, test, test, test! Each email client does things way differently than a browser would do.

Campaign Monitor have an excellent support matrix detailing what's supported and what isn't among various mail clients.

You can use a service like Litmus to view how an email appears across several clients and whether they get caught by filters, etc.

Mail chimp have got quite a nice article on what not to do. ( I know it sounds the wrong way round for what you want)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

In general all the things that you have learnt that are bad practise for web design seem to be the only option for html email.

The basics are:

• Have absolute paths for images (eg. https://stackoverflow.com/random-image.png)
• Use tables for layout (never thought I'd recommend that!)
• Use inline styles (and old school css too, at the very most 2.1, box-shadow won't work for instance ;) )

Just test in as many email clients as you can get your hands on, or use Litmus as someone else suggested above! (credit to Jim)

EDIT :

Mail chimp have done a great job by making this tool available to the community.

It applies your CSS classes to your html elements inline for you!

In addition to the answers posted here, make sure you read this article:

http://24ways.org/2009/rock-solid-html-emails

The resource I always end up going back to about HTML emails is CampaignMonitor's CSS guide.

As their business is geared solely around email delivery, they know their stuff as well as anyone is going to

'Fraid so. I'd make an HTML page with a stylesheet, then use jQuery to apply the stylesheet to the style attr of each element. Something like this:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Then copy the DOM and use that in the email.

I find that image mapping works pretty well. If you have any headers or footers that are images make sure that you apply a bgcolor="fill in the blank" because outlook in most cases wont load the image and you will be left with a transparent header. If you at least designate a color that works with the over all feel of the email it will be less of a shock for the user. Never try and use any styling sheets. Or CSS at all! Just avoid it.

Depending if you're copying content from a word or shared google Doc be sure to (command+F) Find all the (') and (") and replace them within your editing software (especially dreemweaver) because they will show up as code and it's just not good.

ALT is your best friend. use the ALT tag to add in text to all your images. Because odds are they are not going to load right. And that ALT text is what gets people to click the (see images) button. Also define your images Width, Height and make the boarder 0 so you dont get weird lines around your image.

Consider editing all images within Photoshop with a 15px boarder on each side (make background transparent and save as a PNG 24) of image. Sometimes the email clients do not read any padding styles that you apply to the images so it avoids any weird formatting!

Also i found the line under links particularly annoying so if you apply < style="text-decoration:none; color:#whatever color you want here!" > it will remove the line and give you the desired look.

There is alot that can really mess with the over all look and feel.