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
Become a better marketer with email marketing content from the Campaign Monitor email marketing team.
As image blocking in email continues to become the norm, one absolute must is to make sure you include the width and height attributes in your image tags. When most email clients (especially desktop based ones like Outlook) disable images, they show an empty image placeholder in its place. Because these email clients don’t actually download the images from the server, the only way they can figure out the dimensions of that placeholder is to look at the included width and height attributes. If none or only one is provided, they just take a guess, which in almost every case results in completely destroying what’s left of your design. Here’s a perfect example of this in action. Just this morning I received an email newsletter that only specified the height for most images in the email, and not the width. When Outlook displayed the email, it got the height right, but was way off on the width side. Here’s how the email looked when I first opened it: To see a comparison of how it’s supposed to look, here’s a screenshot of the email with images enabled: By not including the width attribute in any image tags, Outlook had no idea what width to use and its best guess was unfortunately way off. This made an otherwise readable email a complete nightmare that was almost impossible to get anything out of. To provide a comparison, I checked out the source and added the correct width attribute to each image to see what the new results would be. Here’s a screenshot of the new version that took about 5 minutes to update: The updated version that includes all width and height attributes is a big improvement over the initial version. It clearly resembles the intended design and I can easily scan the table of contents and start scrolling to read the rest of the content. The email is completely usable even with no images being visible. While there are certainly better examples of emails designed to look and work well with images disabled, the point is still very convincing. By ensuring width and height attributes are present for all image tags, we give our subscribers a much better chance of getting a usable email, even with images disabled.
After we posted an update to the CSS Support article last week, a few of you mentioned that the new PDF layout made it hard to make out the results when printed in black and white. Not only this, but it was also a challenge for anyone who was color-blind. About the same time, Martin Focazio from New York based Magnani Caruso Dutton approached us about taking the PDF version a step further (actually, about 5 steps further). Martin reworked the results to make it much clearer which CSS selectors and properties offered the best support across the board. These were then sorted into Safe, Risky and Poorly Supported to make it much easier to decide which properties to aim for. Download the spiffy new results in PDF (91kb) or Excel (80kb) To top it off, the new file also includes the percentage of support each email environment offers. We’ve also updated the original post to include the new version of the findings. A huge thanks to Martin for all his hard work, and to everyone else for giving us feedback on the original version. As usual, we’ll keep our eyes peeled for any changes in each environment moving forward. If you spot anything, let us know. Update: I’ve added the Excel version of the results so you guys can tweak it to your hearts content.
We’re big Zeldman fans here at Campaign Monitor. His web standards work has been an important influence in our thinking as web designers and web application builders. So we were disappointed to read his recent post, E-mail is not a platform for design. The core of Jeffrey’s argument is this: But when I say HTML mail still sucks, I donâ€™t mean it sucks because support for design in e-mail today is like support for standards in web browsers in 1998. I mean it sucks because nobody needs it. It impedes rather than aids communication. Essentially Jeffrey seems to be making the mistake of equating the work of bad designers with the communication medium of email. Obviously we are going to be biased, but we’ve heard from enough of you guys, and your clients, to know that HTML email can be a great thing when done correctly. To say as a blanket statement that HTML email impedes communication is an extraordinary generalisation. There are many times when a well designed, and well laid out HTML email can be a lot clearer, easier to scan and overall better experience than the equivalent in plain text. As an example, check out the HTML email sent weekly by Threadless on the right. It’s a smart, simple layout that works in every email client out there. Instead of forcing their subscribers to click on a link to check out each new shirt via plain text, they can preview each design right in their email client. Not only is this a better user experience, but it’s also the reason more than half of their recipients click through to their web site each week. You see a design you like, you click it to find out more and make a purchase. Obviously, there is a lot of really over the top, poorly designed HTML emails being sent, but I suspect that the percentage of really badly designed websites would be pretty close to it. Should we say that all websites impede communication because most people don’t design well? Consider transactional emails, things like hotel bookings and purchase receipts. Every single instance should have a plain text alternative of course, but being able to give the key information like booking dates or serial numbers a bit of visual weight is exactly what designers should be doing – making the experience better for the person on the end. Zeldman goes on to explain: Your uncle thinks 18pt bright red Comic Sans looks great, so he sends e-mail messages formatted that way. You cluck your tongue, or sigh, or run de-formatting scripts on every message you receive from him. When your uncle is the “designer,” you “get” why styled mail sucks. It sucks just as much when you design it, even if it looks better than your uncle’s work in the two e-mail programs that support it correctly. I’m assuming that he is exaggerating for effect here because his earlier link to our CSS support in email in 2007 article clearly shows that it is possible to design emails that work well for almost everybody. For even simpler proof, checkout our gallery of email designs, many of which work in every major email client, desktop and web. Instead of trashing the concept of HTML email based on bad designers and personal preference, it would be much more constructive to continue the fantastic work on web standards in browsers and extend it to the email clients. In fact, the W3C has recently held a workshop on HTML email to investigate the issues and possibilities. We should be thinking about what is best for our readers, and not ourselves. Some people don’t want to receive HTML email, and of course, they should not be forced to. Many people prefer HTML for some uses; who are we to tell them they should not want it? Spam is bad. Shoddy design is bad, and no arguments from us. Saying all HTML email sucks based on particular usages and personal preference is also bad. We should all have learnt by now that we as web designers are not in charge of what technology is going to be used for, it’s the people at the end of the chain who get to decide that. 5 steps to better HTML emails Always send a plain text alternative. Choose “HTML and plain text” as your campaign format. Design differently for email. Good design understands the context it will be seen in. Don’t just paste in your 3 column homepage Test in different email clients. Make sure your message can be read by everyone More copy, less images. You can’t rely on images being seen in emails. Listen to your readers. Don’t base your decisions on what Zeldman tells you, or what we tell you. Listen to your customers, they will tell you what they like and don’t like. Email is not a ‘platform for design’. Email is a communication tool, and sometimes HTML can communicate better than plain text. [UPDATE] Jeffrey Zeldman has responded to our concerns with a well thought out and much more moderate post, Eight points for better e-mail relationships. It’s definitely worth reading.
If you or your clients are targeting small to medium businesses, a recent survey entitled “Optimizing Email Newsletters for Small/Medium Businesses” has some useful information for you. According to the study of over 300 executives, email newsletters rank highly as sources of information, beating out websites and blogs, and matching print media for importance. A weekly or monthly newsletter was the preferred frequency, and ‘how to’ and product information the top content areas requested. This is some more valuable information you can use to explain the benefits of email marketing to your clients. Although the study specifically focused on small to medium (less than 500 person) businesses, it would be safe to extrapolate that out to most businesses and consumers. We’d be interested to know how often you or your clients send your newsletter – have you had the best results with monthly news, or weekly? Or something completely different?
A while back we wrote about 5 ideas you can use when pitching your email marketing services to your clients. These covered ideas like showing them how easy it is to measure the results and how targeted it can be. All very useful stuff, but probably not enough focus on the most important thing in your customers minds. How will it help me grow my business? Today, one of my favourite email marketing blogs pointed me to this great article by Loren McDonald on this exact topic. While the article is penned from the perspective of selling the benefits of email marketing internally, it’s just as useful when read from the perspective of designers and marketers pitching email to their clients. Instead of focusing your next pitch on the pretty reporting interface you can offer, or how you handle unsubscribes automatically, take it from an ROI angle. Drive home how you plan to use email to drive more sales, increase conversions or achieve some other tangible benefit. Something tells me you’ll be improving your own conversion rate in the process.
As part of a check up on our updated guide to CSS support we released around 6 weeks ago, I’ve just done a quick re-test in some of the major web-based email clients to make sure the results are still spot on. Well, my first test in and I spotted some discrepancies. Turns out Windows Live Mail’s recently noted decline continues with the e:link, e:active and e:hover CSS selectors no longer being supported. These changes make it much harder to style any links in your email, and because they can only be declared through the selector, can’t be solved by going the inline CSS route. We’ve updated the original article to reflect these changes, as well as the PDF summary, which you can re-download below: Download the updated 2007 results for all email environments (52kb) We’ll keep checking each environment on a regular basis to stay on top of any minor changes, and if you guys ever spot anything amiss, don’t hesitate to let us know.
When you create a campaign with Campaign Monitor, you can select to send it in plain text, just html or multipart text+html formats. Now testing an email that is just text is pretty straightforward, and testing the html portion is also easy, but how do you see the plain text part of a multipart email? Here’s how to check what people will see if their email client is setup to show text only. Testing using Thunderbird Thunderbird is a cross platform, free email client, and it lets you easily view the plain text version of a multipart email. View / Message Body As / Plain Text Testing using Apple Mail Apple Mail has the same functionality built in: View / Message / Plain text alternative In both clients, you can swap back and forth between html and text views. Outlook: Unfortunately, there does not appear to be a way to view the plain text in Outlook. We’d suggest you just grab Thunderbird and use it to check your campaigns. Now that Campaign Monitor remembers your test addresses it’s even easier to set up a consistent test process.
Mark Brownlow just put together a great motivational piece to encourage email marketers to start sending more targeted emails to their subscribers. I loved this quote in particular, which is something I’ve heard variations of countless times before… One might get the impression that segmentation and targeting is just for those with degrees in computer science or a big fat wad of cash to throw at database vendors. I’ve seen the faces and the questions at workshops: “Ugewh! Sounds great but we don’t have the skills or resources to do that kind of thing.” Mark’s right, even basic forms of targeting are a big step forward and can lead to better results and less complaints and list fatigue. Our custom fields and segments feature makes it so damn easy to capture data about your subscribers. Combine this with our segments feature and you can create targeted sub-lists in a matter of seconds. If the quote above rings true to you, checkout this 5 minute video walkthough where we cover the simple process of adding custom fields and creating segments in your account. Targeting your subscribers doesn’t get much easier.
Last Sunday, Microsoft made an announcement about the official launch of Windows Live Hotmail, the new version of Hotmail that will be rolled out to all of their users over the coming days. This wasn’t big news, we’ve all known about the beta for a long time and covered it in detail in previous posts. However, there was one little bullet point in the press release that actually was big news to us email designers. In the coming weeks, Microsoft will introduce an additional e-mail client option for Windows Live Hotmail with the release of Windows Live Mail beta, a free consumer e-mail client available via download that will be a successor to Outlook Express and Windows Mail on Windows Vistaâ„¢. Holy crap! We’ve got a new email client to contend with people. Windows Live Mail comes to the desktop After some digging around, we tracked down an entire entry by Live Mail Program Manager Tanja Fournier about the new email client on the Live Mail blog. It’s always been a bit confusing to us. There was Outlook 2007, regular old Outlook Express, and then when Vista came we got Windows Mail. On top of this Microsoft have also been offering Windows Live Mail Desktop Beta from their Live Beta site since July 2006. Thankfully, the press release points out that this new app will be the official successor to Outlook Express and Windows Mail on Vista, and will be built on the Windows Live Mail Desktop Beta foundations. This is great news because this version, in particular, had seen loads of improvements since its release and was starting to shape up as a great desktop email client (pictured below). The new app will feature plenty of decent features like easy synchronization of Hotmail and POP accounts between the desktop and web-based versions and a cleaner, faster interface. That’s all good and well, but what are the implications for us email designers and marketers? Unsubscribe and spam complaint integration Currently, Windows Live Mail Desktop Beta (pictured above) supports the Unsubscribe functionality we mentioned here last week, reducing the chance of false spam complaints and giving subscribers another way to unsubscribe from your lists. The current beta also features integration into Hotmail’s junk mail feedback loop which already hooks directly into your Campaign Monitor reports. This means that we can report on any spam complaints made by Live Mail customers, whether they use the web or desktop version. Disappointingly, this option is off by default in the current beta, so let’s hope this is switched to the default option for the final version. What about CSS support and image blocking? We’ve done some CSS testing on the Live Mail Desktop Beta and can confirm that unlike Outlook 2007, it does, in fact, use Internet Explorer to render all HTML emails. This means it features almost perfect CSS support (yep, even position and float work nicely). The problem here is, neither the press release nor blog post mention if this will continue with the new app coming in the next few weeks. Of course, given the fact that this release will be built on top of the Windows Live Mail Desktop Beta, there’s a very good chance the same rendering engine will be used. This is further backed up by the fact that Outlook Express and Windows Mail on Vista both use the IE rendering engine already. You can breathe a tentative sigh of relief if you’re using CSS based layouts for business to consumer based emails. Like Windows Live Hotmail (that’s the web-based version if it’s starting to get confusing), it appears that the desktop version will block images by default. We also noticed an option in the preferences to show images by default for any recipients in the safe sender list or the user’s contacts, following a similar path to the web-based version. Key takeaways The new Windows Live Mail (for the desktop) is shaping up to be Microsoft’s best email client yet for email designers and marketers. You’ve got to love great CSS support combined with List-Unsubscribe functionality and feedback loop integration for spam complaints. No news yet on how strongly Microsoft will be pushing the new email client, but if it’s delivered via Windows Update as a replacement for Outlook Express and Windows Mail for Vista and promoted to all Hotmail users, this client could quickly become one of the most popular in the world. Right now we’ll have to wait and see how they play this one out. Giving consumers only one free email client (Windows Live Mail) is way better than confusing them with a choice between 4 possible alternatives. We’ve been in touch with Microsoft about getting our hands on a copy of the final version of Windows Live Mail, and will post an update here the moment we find out more.
Update This study has since been superseded. View the latest edition It’s been just over 12 months since I posted our original Guide to CSS Support in Email and quite a bit has changed since. Sadly, the most significant of these changes was in the wrong direction, with Microsoft’s recent decision to use the Word rendering engine instead of Internet Explorer in Outlook 2007. We’ve written plenty about it already including an explanation of the reasoning behind it. More on its impact on CSS support later. It hasn’t all been doom and gloom though, a number of vendors have maintained or improved their support for CSS, especially in the web-based email environment. The new Yahoo! Mail looks very promising and the old Hotmail will be making way for the new Windows Live Mail in the coming months. Desktop based apps tend to move a little slower and not a great deal has changed on that front, but traditionally they’ve been the best performers anyway. This year we added Outlook 2007, the new Yahoo! Mail and Mozilla Thunderbird for the Mac to our test suite, and also noticed some subtle changes in others. So what’s changed? Outlook 2007 No doubt the Outlook 2007 “incident” had the biggest impact on CSS support in email over the last year. Many commentators in the industry claimed the change was no big deal, that this change doesn’t really make a difference. Funnily enough, most of these comments came from the marketing side of the fence, not the design side. Understandably, most marketers and project managers couldn’t care less about this change – there are ways around it using tables and inline CSS, so who cares? Well, designers care. I wasn’t kidding when I said Microsoft took email design back 5 years. Using tables for layout is a dying art in the web design community, in fact many designers who have started CSS/XHTML in the last few years have never even coded a table based layout before. This is a good thing. CSS based emails are more lightweight, much more accessible to those with disabilities and because content is separated from presentation, much easier to dumb down for those reading email on mobile devices. This change by Microsoft means that for at least the next 5 years any designer not familiar with table based layouts will need to learn a completely different way of creating a HTML page if they want to send emails to an Outlook user. The new Yahoo! Mail On a much more positive note, Yahoo! have been putting the finishing touches on their brand new mail interface. Mark did some solid testing on the new Yahoo! Mail vs Windows Live Mail back in January, which is certainly worth a read. The exciting news is that Yahoo! have maintained their lead as the best web-based email client out there for CSS support. There are some subtle differences to the older version, which we’ve noted in our results below. Early talk from the Yahoo! camp suggests they will not be forcing all of their current users to the new platform, but instead make it the default for new customers and give existing customers the option to upgrade. Windows Live Mail It should also be noted that Windows Live Mail (the new Hotmail), which we covered an early beta of in last year’s test is rolling out in the coming months. Unlike Yahoo, Live Mail will be completely replacing the older Hotmail interface over the course of the next few months, meaning our days coding for Hotmail’s quirks will soon be over. It’s not all rosy though. In the 12 months since I last tested the Live Mail beta, they’ve dropped support for a number of key selectors and properties. As detailed in the results, a number of key CSS selectors are no longer supported. The most significant of these is e#id and e.className, which as many of you know means inline CSS will be the only way to get much of your formatting to work for Hotmail subscribers moving forward. Very frustrating. New Recommendations When I initially wrote about the Outlook 2007 shock a few months back, I said: If your email breaks in Notes or Eudora, it was often an acceptable casualty, but if it breaks in Outlook, you’re more than likely ostracizing too many recipients to justify your design approach. Unfortunately I still think this is the case. If there’s a chance that a reasonable percentage of your recipients will be using Outlook 2007, then a completely CSS based email design just won’t cut it. If your layout is column based, you have no option but to use tables for the basic structure of your email. You’re also going to need to dumb down your CSS usage (see our results below for the nitty gritty on what does and doesn’t work). Business to Business emails I wasn’t able to track down any predictions on Office 2007 penetration in the business world. Considering it was only released a few months ago, you might have some time before the install base becomes significant. Either way though, you’re going to get caught eventually. Considering Outlook’s 75% domination over corporate email, you’ve got little choice but to bow down and stick to tables and basic CSS for all your email templates. The verdict: Table-based and possibly inline CSS. Business to Consumer emails Across the spectrum of consumer based email environments little has changed really. Yahoo! has maintained their position as the industry leader, while Hotmail has simply been replaced with new wrapping but next to no improvements. Just like last year, Gmail still provides very limited CSS support. If you’ve got a decent percentage of Gmail subscribers, it’s table based with inline CSS all the way I’m afraid. Of course, you can never assume that none of your home based subscribers are using Outlook 2007, so this is a judgement call you’ll need to make yourself. If you do decide to stick with CSS based layouts for B2C emails, I’d recommend doing plenty of testing across Hotmail, Yahoo!, AOL and Gmail to make sure it’s presentable in each. The verdict: Either CSS or table-based layouts but make sure you test, test, test.
In Paris next month, the W3C (World Wide Web Consortium) is holding a HTML Mail Workshop to discuss the technical and business facets of using html in emails. This is a significant event, because it shows that the people involved in formulating and setting web standards recognize that HTML in email is worthy of more time and effort than it has received in the past. It’s great news for everyone who has been frustrated by inconsistent support for html in email clients, and is tired of explaining that html can actually improve the experience for people receiving email if done right. While the technical side (authoring, interoperability, security) is very important, non-technical submissions are also highly encouraged for this Workshop. We would like to hear from direct marketers, online retailers and companies using HTML emails as their default format, to gather requirements, hear triumphs and horror stories, and prioritize plans for future technical work. If you or your clients have feedback on this topic, now would be a great time to get your voice heard, and make an impact in the future of html mail. The W3C is looking for short (1 to 5 page) papers from contributors, so it would be worth the time. Papers are due in by April 21st, so if you have something to say, you’ll want to get started soon. Check the worskhop page for submission details, as well as attendance information if you are able to make it in person.
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.Subscribe
With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.Try it for free