Blog

News, tips and all things Campaign Monitor

Tip: Using CSS to ensure the best experience for your Hotmail recipients

Posted by David Greiner on April 11, 2006

This useful tip was generously contributed by Damien Buckley from Propeller, a customer of ours and a damn nice guy to boot.

A little while ago I read a great article by Mark Wyner on the use of CSS in email confirming that unless we're coding like its 1999, Hotmail (amongst other email clients) can do horrible things to our emails, mercilessly stripping out CSS and generally rendering us back to the dark ages.

Like Mark, we fully support the use of standards-based, semantic markup and the use of CSS for styling in email as well as in our websites. We can achieve some stunning results using CSS in email when viewed in clients that support it, but what I was more impressed with was the fact that the email will degrade gracefully into a nice, semantically correct rich-text email in those that don't.

Another advantage lies in using CSS image replacement techniques to display your titles in fonts other than the general web fonts. As we've seen in articles such as this - if your recipients have their images turned off and you've used just sliced and sent images only, they will basically see nothing. Using CSS replacement techniques, even with images turned off, your recipients will still get all the content, without all the table markup and you will also send lighter, faster emails.

I personally think this is a huge improvement over the exposed table framework and jumbled arrangement which can occur in certain email clients when using a half and half approach of using tables for layout and CSS for styling.

Pointing Hotmail recipients in the right direction

It did get me thinking though; when presented with the plain text version, what if the reader wants to see the email in all its glory? If you're a designer who works hard using tables and font tags etc to get your emails looking spiffy in Hotmail, then this tip probably isn't for you. If, like us, you're not prepared to walk backwards for the sake of supporting a drastically out of date system this is an easy way to get your readers to the right material.

Luckily for us the Campaign Monitor team have already done most of the hard work for us by providing the custom <webversion> tag. I'm not going to go into this tag further here as the explanation is already available, what I'm going to discuss is how to get your hotmail recipients to use it. The aforementioned article advises placing a link in the top of the email using the <webversion> tag, however your recipients are not always paying attention to such things and your email might just be heading for the trash can.

No need to be subtle

To address this problem, we're exploiting hotmail's failure to apply CSS coupled with some visual brute force to get readers to click the <webversion> link. Rather than simply placing the link text at the top of the page, we insert the following div within the body tag before the rest of the content;

<div id="webversion"> <webversion><img class="hide" src="images/hotmail.gif" alt="Hotmail Users - please click here to open in browser" /></webversion> <p>If you're having trouble viewing this<webversion> click here to view it in your browser.</webversion> To make sure you keep receiving this newsletter, please add example@example.com to your address book.</p> </div>

As you can see, we're including the recommended text offering the web version in addition to the request to add our email to their address book. We are also including the following image, wrapped in Campaign Monitor's <webversion> tag;

Couldn't be more obvious really could it? To account for other bad email clients etc, you could use some alternative wording such as "if you can see this, please click here". So, we have our subtle call to action, but how do we hide it from everyone else?

You will note from the code that we have given the image a class of 'hide'. This hooks into this CSS, placed in the <head> of the email;

<style type="text/css"> .hide {display:none;} </style>

This single line of CSS hides the image in all CSS-compliant browsers/email clients. Hotmail on the other hand, ignores the CSS rule and happily displays the image/link. Something important to remember here is that the <style> tag must go into the <head> of the document. If you place your <style> tag inside the <body> of the document, Hotmail will attempt to render the CSS and the image will be hidden as per the CSS rule.

When should you use this technique?

Generally you would only use this technique in email where you have gone the full CSS route - using CSS for positioning as well as styling. Thus, your reader's don't miss out on the content either way, they can read it as text-only or they can click through to the web version. So, there we have it, you can carry on using CSS and apply a little brute force to re-direct your Hotmail recipients to the browser-based version.

4 comments so far

Chris D

wrote on April 28, 2006 11:23 PM

I assume this applies to GMail users as well?

Damien

wrote on May 8, 2006 01:10 PM

Sorry to take so lng replying Chris but yes this works in exactly the same way in GMail so perhaps the text on the graphic should be changed to something more generic rather than just referencing Hotmail. Maybe - 'if you can see this image, click here to view in a browser'.

Briscoe

wrote on May 12, 2006 07:28 AM

Thanks David,

This was an awesome techinique that for some reason I have not considered. Awesome!

Dave Greiner

wrote on August 10, 2006 10:07 AM

Cheers Briscoe, but don't thank me, thank Damien ;) He's the mastermind behind the concept.

Got anything to add?

Stay in the loop

Prefer updates via email? Sign up below and we'll send you all the good bits each month.