css doesn’t work very well in email newsletters

As part of my work, we send our email newsletters and beyond the simple/basic formatting that I used to handle before, I’ve decided that I should pick up HTML through my work!

And while debugging the current HTML with The Husband, we wondered for the longest time why the previous person who handled it did not use CSS.

What is CSS? My ever helpful resource, w3schools.com explains as thus:

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today.

Viola! CSS! CSS solves all woes….right?

Not so fast, one thing that cropped up, whilst examining a friend’s email newsletter – formatting issues. Said friend had no idea why the formatting went haywire when she sent out her newsletter. At first I wondered if it was a problem with the email client. But upon reflection tonight, based on what I had learnt about CSS, it struck me that maybe the formatting was stored in a CSS file, and PERHAPS the email client wasn’t exactly CSS friendly.

A quick check online gave me the following results:

Groundwire advises:

Do not rely on external (<link rel=”stylesheet”>) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets.

CSS and HTML support is far lower for email than it is for the web. This article explains the pitfalls to avoid and the methods to employ in order to get email newsletters to display consistently across many email clients.
Email newsletters are more popular than ever, and everyone loves to design a rich website-like newsletter for their subscribers. Unfortunately, email isn’t the web. Your beautiful design work might look great in one email client, but chances are when you look at the same work a different email client the results will not be the same.

Why? In a nutshell, some email clients are moving away from full CSS support. CSS (Cascading Style Sheets) is the technology that allows for modern, powerful, flexible website designs. (If you don’t know what CSS is or how to use it, chances are the rest of this article isn’t for you — but show it to your email newsletter designer!)

As of early 2007, Gmail is the most restrictive as it will ignore all external and embedded style sheets. (It will support inline styles.) Worse, Microsoft’s just-released Outlook 2007 actually takes a few big steps backwards in its CSS and HTML support, opting to use MS Word as the rendering engine. (Check out Campaign Monitor’s article for the shocking lowdown!) For this reason, we consider compatibility with Gmail to be the baseline CSS and HTML support to design to. If it looks great in Gmail, chances are, it will look great in most other clients.

Mailchimp concurs:

Linked CSS files won’t always work in HTML email, so you’ve got to use inline or embedded CSS. Normally, when you code a web page, you put the embedded CSS code in between your <HEAD> tags. But lots of email applications (especially browser based ones) strip out the HEAD and BODY tags of your HTML email, so your CSS will get stripped too. Embed your CSS just above the content, below your BODY tag. If you design web pages for a living, that will probably make you feel “dirty” but trust us—it’ll work fine in your emails. A slightly safer approach would be to use inline CSS instead. Even safer? Ditch CSS altogether. At MailChimp, we use CSS to keep our sanity (it helps make cosing so much easier). But we don’t overuse it and we always make sure our emails look ok, if CSS were to fail completely. Note: Embedded CSS is not very well supported in the newer browser-based email programs, like Yahoo!Mail, Gmail, Windows Live, .Mac Mail, and AOL Webmail. Those web services tend to only allow inline CSS.

So I guess that’s some of the possible answers, answering both mine and my friend’s problem. It’s not so pretty using tables within the HTML, but I guess that’ll have to work for now…

Have you any updates regarding this?

Author: ning

Leave a Reply

Your email address will not be published. Required fields are marked *