Best practices for styling HTML emails

Question

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?

Here is a [big list of resources](http://stackoverflow.com/questions/2229822/html-email-best-practices-considerations-and-how-to-write-code-for-outlook-gma/21437734#21437734) on a [duplicate question](http://stackoverflow.com/questions/2229822/html-email-best-practices-considerations-and-how-to-write-code-for-outlook-gma/). — John, May 15 '14 at 21:08

Michael Irigoyen · Accepted Answer · 2011-02-04T16:53:15.337

280

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.

edited Feb 04 '11 at 16:53

answered Jan 28 '11 at 14:34

Michael Irigoyen

22,513
17
89
131

Are tables really necessary? What about Outlook makes it unfriendly to
s?
– Joe Mornin Feb 01 '11 at 18:36
2

When placing a background color on a `
`, Outlook won't extend the color past the content, meaning the padding won't be colored.
– Michael Irigoyen Feb 01 '11 at 21:03
Interesting, and weird. Thanks for the heads up! – Joe Mornin Feb 04 '11 at 16:08
1

Embed images? But, then you have yucky attachments! – David Rivers Feb 22 '11 at 16:26
Embedded images do not appear as attachments on emails. – Michael Irigoyen May 04 '11 at 14:25
87

Why, Internet? Why can't we have nice html for emails? *shakes fist* – Simon Jan 27 '13 at 12:25
11

So we can get prettier spam? – Brock Hensley Jun 21 '13 at 19:08
8

@DavidRivers Maybe it should be pointed out that "embedded images" does not mean to add images as attachments, instead they should be included as base64-encoded strings to replace the url referenced in "normal" `` tags, like so: `` – Timo Ernst Feb 12 '15 at 08:57
1

This is 2015, and it appears that Outlook.com is finally accepting `margin`. Mixed feelings. – Cthulhu Sep 30 '15 at 09:45
@Timo Almost all email clients remove embedded images. Simply serving them in another webserver works almost fine. – Mohammad Jafar Mashhadi Mar 11 '16 at 16:44
2

@MJafarMash I don't believe that is accurate. In fact, I just created a mailer a few weeks ago that embeds the images and it passed all our QA tests in all the popular email clients. Embedding is still the best way to go over attachments or URL links if you want the images to be displayed immediately in an email client. – Michael Irigoyen Mar 11 '16 at 18:43
@MichaelIrigoyen Check this out: http://stackoverflow.com/questions/13049453/how-to-successfully-embed-images-in-html-for-display-in-webmail-clients – Mohammad Jafar Mashhadi Mar 11 '16 at 19:30
3

@MJafarMash That is the incorrect way to embed images in email. You have to create separate envelopes and refer to the image based on it's `cid`. – Michael Irigoyen Mar 11 '16 at 19:31
You're right, `cid` does work; Actually embedding it like Timo's comment won't. – Mohammad Jafar Mashhadi Mar 11 '16 at 19:37
Yes the `cid` method is really the only way to go for consistent results, anything else is blocked somewhere. – majick May 18 '16 at 05:33
Quite good info on client's emails. Thanks!!! – Ram Jul 25 '17 at 18:47
In 2019, Gmail isn't stripping my style block. – MarredCheese Apr 19 '19 at 19:43
Doesnt email remove embedded images too? It wont let me do it. – Mike Flynn Apr 22 '22 at 14:05
You can now have ` – Măcelaru Tiberiu Aug 30 '22 at 12:15

score 144 · Answer 2 · answered Jan 28 '11 at 14:29

144

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.

answered Jan 28 '11 at 14:29

Jim

72,985
14
101
108

9

+1:Didn't know about Litmus. This looks like a huge time saver. Thank you :D And don't forget about the blog posts on CampaignMonitor, which also includes some nice tips. – Horst Gutmann Jan 28 '11 at 14:32

score 43 · Answer 3 · edited May 23 '17 at 11:47

43

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!

edited May 23 '17 at 11:47

Community

1
1

answered Jan 28 '11 at 14:32

SamMullins

267
4
9

1

the mailchimp link is broken, perhaps it's one of these articles, http://kb.mailchimp.com/article/common-html-email-coding-mistakes or this http://kb.mailchimp.com/article/common-mistakes-to-avoid/ – Nathan Koop Dec 19 '12 at 19:33
I've updated the link, the first one you've suggested was the correct one. Unfortunately it was moved without adding redirects. – SamMullins Dec 21 '12 at 11:52
Thanks for the CSS inlining tool. Would be helpful I guess. – Rajesh Paul Aug 27 '17 at 18:49

score 11 · Answer 4 · answered Jan 28 '11 at 14:50

11

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

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

answered Jan 28 '11 at 14:50

Stephan Muller

27,018
16
85
126

score 6 · Answer 5 · answered Jan 28 '11 at 14:28

6

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

answered Jan 28 '11 at 14:28

Gareth

133,157
36
148
157

Nathan MacInnes · Answer 6 · 2011-01-28T14:39:27.707

5

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

edited Jan 28 '11 at 14:39

answered Jan 28 '11 at 14:29

Nathan MacInnes

11,033
4
35
50

2

You have to be a bit careful with it though... it ain't foolproof. Like it might mess up widths of things, so just check everything before sending. – Nathan MacInnes Jan 28 '11 at 15:00
to get around that problem, you can hide the entire document with jQuery first, then run this code (and maybe unhide) - this way the actual CSS rules are retrieved and applied rather than the computed result (eg. for widths.) – majick May 18 '16 at 05:37

score 1 · Answer 7 · edited May 23 '13 at 15:16

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.

Best practices for styling HTML emails

7 Answers7

Linked