Browse by...
Home Resources Blog

Blog Post

A Guide to CSS Support in Email

Update: This study has since been superceded by the new and improved 2008 Edition Since the rise of Internet Explorer, web designers have had to test their designs across multiple web browsers. No one likes it, but we’ve all copped it on the chin, written a few hacks and moved on with our lives. After all, 3 to 4 browsers aint that bad – and they finally seem to be getting their act together. If Internet Explorer is the schoolyard bully making our web design lives a little harder, then Hotmail, Lotus Notes and Eudora are serial killers making our email design lives hell. Yes, it’s really that bad. Inspired by the fantastic work of Xavier Frenette, we decided to put each of the popular email environments to the test and finalize once and for all what CSS is and isn’t supported out there. We’ll dig straight into our recommendations based on what we found, followed by the results themselves with a few more details about our findings. Recommendations Because of the huge variation of support across each email environment, there really isn’t any one design approach that will guarantee consistency. Instead, you should take a couple of things into account. 1. The consistency demands of your client If you have a client who understands the challenges you face and realizes that some email environments are just plain old broken (we can always dream), I recommend going for broke and following Mark Wyner’s recent article on CSS design in email (we even include a free template to get you started). This allows you to code your email using moderns standards based design that degrades gracefully for these “broken” email environments. On the other hand if your client demands consistency no matter what, or the CEO’s using Lotus Notes, you’ll have to dull down your design, stick with tables for layout and use only basic text formatting via CSS. You may even have to go down the inline CSS route. 2. The potential email environment of your recipients You’ll probably need to generalize a little here, because most of us have no idea what email environment each recipient is using. Business to Business If you’re sending Business to Business (B2B) emails, you’re definitely going to have to support Outlook and to a lesser extent Lotus Notes. In a recent survey of B2B readers, EmailLabs found that more than 75% use a version of Outlook and a further 9% use Lotus Notes. The good news is that Outlook’s support for CSS is quite good, but Notes’ certainly isn’t. You’ll need to weigh up the trade-offs yourself there. Business to Consumer If you’re sending Business to Consumer (B2C) campaigns, then you’ll definitely need to have Yahoo!, Hotmail and possibly AOL covered. Gmail’s still purring under 5% total penetration, but if you’re targeting early adopters then this percentage will likely be significantly higher. Yahoo and AOL offer very respectable CSS support. Hotmail isn’t too painful provided you include your <style> element in the <body> and not the <head>, while Gmail gives you no choice but to use inline styles only. Further to these concerns, there’s also the issue of image blocking and preview panes, but that’s a whole other article. Results Down to the nitty gritty. To cover each email environment, we’ve split our results up into web-based, PC and Mac email software. Use the links below to jump straight to the respective findings. Web-based results – Gmail, Hotmail, Yahoo! and Windows Live Mail PC results – Outlook 2003 and Outlook Express, Lotus Notes, Thunderbird Mac results – Mac Mail, Entourage, Eudora Web-based Xavier covered the web-based email environments perfectly, but we decided to throw Microsoft’s new Windows Live Mail into the mix to gaze into the crystal ball and see if Hotmail may have a brighter future. The biggest improvement we found being support for the <style> element in the <head> of your page. The <style> element The standard place for the style element is in the <head> of the document, but to ensure the styles appear in Hotmail, you can also insert them within the <body>. We tested both, just to make sure. Web-based support for the <style> element Gmail Hotmail Yahoo! Mail Windows Live Mail <style> element in the <head> No No Yes Yes <style> element in the <body> No Yes Yes Yes The <link> element The <link> element is used to reference a separate CSS file. Web based email environments offer no support for this element, so I recommend playing it safe and sticking with the <style> element for your CSS. Web-based support for the <link> element Gmail Hotmail Yahoo! Mail Windows Live Mail <link> element in the <head> No No No No <link> element in the <body> No No No No CSS Selectors Selectors are used to “select” specific elements on a page so that they can be styled. Besides Gmail, most web-based email environments offer pretty good selector support. Web-based support for CSS Selectors Gmail Hotmail Yahoo! Mail Windows Live Mail * No Yes Yes Yes e No Yes Yes Yes e > f No No Yes No e:link No Yes Yes Yes e:active, e:hover No Yes Yes Yes e:focus No No Yes No e+f No Yes Yes No e[foo] No Yes Yes No e.className No Yes Yes Yes e#id No Yes Yes Yes e:first-line No Yes Yes Yes e:first-letter No Yes Yes Yes CSS Properties CSS property support ranges from very good (Yahoo!) down to so-so (Gmail). If you want results in Gmail, you’ll need to do your styles inline (<p style="...">this is pretty now</p>) rather than via the <style> element. Web-based support for CSS Properties Gmail Hotmail Yahoo! Mail Windows Live Mail background-color Yes Yes Yes Yes background-image No Yes Yes No background-position No No No No background-repeat No Yes Yes No border Yes Yes Yes Yes border-collapse Yes Yes Yes Yes border-spacing Yes No Yes No bottom No Yes Yes No caption-side Yes No Yes No clear No Yes Yes Yes clip No Yes Yes No color Yes Yes Yes Yes cursor No Yes Yes Yes direction Yes Yes Yes Yes display No Yes Yes Yes empty-cells Yes No Yes No filter No No Yes Yes float No Yes Yes Yes font-family No Yes Yes Yes font-size Yes Yes Yes Yes font-style Yes Yes Yes Yes font-variant Yes Yes Yes Yes font-weight Yes Yes Yes Yes height No Yes Yes Yes left No Yes Yes No letter-spacing Yes Yes Yes Yes line-height Yes Yes Yes Yes list-style-image No Yes Yes No list-style-position Yes No No Yes list-style-type Yes No Yes Yes margin Yes No Yes No opacity No No Yes Yes overflow Yes Yes Yes Yes padding Yes Yes Yes Yes position No No No No right No Yes Yes No table-layout Yes Yes Yes Yes text-align Yes Yes Yes Yes text-decoration Yes Yes Yes Yes text-indent Yes Yes Yes Yes text-transform Yes Yes Yes Yes top No Yes Yes No vertical-align Yes Yes Yes Yes visibility No Yes Yes Yes white-space Yes Yes Yes No width Yes Yes Yes Yes word-spacing Yes Yes Yes Yes z-index No Yes Yes No PC Aside from Lotus Notes, all our PC-based email clients behaved very well. All versions of Outlook, Outlook Express and AOL 9 use Internet Explorer to render their emails, so some selectors weren’t supported. This also means you’ll still need to allow for the range of CSS problems IE introduces. Thunderbird scored beautifully. The <style> element Perfect support except for Lotus Notes, which ignores the <style> element altogether. PC support for the <style> element Outlook 2003/OE AOL 9 Lotus Notes Thunderbird <style> element in the <head> Yes Yes No Yes <style> element in the <body> Yes Yes No Yes The <link> element The <link> element is very well supported on the PC, the only shortfall being that your remote CSS file will not be loaded if images are also disabled. Once images are enabled, your CSS will also load correctly. PC support for the <link> element Outlook 2003/OE AOL 9 Lotus Notes Thunderbird <link> element in the <head> Yes Yes Yes Yes <link> element in the <body> Yes Yes Yes Yes CSS Selectors Thunderbird scored highly, but because the majority use IE to render your email, selector support is limited. PC support for CSS Selectors Outlook 2003/OE AOL 9 Lotus Notes Thunderbird * Yes Yes No Yes e Yes Yes No Yes e > f No No No Yes e:link Yes Yes No Yes e:active, e:hover Yes Yes No Yes e:focus No No No Yes e+f No No No Yes e[foo] No No No Yes e.className Yes Yes No Yes e#id Yes Yes No Yes e:first-line Yes Yes No Yes e:first-letter Yes Yes No Yes CSS Properties You can have a field day as long as you’re not sending to Notes. It offers dismal property support that includes only very basic text manipulation. PC support for CSS Properties Outlook 2003/OE AOL 9 Lotus Notes Thunderbird background-color Yes Yes No Yes background-image Yes Yes No Yes background-position Yes Yes No Yes background-repeat Yes Yes No Yes border Yes Yes No Yes border-collapse Yes Yes No Yes border-spacing No No No Yes bottom Yes Yes No Yes caption-side No No No Yes clear Yes Yes No Yes clip Yes Yes No Yes color Yes Yes Yes Yes cursor Yes Yes No Yes direction Yes Yes Yes Yes display Yes Yes Yes Yes empty-cells No No No Yes filter No No No No float Yes Yes No Yes font-family Yes Yes Yes Yes font-size Yes Yes Yes Yes font-style Yes Yes Yes Yes font-variant Yes Yes No Yes font-weight Yes Yes Yes Yes height Yes Yes No Yes left Yes Yes No Yes letter-spacing Yes Yes No Yes line-height Yes Yes No Yes list-style-image Yes Yes No Yes list-style-position Yes Yes No Yes list-style-type Yes Yes Yes Yes margin Yes Yes No Yes opacity No No No Yes overflow Yes Yes No Yes padding Yes Yes No Yes position Yes Yes No Yes right Yes Yes No Yes table-layout Yes Yes No Yes text-align Yes Yes Yes Yes text-decoration Yes Yes Yes Yes text-indent Yes Yes No Yes text-transform Yes Yes No Yes top Yes Yes No Yes vertical-align Yes Yes No Yes visibility Yes Yes No Yes white-space No No No Yes width Yes Yes No Yes word-spacing Yes Yes No Yes z-index Yes Yes No Yes Mac While Mac Mail and Entourage offer fantastic support across the board, I wasn’t surprised to find that Eudora refused to come to the party. Basically, Eudora sucks. The <style> element Go for it, just ignore Eudora. Mac support for the <style> element Mac Mail Entourage Eudora <style> element in the <head> Yes Yes No <style> element in the <body> Yes Yes No The <link> element Same old story, no Eudora. Mac support for the <link> element Mac Mail Entourage Eudora <link> element in the <head> Yes Yes No <link> element in the <body> Yes Yes No CSS Selectors Mac Mail support was fantastic and Entourage was a close second. Mac support for CSS Selectors Mac Mail Entourage Eudora * Yes Yes No e Yes Yes No e > f Yes Yes No e:link Yes Yes No e:active, e:hover Yes Yes No e:focus Yes Yes No e+f Yes No No e[foo] Yes No No e.className Yes Yes No e#id Yes Yes No e:first-line Yes Yes No e:first-letter Yes Yes No CSS Properties Property support was also top notch, except for Eudora, with no property support whatsoever. Mac support for CSS Properties Mac Mail Entourage Eudora background-color Yes Yes No background-image Yes Yes No background-position Yes Yes No background-repeat Yes Yes No border Yes Yes No border-collapse Yes No No border-spacing Yes No No bottom Yes Yes No caption-side No No No clear Yes Yes No clip Yes Yes No color Yes Yes No cursor Yes No No direction Yes No No display Yes Yes No empty-cells Yes No No filter No No No float Yes Yes No font-family Yes Yes No font-size Yes Yes No font-style Yes Yes No font-variant Yes Yes No font-weight Yes Yes No height Yes Yes No left Yes Yes No letter-spacing Yes Yes No line-height Yes Yes No list-style-image Yes Yes No list-style-position Yes Yes No list-style-type Yes Yes No margin Yes Yes No opacity Yes No No overflow Yes No No padding Yes Yes No position Yes Yes No right Yes Yes No table-layout Yes Yes No text-align Yes Yes No text-decoration Yes Yes No text-indent Yes Yes No text-transform Yes Yes No top Yes Yes No vertical-align Yes Yes No visibility Yes Yes No white-space Yes Yes No width Yes Yes No word-spacing Yes Yes No z-index Yes Yes No   We hope you find these results helpful. Let’s hope that as browsers move forward, ISP’s and email client developers follow suit. It’s our sanity at stake here, right? UPDATE: After an oversight pointed out by Lachlan Hunt, we’ve scaled back Eudora’s CSS support to nil, zilch, zero.

Blog Post

Fix: Japanese Characters in the Subject Line

A few customers were recently having a problem using Japanese in the subject line of their campaigns. Testing for problems with a language you don’t speak is always going to be a little tricky, so I want to give a big thanks to Jeremy Hedley who’s been extremely helpful in nailing a few issues with Japanese campaigns (even going as far as testing the results across multiple platforms and email clients). So, thanks to Jeremy’s help, subjects with Japanese characters should work fine now – but please be cautious, a number of email clients won’t handle the characters properly. Based on the results of our tests using default settings, the following email clients DO NOT display Japanese correctly in the subject line: Outlook Outlook Express Hotmail (basic US account) Yahoo! Mail (basic US account) Eudora (PC version only) Lotus Notes The following email clients DO support Japanese characters in the subject line: Gmail Mac Mail Eudora (Mac only) Microsoft Entourage Mozilla Thunderbird Unfortunately the problem isn’t going to go away for good until support for these characters is added to many of the popular email platforms.

Blog Post

The Best Christmas Emails of 2005

Check out some of the coolest and most original Christmas emails we’ve ever seen delivered.

Blog Post

What Does It Mean When a Subscriber Has Opened My Campaign Multiple Times?

There are several reasons why a subscriber may appear to have opened your email many times. It’s most often the case that your subscriber simply opened your campaign multiple times. If you’re sending interesting content, then more often than not your recient has come back to look at it multiple times. A subscriber could have a “Preview Pane” feature enabled in his or her email client. In this case, every time the campaign was clicked or scrolled to in the “Preview Pane”, the subscriber’s address displays as having opened the campaign. Find out more about how to design for preview panes. If the subscriber uses the email client to “forward” the email campaign instead of using Campaign Monitor’s Forward to a Friend feature, any subsequent opens by those recipients show as another “open” by your subscriber. The Unique HTML Opened count in your Campaign Snapshot indicates the total number of unique opens for that entire campaign and does not take multiple opens into account.

Blog Post

Best Practices for Sending to an Older List

Let’s say your client approaches you to send a campaign to Old Faithful, their house list that’s slowly grown over the years but hasn’t been contacted in 12 months or so. Hell, 12 months doesn’t sound that long. You put together the creative and start sending. Things start to get ugly The campaign’s sent. 40% of your list hard bounce right from the word go. Another 25% unsubscribe immediately. Old Faithful aint what it used to be. Problem 1: 30% is a big number Here’s a scary fact. Email address churn averages about 30% every year. This means that each year almost a third of your subscriber list will have moved on to a new email address. If you haven’t sent to your subscriber list in a while, you can see how quickly they can become out of date. Problem 2: Permission doesn’t age well Even if an old subscriber hasn’t changed their address, they might not even remember being added to your list. As web designers, we often forget that registering on a web site isn’t always a particularly memorable experience for most people. If you haven’t been in touch with a subscriber for more than 12 months, chances are the permission they once gave is now worthless. The solution – a permission confirmation campaign If your list hasn’t been contacted for at least 12 months, you should consider a permission confirmation campaign. This is a simple email that includes: An explanation of how, when and where they subscribed to your list. A compelling list of the benefits of continuing their subscription and a preview of what you’ll be contacting them about in the future. If you can’t say anything compelling then you shouldn’t be contacting them in the first place. A confirmation link the user must click to confirm their subscription. The best approach is to link to a subscribe form for a brand new list. Make life easier by using personalization to automatically populate the form with their existing details. Any subsequent campaigns should only be sent to the new list. Many will argue that this method will lose you a lot of subscribers. I say that if a recipient can’t be bothered to confirm their subscription, their unlikely to be opening, reading and responding to your campaigns anyway.

Blog Post

New Feature: Linking to a Web Version of Your Campaign

While the majority of web based email environments are slowly improving their HTML rendering skills, some are still pretty far behind. I’m talking to you Hotmail and Gmail. Because of this, it can be a good idea to include a having trouble reading this email, click here link in the header of your email. If you’re sending really long newsletters, this is also a good option. Some of your recipients might prefer the screen real estate afforded by a web browser as opposed to an email client. Up until now, you had to create your own web based version and link to it manually. Well, not any more. Introducing the <webversion> tag From today, you can use a simple tag to generate a personalized link to a web based version of your campaign for every recipient. This means that even if they’re viewing the web version, we still track how many times they checked it out, what links they clicked on, etc. In your HTML code, just use the tag <webversion> and </webversion> and we’ll do the rest. For example: Having trouble reading this email, <webversion>click here</webversion>. If you’re sending a multi-part email and you’d like to include a link to the HTML version in your text version, you can use the [webversion] tag. For example: Click the link below to read this email in your browser: [webversion] The link will be to our server but will use your personalized subdomain. We’ll also be tracking the clicks on all web version links, so if you’re recipients aren’t using them, you know it’s safe to remove them.

Blog Post

Why Should I Test My Campaign before I Send It?

Since there are a wide variety of tools people use to read their email, it’s a good idea to test your campaign in several different environments before you send it. The two main types of applications people use to read their email include desktop applications, such as Microsoft Outlook Express, and web based email such as Hotmail and Yahoo!. Each of these environments render HTML emails differently and should be tested for every campaign you send. Desktop Email Applications The most common desktop email applications include Microsoft Outlook, Outlook Express and Thunderbird for the PC. On the Mac, you should be testing with Mac Mail and, depending on your target audience, Eudora. To make testing more complicated, they all come in various versions across multiple platforms. The most common problem caused by desktop applications involves the images in an email not being displayed, so it’s a good idea to check your campaign in at least a few of these applications. Web Based Email Many users also have email accounts through services such as Hotmail, Yahoo and Gmail. Using Hotmail as an example, when you view an email it is surrounded by various parts of the Hotmail interface, such as the navigation and banner ads. Some web based email accounts will even modify your email by removing any stylesheet elements you have included, so it’s a good idea to check that your email will still be displayed appropriately despite these issues. Here’s a great article to check out on designing your emails for these different email environments. The quickest way to test your campaign through Campaign Monitor is by using the Test Campaign Design tool, pictured above. This feature allows you to quickly send a preview of your campaign to any email address. If you want to send your test email to a number of addresses simultaneously, just separate them by a comma. This feature also comes in handy for sending iterations of a design to a client for approval.

Blog Post

Optimizing CSS Presentation in HTML Emails

This article is a sequel to one that appeared on A List Apart shortly after…

Blog Post

The Campaign Monitor API – Get Your Hands Dirty!

Today, after loads of testing and feedback from some dedicated early adopters, we’re excited to announce the release of the Campaign Monitor API. It’s now all too easy to integrate your Campaign Monitor account into another application. You might want to: Integrate Campaign Monitor with your favorite CRM software, automating the process of adding new customers to your subscriber lists. Drop an opt-in checkbox for any of your lists into an existing form on any web site. Put together a dashboard widget to get real-time updates on how many people have subscribed to your list today. We’ve put together plenty of documentation on each method as well as a quick overview on getting the required details from your own account. We’ll be launching a few more methods real soon, plus a few sample wrappers for different languages. What are you waiting for? Dig in and get your hands dirty, then tell us all about it!

Blog Post

Update: Synchronize Unsubscribes with Your Own Database

A few customers have contacted us asking how they can access the email address of someone the minute they unsubscribe from a list. This is usually for customers who want to synchronize a local database with their Campaign Monitor subscriber list. We’re launching a big upgrade to our API in the coming days, but this is a great solution for those less familiar with web services. This is now as easy as adding a single [email] tag to your unsubscribe confirmation URL (the address your subscribers get redirected to when unsubscribing from a form or an email). For example, you could change your unsubscribe URL to: www.mysite.com/goodbye.php?emailaddress=[email] The email address of the individual who unsubscribes will then passed into the query string of that page. For example, the subscriber [email protected] will now be redirected to: https://www.mysite.com/[email protected] This technique will work for anyone who unsubscribes via a campaign or an unsubscribe form.

Blog Post

Update: Recommended Width for Text Emails

Based on Mark Brownlow’s recommendations for formatting plain text emails, we have added a recommended width background to the textarea you guys use to enter the text content for each campaign. This makes it much easier to keep each line under the recommended 65 characters, ensuring your newsletter is easy to read in the majority of email environments. Unfortunately background images for form elements are not supported in Safari, but it has been tested successfully in Firefox, IE and Opera on the PC and Firefox on the Mac.

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.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free