Tags:







html email: css or not css?
December 5, 2005 12:30 PM   RSS feed for this thread Subscribe

I am working on an application that will send an html-newsletter. It looks great in thunderbird or Outlook, and like crap in Gmail or Hotmail, which a lot of the recipients use. The template uses css, which is included in the headers of the message (not linked). What is the common wisdom about html-email that looks good in Hotmail and Gmail? Is there any way to keep the CSS or do I have to start over from scratch?

I really, really don't want to discuss whether I should be sending html-mail or not.
posted by signal to computers & internet (11 comments total) 2 users marked this as a favorite
Interestingly enough, this article says that you should link to the CSS, rather than include it...

It looks like a good overview of your problem and good advice on CSS in email.
posted by twiggy at 12:41 PM on December 5, 2005


From the article linked by twiggy:
I recommend carefully considering how far you want to go to accommodate Hotmail’s ineptitude, because the following method adds the <strong> tag to "dedication" and "diligence.' Since the <body> tag and everything preceding it are gone, the only remaining method for applying CSS is Inline. Inline styles are inefficient and tedious, and I’m sure you’d "rather be golfing," but it works. If you expect heavy Hotmail use by your intended audience, you can use this method to help ensure success. But if Hotmail is not an issue for you, you can skip this step and instead take care of the important things in your life, like eating and sleeping.
I've sent many CSS-ified HTML emails with varying degrees of success, and can now say with 100% certainty that the only way to ensure your styles get applied is to style absolutely everything inline. So you might as well use <font> and be done.
posted by Ridge at 1:35 PM on December 5, 2005


Yes, Ridge is pretty much spot-on. The belt-and-braces approach is to style everything inline. A lot of webmail systems strip out the HEAD so you may have some success including your CSS definitions within the body.

Mailchimp provide an excellent guide to HTML emails - PDF, 300k.
posted by blag at 2:00 PM on December 5, 2005


Also, once you're settled on the CSS issue, this article has some good tips on making sure email is designed with web and client-based email readers alike. Tips on image v. text usage and placement of most important information with things like the Outlook preview pane in mind. via Lifehacker.
posted by superfem at 2:12 PM on December 5, 2005


The CSS-discuss wiki has a useful list of specific mail client quirks (although Gmail, which will eat your css for breakfast, is missing). There's a Sitepoint article that's worth checking out in addition to those already mentioned.
posted by amestoy at 2:41 PM on December 5, 2005


Thanks for all the tips. I'll look into them and let you know what works.
Any more advice is welcome, of course.
posted by signal at 5:00 PM on December 5, 2005


I've found Campaign Monitor to be fantastic for sending HTML emails, or newlsetters.

Campaign Monitor has a clean, usable interface, intuitively handles subscriber management, allows clients to obtain reports on their campaigns and doesn't mangle my standards compliant XHTML and CSS. It also responsibly handles bounces and advises on how to avoid sending an email campaign that may be mistaken as spam.

It's fairly cheap too. From memory it is $5 plus 0.01c per subscriber to do a mailout.
posted by davem at 6:27 PM on December 5, 2005


Can you send a PDF or post the website somewhere and send a link?
posted by unixrat at 6:49 PM on December 5, 2005


The article on ALA bugs me a bit. What the author seems to be doing is addressing a few workarounds for a handful of specific problems, dismissing hotmail as hopefully unworthy of attention, and moving on to concluding "Look! You CAN do CSS in email! See? The conventional wisdom is wrong!"

Read what he says about hotmail. Or better yet, take a look at the CSS-discuss wiki link that amestoy references. Scroll down to the hotmail section. Note that they mention that hotmail will strip any positioning and margin information.

If you expect you'll have any hotmail readers who mean something to you, this basically destroys CSS as a general approach for email layout, and it was about the time that I discovered this information that I quit trying to use it thusly and ended up much happier.

The situation with email readers and CSS is like the current undesirable situation with cross-browser issues, except several orders of magnitude worse. The list of issues on the CSS-discuss wiki is not complete. I spent a few days, for example, discovering that unless you specify font sizes in points, Mail.app under Jaguar might choose to render certain passages of text in unreasonably large type sizes. Hotmail doesn't recognize background-image. Gmail doesn't like block-level floats. Outlook for the web was gratuitously stripping out this or that. And heaven help you if the client you're putting this together for wants it all to *print*.

What we came to where I work was largely going back to a blend of HTML 3.2 and HTML 4.0 era practices. A table-driven layout approach (avoiding nesting where we could), and the styled font tag (or font around span) technique on the CSS-discuss wiki link. Later, the company we partnered with on this (Constant Contact) developed an add-on to their engine that would take a given stylesheet for a document, and inline all classes, *and* do the styled font tag trick automatically. This is a real boon; if you can find or build something like it, I highly recommend it. It gives you some of the most important advantages of CSS (the ability to make changes one place and have them reflected across the document), it gives the reader the pretty, pretty document that management wants them to have. And accesibility? Provide a plain text alternative.

This is one of those areas where mixing CSS into your kool-aid (rather than viewing it as a tool in a toolbox which you've evaluated the strengths, merits, and limits of) will get you in trouble. Approach with caution. Use it for styling text, with some fallbacks, put as much stuff inline (either by hand or automation) as you can, and make sure you test on the platforms that are important to you.
posted by weston at 6:50 PM on December 5, 2005


Ok, here's what I went with: I tried putting the [style] tag inside the [body] tag, and that worked like a charm for hotmail and yahoo, the only thing missing was background images (I'm not using positioning). Gmail, however, was still all bitchy and stuff, so I wound up copying each element's style declaration into its tag ([h1 style="...), which, while ugly and a pain in the ass, solves the problem.
Thanks everybody, you where all a big help. I'm marking Ridge as best because he was the first to suggest what I actually ended up doing.
posted by signal at 5:08 PM on December 6, 2005


Campaign Monitor has a sequel to the A List Apart article. Their articles and tips have some good information.
posted by kirkaracha at 10:43 AM on December 7, 2005


« Older I have two UPS boxes (APC CS 5...   |   I need help locating a screen ... Newer »
This thread is closed to new comments.