Home Resources Blog

This article is a sequel to one that appeared on A List Apart shortly after the CAN-SPAM Act of 2003 was enacted. (If you haven’t read it, you might want to take a gander.) The web has made great strides in standards-coding techniques, and my philosophies have evolved accordingly. I now would like to clarify the intentions of my original article and explain how my approach to HTML emails has kept pace with the rapidly changing internet environment.


A spirited debate took place in the discussion forum for my original article. Many readers, dedicated to standards compliance, immediately denounced HTML emails as nothing more than vehicles for spam. Other readers disagreed, pointing out that while HTML formats are frequently used by spammers, they are also used by legitimate companies for permission-based email communication.

Both sides have valid arguments. But the sole intent of my article was to demonstrate how one could use standards-based markup for HTML emails, not to encourage spam or the use of HTML for general email communication. Like it or not, HTML emails are here to stay. And if we’re going to be asked to build them, we might as well do what we can to ensure they are built with accessibility in mind. As for spammers, I believe the likelihood of their dedicating time to learning techniques for standards coding is slim to none.</p

So for those of you ready to improve the markup of your permission-based HTML emails, let’s go to it. Following, is a screen shot of the properly rendered test email:

[screen shot of test email properly rendered]

My approach

Download example

Download a zip file containing the markup and images for the test email.

SampleCSSEmail.zip (12kb)

For markup in the original test email, I utilized a blend of CSS and traditional techniques (Tables, etc.). Take the following markup from the original test-email whereby I used a Table for presentation [shudder] and a TD background to ensure the background would appear even in clients offering poor CSS support:

‹td width="28" background="imagepath"›‹img src="imagepath" width="28" height="25" /›‹/td›

This approach was a compromise, offering extended use of CSS and ensuring design integrity across the board. I have since matured my approach, however, employing fully-semantic markup (my standard practice for websites). Consider the following example:

‹div id="Title"›
 ‹h1›National Adoption Day‹/h1›
 ‹h2›‹a href="url"›Learn more‹/a›‹/h2›

In email clients lacking support for CSS, this degrades to an appearance similar to that of rich text:

[screen shot of test email with CSS disabled]

From my perspective, the result is perfection: beautiful designs for recipients with CSS-friendly clients and accessible, functional versions for everyone else. This, too, is a compromise, but only with respect to the integrity of the visual design. Accessibility is never compromised, and that’s the beauty behind this approach.

My testing suite

I surveyed friends and colleagues as to their email client of choice because stats on email-client usage aren’t published like browser stats. I tried to reach a broad demographic in hopes of using an inclusive suite.
The resulting suite comprised the following clients:

Desktop clients

  • Apple Mail (Mac)
  • Thunderbird (Mac/PC)
  • Outlook (PC)
  • Outlook Express (Mac/PC)
  • AOL (Mac/PC)
  • Entourage (Mac)
  • Eudora (PC)

Webmail clients

  • Yahoo Mail
  • Gmail
  • Hotmail
  • Squirrel Mail
  • AOL

Handheld devices

  • Motorola v551
  • Zaurus SL-5500

The results

By and large the clients in my testing suite offered pretty amazing support for CSS, barring the pitfalls noted below. Most of the desktop clients fared very well, but the webmail clients’ performance was all over the board. Considering the difference in environments, that was to be expected. Desktop clients have complete control over presentation, while webmail clients are dealing with an HTML page embedded within an HTML page. And each has its own unique method for handling this predicament.

Yahoo Mail alters the contents of an HTML email by changing things like ‹body› to ‹xbody› and adding an all-encompassing container DIV (#message) just inside the Body tag. The “xbody” issue disables all presentational aspects you’ve defined for the body of your document. There is, however, an accessible solution to this problem that minimizes gratuitous markup. Create your own container DIV that envelops your entire email and treat it as though it where the body tag. As for the new #message DIV, it’s relatively harmless
(at least in my tests) since Yahoo is considerate enough to add #message to any descendant selectors you might have applied.


#Title h1 {


#message #Title h1 {

Yahoo Mail does, however, attack with irreparable damage when it comes to positioning. Just as ‹body› becomes ‹xbody›, ‹position› becomes ‹xposition›.
Unfortunately, I was unable to find a workaround for this issue. The result is that positioned elements behave as if they were not coupled with any styles whatsoever. So unless your email list is void of Yahoo addresses, it’s best to avoid designs requiring positioning.

AOL (desktop client) accepts no background images whatsoever, whether CSS- or HTML-based. If a technique exists for forcing the rendering of background images, I am unaware of it. I suspect the culprit is their use of proxy servers, which already severely compresses images in favor of speed and at the expense of quality. The webmail client successfully rendered my test email, but I was unable to find statistics comparing usage of the desktop client with that of the webmail client. Outside of the background-image issue, both AOL clients successfully rendered my test email.

Gmail will function whether or not scripting is enabled in the viewer’s browser. A warning message is displayed when scripting is disabled, encouraging you to enter with scripting enabled. But the only differences I noticed between the two modes were as follows:

  1. Ads aren’t displayed with scripting disabled.
  2. The client’s GUI exhibited minor visual variances.
  3. With scripting enabled, the entire email is printed with JavaScript.

Irrespective of scripting settings, my test email was identical in appearance. And that appearance lacked any CSS support whatsoever. Gmail takes the liberty of stripping your styles and, “respectfully,” strips any trace of CSS having been used anywhere in your document. For example, it turned this:

‹div id="EmailBox"›
 ‹div id="Box"›
  ‹div id="Title"›
   ‹h1›National Adoption Day‹/h1›
   ‹h2›‹a href="url"›Learn more‹/a›‹/h2›
‹div id="Sidebar"›

into this:

   ‹h1›National Adoption Day‹/h1›
   ‹h2›‹a href="url"›Learn more‹/a›‹/h2›

Hotmail, too, strips out your styles but does retain the basic semantic structure of the document. And the primary difference between Gmail and Hotmail is that the latter supports inline styles. So, if for some horribly unfortunate reason you must ensure that your visual design is properly rendered in Hotmail, you can at least spend more time than you have available inserting inline styles.

.Mac accounts can be accessed using either the Apple Mail client or a web browser. Mail has seemingly flawless support for CSS. However, its web-based companion has a couple of major issues, depending on the browser used for access:

  1. Every email message is wrapped in a ‹font› tag, presumably to ensure that plain-text emails look pretty when rendered in their webmail client. This sounds reasonable until we want our CSS-based HTML emails to render properly. CSS properties for type selectors as children of HTML attributes should take precedence. Apple’s default browser, Safari, followed this rule. But in the extremely standards-compliant Mozilla-based browsers (Firefox and Camino) I used to test .Mac, the ‹font› tag commandeered the presentation. Helvetica is declared as the font, so if you’re using a sans-serif font in your design the damage is minimal. Alternately, you’ll need to consider how your email will render when serif fonts are converted to sans-serif.
  2. The message window is fixed to a width of 570 pixels. So if you want your email to properly render in this client, you’ll want to use either a liquid layout (variable or undefined widths) or a fixed width of less than 570 pixels.

Entourage has a peculiar problem that is solely cosmetic. It properly rendered the elements I floated but failed to apply their margin values. Margin was properly rendered elsewhere, just not in the floated elements.


HTML emails that contain semantic markup and CSS fare very well with the most commonly used email clients. And for clients that offer poor or no support, the semantic markup allows for graceful degradation. This amounts to ultimate accessibility for your intended recipients. My philosophy for internet communication is pretty simple: visual-design integrity for people with modern devices and browsers, and information integrity for everyone else. The adverse effects of forcing design integrity for everyone significantly outweigh the benefits for a very small percentage of internet users. Accessibility is king, and I believe that the system I have outlined is a good one for accomplishing just that.

This article was authored for Campaign Monitor by Mark Wyner of Mark Wyner Design, a small web design studio in Portland, OR, USA.

  • Josh Williams

    Hey Mark,

    What was your experience with Eudora? We’ve found (so far) that it pretty much has no CSS support. Thoughts?


  • Brent

    I came across this site that has great CSS information for emailers. This article goes over several email providers (not all) and gives the ins and outs on CSS and email.

  • ben scott

    i found that the tables solution was a good way to ensure things like logos come out in an email in the correct place e.g. if there is no css support at least youve got your pics and your headers as rich text.

    I also found that the mac mail takes fonts and makes them slightly smaller than other email clients, so i went for a fixed font size like pixels and this solves the problem.

    wrapping the div tags like (div.bodywork) as suggested in the listapart article also helps

    one thing to also consider is the width of the email as it will look different in the screen once you have it in an email client compared to hotmail. Hotmail and other web email solutions nearly always have a left corner navigation of at least 200 pixels, which leaves you with around 600 to reasonably play with.
    Take into consideration that a large margin on your email in the hotmail screen will start to look very strange and that it also will look strange if there is no margin in an email client (especially if you are printing)

    check my result

  • toby stokes

    Yes, hotmail does strip out styles if they’re included in the head of your document, but its perfectly valid to put the style tag inside the document body (best somewhere near the top). This avoids writing out all the styles inline

  • kevin klein

    thx mark – these are all great tips. I’m a former Tucson-ian who remembers your excellent illustrations that graced the pages of the Tucson Weekly. Who would have thought you would become a web design/CSS mensch?

  • David Hucklesby

    As Toby Stokes noted, Hotmail strips all contents of HEAD but will retain a STYLE block elsewhere. But it strips out ALL declarations of MARGIN, whether embedded or in line.

    I found all clients I tested allowed me to omit the entire HEAD as well as the surrounding BODY tags.

    Cordially, David.

  • Wesley Walser

    It’s interesting to see how much further we have come in just knowledge since the ALA article on this back in the day.

  • Dave

    Great post! My main responsibility at work is designing html emails and I have been trying to get the higher ups to approve the use of standard-based markup. I will definitely be forwarding this on to them.

  • David

    First, in reply to the comment right above me: I am a standards based junkie as well and I have even done some css based emails and I hate tables but I still don’t really see a big reason to switch to css emails from html emails if the html emails that you are creating are working fine. I mean, why switch to css and ask the “higher-ups” to switch if it means the email will be less accessible to some people?

    Nice article, had to bookmark it – Getting ready to design and build another css based email for a very picky client- I know this guy will complain and whine it doesnt look perfect in Eudora and I’ll have to pimp slap him and tell him noone uses eudora. Heh.


  • Eric

    Ummmm, you forgot to test (or perhaps you didn’t forget) Lotus Notes, which is one of the biggest corporate email systems, and also one of the worst systems for HTML email.

  • ClimaxDesigns

    All these comments are helpful to me. I am just now jumping on the ban wagon as far as standards go and just did an email yesterday with css based design. I did everything inline on a sheer whim and all the clients we tested on it looked fine. Its good to know that i can avoid inlineing the css by meremly putting the style block within the div container. very helpful indeed.

  • Rob

    Eric’s comment about Lotus Notes is on the money.

    The company I work for sends HTML-based e-mail reports to most clients, with the exception of customers who use Lotus Notes. They get the plain text version, which converts the columns of data (usually four to five columns wide) into one LONG text column.

    Has anyone successfully formatted an e-mail to a Notes recipient with HTML?

  • Prabhath Sirisena

    Thanks for the insights Mark. I did a few html emails some time ago which used CSS for positioning, and the client was okay with the stripping done by most webmail clients. However, when trying to forward the mail in Outlook, it messed up the styles (although Thunderbird held up well…) – that was the end of that design job.

    Is it possible to make html emails retain styles when forwarding? Perhaps that’s asking too much…

  • Roger Johansson

    Toby Stokes mentioned putting a style block inside the body element. It may work, but it is not valid HTML. The style element is only allowed in the head section: Header style information.

  • Jonathan Poh

    With Apple Mail, if you Forward a HTML mail it gets broken, but if you Redirect it, the html stays (mostly) intact, depending on the complexity of the underlying markup. I’m running Mail 2.02 on Mac OS X 10.4.2, but I’m sure it worked on earlier versions, just not sure how far back.

  • Tim Hill

    re: Roger Johansson; While not valid, your html design looks nice in Hotmail and the alternative is to code inline, which would be valid but would be tedious to update for longer emails. I’m not sure wearing a badge of valid html would work well with emails, just seems you would be expending alot of time and effort to have valid code while removing support for a majority base of users (while text is still there, users on the whole would be more likely to click on a html email than a text one).

    re: Mark; While i’m not sure on your first point, manual forwarding i’ve noticed in our work environment with microsoft outlook, as long as you switch off microsoft word editing for emails, when you forward they seem to work well. We’ve designed templates for the company to use in Outlook, and use css to control different Heading styles which anyone can change in their email and they don’t have to copy and paste a style from anywhere else.

  • Roger Johansson

    Tim: Right, you may need to rely on email clients handling invalid HTML. I was just noting that style elements are not allowed in the body section, which was claimed in an earlier comment.

  • J. J.

    Sorry to be so elementary, but is there an easy way to create these kinds of HTML emails in Outlook or Thunderbird, or are you assuming use of something like PHPMailer or HotCast?

  • JJ Ravgiala

    I have made a newsletter thats works in Lotus Notes

  • David Greiner

    JJ, that’s great. Care to post a link to the campaign and discuss how you went about designing the newsletter?

  • Dan H

    I work for a clothing retail company that uses Lotus Notes and regularly sends marketing html e-mails. We test on all the popular clients, and also send out tests to our people here at the office that use Notes. We’ve gotten pretty good at it, but we’re unable to get background images to work either thru css or just html. Anyone know a fix for this if there is one?

  • mroberts

    Man, I should be charging (BIG) money for this…
    I have spent hours, painful hours, coding html for Blotus Notes and have several suggestions:
    1. Always specify td widths (in at least one row, without colspans, for each table), unless you really want your 600 px table to be something like 2000 pixels wide — just wider than you can scroll to.
    2. Notes will not draw an image smaller than 12×12 pixels, so your https://www.campaignmonitor.com/assets/uploads/spacer.gif with a background color for nice clean borders will draw at a minimum of 12 px (if you didn’t specify td widths, it could be hundreds of pixels wide). You can get around this by including that nice clean border in an image at least 12 x 12. Or use table borders and live with the thicker line, which will not always be the color you want, depending upon the browser. Or just live with their crappy implementation of this.
    3. At a certain point nested tables will blow up and make your page too wide (by some small margin, like 1000 pixels). I worry and test as I go on coding a new template. But you can usually get away with 3 or 4 nested tables. (CSS standards crowd please control yourselves. Some clients think that “graceful degradation” in html-capable email clients isn’t very impressive. They say, “that’s nice but can you make it look like the comp since it does display html?”)
    4. Background images are junked.
    5. It puts a border around the first link… nothing to do about it.
    6. It will choke on different combinations of rowspans and/or colspans, some you can get away with, but others not. Sometimes you have to start a new table (for now apparent reason!!!), but sometimes it will insert a paragraph break before that table, usually not… it’s hard to predict.
    7. I doesn’t give the normal paragraph (ie, vertical) spacing to unordered lists. I usually just live with this – I’m not formatting the list in a nested table if I can help it.
    8. It can’t handle links down the page. So if you have links at the top of your email that go to sections further down the email, it will try to open the link in a browser. This one really gets me. You either have to live with it or link them to an online version of the email.

    So many if its behaviors just make me cry out “why oh why oh why oh why….” Messing up anchor links going down the page – perhaps the most basic html connectivity function — there is just no excuse for. Not drawing one pixels images? How did this pass any round of testing/approval??? Sigh… Since there are many fudge factors, it takes a few rounds of testing to get a new template just right. It will listen to text styles pretty well, but I haven’t gotten any fancier with css and Notes… And many of the issues go away if you use its webmail in IE.

    Good Luck.

  • mroberts

    Oh, one more thing, if you are using jump pages for metrics purposes, but print a full url (with the http:// ) it will link straight to the url printed and ignore what is in the href attribute of your anchor tag. Ain’t that cute!

  • hvogt

    Does anybody know if there are any statistics about the usage of the different mail clients? How many mac users are using Entourage, Apple Mail or other clients? Thanks for any hint.

  • qlic

    I also would like to know about any statistics about the usage of the different mail clients. This would be of great help

  • Dave Greiner

    Firstly, mroberts – thanks so much for the comprehensive information on the many quirks in Lotus Notes. That’s a scary number of faults to cater to.

    In regards to email usage statistics, there’s a suprising lack of recent statistics available online. Here are a few places to start:

    Survey of E-Mail Format Preferences and Programs – Web Marketing Today (2003)

    Real-World Email Client Usage: The Hard Data – Clickz (2002)

    This one certainly deserves more attention, so if anyone knows of any other interesting statistics, please add them. If any more surface I’ll be sure to add them here too.

  • Jono

    About Yahoo and xposition
    “Yahoo Mail does, however, attack with irreparable damage when it comes to positioning. Just as ãbodyõ becomes ãxbodyõ, ãpositionõ becomes ãxpositionõ. Unfortunately, I was unable to find a workaround for this issue…”

    It’s a long shot, but would this work to position a header:

    h1 {
    position: absolute;
    top: 10px;
    left: 25px;
    /* for yahoo */
    xposition: absolute;
    top: 10px;
    left: 25px;

    It’s not valid, but maybe Yahoo would see it and like it, OR maybe Yahoo would just render it as:

    h1 {
    xposition: absolute;
    top: 10px;
    left: 25px;
    /* for yahoo */
    xxposition: absolute; /* Yahoo adds another “x” to “xposition”
    top: 10px;
    left: 25px;

    I’m curious, did you try that? It is a definite no-no, but it could possibly work?

    Maybe even using multiple classes:

    h1.allClients {
    position: absolute;
    top: 10px;
    left: 25px;
    h1.yahoo {
    xposition: absolute;
    top: 10px;
    left: 25px;

    Then in the html apply – class=”allClients yahoo” – to the h1 tag in hte html.

    I canít remember if email clients support multiple classes, Iíll have to go back and check the ALA article. I cannot currently test this, but if anyone can, I’d be interested to see how it works out?

  • Dave Greiner

    Further to mroberts info about Lotus Notes and HTML email, this article is definitely worth a read also.

  • Johan De Silva

    This is really good. CSS is pain for me though because I cant get it to look good in Outlook by simply copying and pasting so that my boss can see a preview before it goes out.

  • Dave Greiner


    You should use our Test Campaign Design tool for this one. Just copy and paste the URL of your design, enter your bosses email address and click send, it’s free and that easy.

  • Heather

    We have a problem with Virgin ISP, they block all our html email campaigns. Has anybody else come across this problem with Virgin?

  • Neo Vertigo

    Thanks for the insights Mark. I did a few html emails some time ago which used CSS for positioning, and the client was okay with the stripping done by most webmail clients. However, when trying to forward the mail in Outlook, it messed up the styles (although Thunderbird held up well…) – that was the end of that design job. It’s my site: world news

    Is it possible to make html emails retain styles when forwarding? Perhaps that’s asking too much…

  • adrock

    this is cool and all but what if i have a black bg with white font? It will not print the words, given that the css is embedded how can i resolve the print issue without having to sacrifice the design?

  • peter

    there must be away to get background images to work
    when i specify them in teh tag they work but only in yahoo
    Its driving me nuts

  • James Touhey

    No disrespect Mark but I checked out your code in the sample download and it really seems like you have a lot of unnecessary markup for such a simple email. What’s the deal? Are you totally against recycling your classes or using a header image and hiding your h1 tag? I suppose it’s the efficiency factor i’m looking at.

  • Dan

    Yes, hotmail does strip generic viagra out styles if they’re included in the head of your document, but its perfectly valid to put the style tag inside the document body (best somewhere near the top). This avoids writing out all the styles inline

  • Pavel

    I required for your CSS on my site http://www.gadaem.com.
    Thank you!

  • Cheget

    Survey of E-Mail is an extremley informative resource…

  • Suhail

    I’ve been experiencing a problem with Hotmail where HTML entities are displayed, but with a strange character (¬ – a circumflex accent I think) before it. Has anyone else experienced this problem? When I view source, the ” ” and “£” have been converted to spaces and pounds and there’s no accent character! Any ideas?

  • El. Brus

    During the transfer of any kind of information there are a sender, a channel and a receiver. A channel (language, email clients, html protocol, etc.) may cause an information loss or its distortion. So, if it is important for a sender how his message will be understood, he HAS to know the possibilities of receiving party. And this is the main problem – you have to know the exact email client and itís version to be sure. In words of mobile world: ìIf you want to get the right answer, learn how your girlís mobile shows this smileyÖ??
    Regards El. Brus from….MantaCorp

  • Jeremy Zawodny

    Thanks for the insights Mark. I did a few html emails some time ago which used CSS for positioning, and the client was okay with the stripping done by most webmail clients. However, when trying to forward the mail in Outlook, it messed up the styles (although Thunderbird held up well…) – that was the end of that design job.

    Is it possible to make html emails retain styles when forwarding? Perhaps that’s asking too much…

  • sermad

    Re Lotus notes and mroberts

    Sir I cannot thank you enough. The 12pixel issue WILL happen to you all so please bear this mind. You’ve saved me countless hours of misery. Thankyou.

  • Kirill Kolenchits

    I work for a clothing retail company that uses Lotus Notes and regularly sends marketing html e-mails. We test on all the popular clients, and also send out tests to our people here at the office that use Notes. We’ve gotten pretty good at it, but we’re unable to get background images to work either thru css or just html. Anyone know a fix for this if there is one?

  • jumptronic

    Background images will not display in Lotus notes (6.5). However, BG colors will. Others around the office (myself included) have tried to figure a way to get background images to display…to no avail.

  • Alex Stacey

    Some useful info here thanks! I’ve been building and testing a new email campain and trying to make it look the same in Opera’s M2 email client and Gmail and Hotmail as these are the 3 main ones I use. I still have the joys of testing in some of the others to look forward to!

    Anyway, an interesting thing about Opera’s M2 client is that it squashes images width by about 10px if they are contained in a div. I have spent about 2 days working on this now and have finally realised what was happenning and have taken the header and footer graphics outside of any divs and it displays fine.

    Then I had to play around with the padding on a containing div to overcome the strange thing Hotmail does when it strips all margin tags. (Why have they done that? i don’t get it)

    Anyway, just thought i’d share my little find for what it’s worth.

    Alex =]

  • andipandi

    thank you for the great articles… I tried the tricks of making sure I had div#id and p.class specified, moved the styles to within the body, and still hotmail and gmail refuse to obey. I’m about ready to give up and use tables, especially since I just found out that the end user is going to take my carefully coded css file, open it in word, and edit and send the email that way… ::cries::

  • andipandi

    also, I downloaded your file and was deeply chagrined to find that your css doesn’t have to do any of those tricks, yet displays excellently in all but hotmail and gmail. hotmail refuses to receive it though.

  • andipandi

    keep thinking of more things to add:

    best browsers for compliance I’ve found so far, .mac webmail, entourage, and surprisingly, aol webmail. Who’d have thought that aol would be on top of this??!

  • Chris

    My personal choice is plain text every time but marketing managers are always asking for it to look cooler. Not, I may hasten to add because of a potential uplift in sales, but because they get to stick a nice picture into the monthly report.

  • Jezza_J

    I’ve just changed company where I am now enjoying the delights of Bogus Notes 6.0 and have been tasked with building HTML campaugns. By using css I have managed to get the email rendered correctly but am still seeing issue’s with displaying of images.

    I have had varoius people tell me that Notes 6.0 will not display images, can anyone confirm this before I spend hours trying.

    In addition, if it can support images, can anyone point me in the right direction as to how to do this……

  • Wendi

    Lotus Notes will display images and I found an excellent article of steps you can take to ensure that images are displayed. We tried it here at our company and it solved an issue they’ve been having for ages that even Lotus Notes support couldn’t help them with. Check it out HERE!

    Thanks for this great resource – it’s been a valuable source of information for me in trying to create HTML email campaigns that works across most if not all platforms. :)

  • Jezza_J

    Thanks Wendi, this is great stuff…

  • cwilson

    How to fix CSS in Outlook:

    My company is sending out HTML emails using inline CSS (these emails are dynamically generated through a website). The recipient of the email will then forward the generated email to their customers.

    The problem we were coming across is that when they were forwarding the emails with Outlook, it was stripping the CSS (background images). The solution we found was to go into Tools-Options-Mail Format and unchecking the “Use Microsoft Office Word 2003 to edit email messages” option. Now the table backgrounds display correctly.

    This will allow you to keep the CSS in emails that are forwarded (or sent in general)

  • Clare

    That is very important. But did you hear about the last CSS in HTML emails???

  • cwilson

    No. What are you referring to?

  • sheepi

    Thanks for all, the ZIP file too. But, what can I do with a PHP? I can see it in Dreamweaver and the IE. You forgot to tell us newbies how to put this into my Outlook to try a test email. Attachment doesn’t work. Copy, paste doesn’t work. You forgot to tell how to use the ZIP file.

  • Dave Greiner

    Sheepi, sign up for a free account and you can test your modified zip file for free.

  • Stephane Gregoire


    Thanks for this article. and thanks to ben scott for the position of the style tag in the body.

    Now, the new Yahoo delete the body tag!

  • Aled


    Great article! Managed to convince my boss to stop nagging me to get the HTML emails looking better in gmail with your bit about it.


  • cwilson

    Sheepi: If you are trying to have a PHP file run in Outlook it won’t work. PHP, like all server-side languages, requires a web server that converts the code into something useful, like HTML. If I’m understanding you correctly, you’ll have to come up with another solution.

  • Nocturnal

    Any idea if there is a way to have Outlook use a specific style sheet to render all incoming HTML e-mails? If anyone knows, could you shoot me an e-mail at nocturnal@REMOVEsupz.net? Thanks!

  • Stas

    “Any idea if there is a way to have Outlook use a specific style sheet to render all incoming HTML e-mails? If anyone knows, could you shoot me an e-mail at nocturnal@REMOVEsupz.net? Thanks!”
    NO ideas:(

  • Stas

    But I know man who can help us

  • Yaron

    Thanks for this very informative info everyone.

    Does anyone know if there’s a way to create a clickable button (Form button, Table cell, etc) in an HTML email without having ESPs or clients strip out the code. I’m using “onClick” javascript and it gets blocked (dead button).

  • HTML Help Guy

    I think some HTML emails have definite legitimate uses.

    The spam problem is so rampant, however, that’s it’s hard for many to overlook.

    but that’s a very informative article and a good read.

  • Craig Hoffmann

    My first post to any board – I have an HTML email that a freind created for me that I send to my cycling buddies to alert them to our weekend rides. The email was created on a PC. Now that I am 100% mac, when I forward the email and then try and edit, the email formatting is pretty messed up. Is there an easy fix as I don’t understand most of the direction you give in the posts above. Thank you…Craig.Hoffmann@mac.com

  • Scott Haines

    I have been reading over everyone’s posts and I think that in general HTML based email is slowly becoming a thing of the past, people are going to need to begin the slow and ugly process of upgrading ideas and processes to today’s standards. Although most email clients don’t render the CSS emails perfectly, think about how many email clients won’t show anything at all including images, this is an ugly battle because of Spam filters and Serious Junk Mail filters, if we continue to fight the good fight as designers and programmers we will always lose to about 45% of people in our email marketing. We have to accept this as inevitability, it is like a designers fight against Internet Explorer, with all of the new standards being laid down by the W3, we have microsoft years behind, so I guess in the same way, we as designers will always suffer the wrath of companies that don’t realy on standards and yet rather on what will get the next release out quicker and for the least amount of money. newfront

  • Crystal

    Great info. Thanks to everyone who commented. As usual, differing standards make our jobs a pain in the rear, but what can you do? :)

  • GonabesJohn

    My company is sending out HTML emails using inline CSS (these emails are dynamically generated through a website)

  • Kel

    Just an update re: Eudora Mac currently in beta testing for an update to version 6.x. (Also to note, Eudora 7 for Mac IS due to arrive eventually…) The current version of Eudora Mac 6.x adds a menu item to view html emails in a browser (Safari being the default, under 10.3 and higher), which works fine. Otherwise Campaign Monitor and MailBuild emails (with or without a text version) generally render as rich text with images inline. There is no real css positioning support (hence the need to view in a browser) and many folks I know keep Eudora’s images turned off by default.

    I expect Eudora’s next Mac version 7 to be “decent” to html emails as they suggest Eudora will use WebKit for both display (and Authoring).

    Hope that helps.

  • Pawel

    Nice article.
    And what with clients using thunderbird, not an outlook?

  • Fafo

    In my little test with CSS, Hotmail present a rare behavior in his interface:

    http://www.clowngroup.com.ar/test/hotmail.jpg paragraph test.


    Text A1
    Text B1

    Text A2
    Text B2


  • Fafo

    Sorry, the original code is here: http://www.clowngroup.com.ar/test/test2.html

  • Lee

    From what one of my colleagues tells me, Lotus will support background images on the Body tag using styles, e.g.

  • rahim haji

    Hi All,

    i am running a PHP site with the mail() function, however it seems that users with hotmail accounts can not get the emails sent from the site, there include registration emails, forgot passowrd emails, order emails and newsletters. does anyone have any ideas on how to get around this?

    any help would be greatly appreciated.


  • raz

    i also need help with hotmail issues and yahoo, we are working on http://www.webtrendz.co.uk, and http://www.pleaseure2me.co.uk

    we can not seem to send emails to yahoo and hotmail users, the emails do not even reach the spam filters…. pls help

  • Charlton

    I have downloaded the example zip file, extracted on Mac OSX. It is real good looking in Dreamweaver MX 2004. But I am wondering how am I suppose to do with entourage email system, how can I import the html page with good layout into the email?


  • Kel

    Interested in seeing an update to this post cnsidering the new Outlook in Vista…

  • kalechi

    Lotus Notes: it uses IE for the rendering (until R8) so blame MS. Release 6.5 & 7 do a decent job at formating html emails. I found tabled based email design worked the best. images that are passed as a url work better then embedded which sometimes get pulled and added as attachments.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free