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
We’ve got an updated blog post on ALT text display in email clients – read it here. So off I went to test how ALT text displays in common email clients, only to find that many of them don’t display any ALT text whatsoever. Unbelievable. And to top it off a couple clients replace the author-defined ALT text with their own idea of ALT text should be (tsk tsk). But before we look at the “how,” let’s look at the “why” in ALT text. Why ALT Text? Any web designer attentive to accessibility understands the benefits of ALT text. It’s cardinal purpose, of course, being that it briefly describes an image to someone who is visually impaired via a screen reader. Screen readers read all of the text on a page, denoting lists, links, headlines and ALT text in images. For example, when loading markwyner.com a screen reader would read something similar to the following: Webpage: Mark Wyner Design, Web Design Studio—Portland, Oregon. Link 1: Navigate directly to content. Page headline, link 2: Mark Wyner Design. Sensible design. Accessible content. Usable interface. Global navigation. Home. Link 3: About. Link 4: Services. Link 5: Portfolio. LInk 6: Contact. […] Note how the screen reader announces the page headline and all links, referencing the latter with numbers. Image ALT text is also read aloud, prefaced with the announcement that the forthcoming text is a text alternative to an image. So the following image: <img src="https://www.campaignmonitor.com/assets/uploads/file.jpg" width="528" height="405" alt="[photo: bowler picking up a Greek Church]" /> May be read as: Image: Bowler picking up a Greek Church A secondary purpose, however, is to describe an image to someone who can not or chooses not to view images in their browsing device or email client. Sadly, the latter doesn’t always work out because many browsers/clients either do not render ALT text when images are disabled or render their own variations thereof. In this article I’ll outline how common email clients display (or don’t display) ALT text. Clients Used in Tests Webmail Yahoo Mail Yahoo Mail Beta Windows Live Mail Gmail .Mac Hotmail Desktop Apple Mail Thunderbird Outlook 2007 Outlook 2003 Outlook Express Eudora Lotus Notes Results A trait shared among all email clients—webmail and desktop—is the ability to disable or enable images by default. And nearly every client in my test suite enabled me to load images directly from the message if they were disabled by default. The exception is Windows Live Mail in which images are loaded for known senders and disabled for unknown senders, the latter scenario exhibiting a link to enable them on the fly. These preferences may be more robust/flexible, but I just tested the basics. ALT Text Display in Common Email Clients Client Renders ALT Text Comments Yahoo Mail N/A Yahoo Mail Beta Applies CSS font-styling to ALT text Windows Live Mail N/A Gmail Sometimes Contingent upon text length .Mac Sometimes Contingent upon text length Hotmail N/A Apple Mail Replaces ALT text with question-mark icon Thunderbird Applies CSS font-styling to ALT text Outlook 2007 Sort of Replaces ALT text with security message Outlook 2003 Applies CSS font-styling to ALT text Outlook Express Applies CSS font-styling to ALT text Eudora Sort of Replaces ALT text with URL to image Yahoo Mail Displays ALT text: no Yahoo Mail Beta Displays ALT text: yes The interesting thing about Yahoo Mail Beta is that applies contextually relevant CSS to the ALT text itself. So although it displays ALT text, the potential problem is that large font sizes can push the information beyond the visible border of the image box, rendering it unreadable. But this is, of course, a naturally occurring problem across the board, especially with smaller images and larger descriptions. Windows Live Mail Displays ALT text: no Gmail Displays ALT text: sometimes Initially, Gmail only displayed some of my ALT text and I couldn’t figure out why. Further testing yielded the conclusion that text length was the deciding factor. Whereas most clients display what text they can within the boundaries of a box, Gmail decides that if the text extends beyond the said border it will display nothing. Nice. .Mac Displays ALT text: sometimes .Mac suffers parallel to Gmail when rendering ALT text, in that it reserves text-length contingencies. Hotmail Displays ALT text: no Apple Mail Displays ALT text: no The clients which do not display ALT text typically display gray boxes in place of the images. Apple Mail, however, displays open space and adds a little question-mark icon. I’m an emphatic fan of Apple products and have been using them for roughly 15 years now. Their products are always very usable and beautifully aesthetic. But I must admit that for obvious reasons it was an ill decision to replace images with a question-mark icon. While this isn’t perilous, it is something to note nonetheless. Thunderbird Displays ALT text: yes As with Yahoo Mail Beta, Thunderbird applies contextually relevant CSS to ALT text. Again, there are no paramount consequences of this result, but it’s noteworthy all the same. Outlook 2007 Displays ALT text: sort of I’ll bite my tongue and stick to the facts on this one. Outlook 2007 prefaces all ALT text with its long-winded explanation of why an image was omitted from a message: “Right-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the internet.” This falls down in two very specific ways. First, this is the kind of message which should merely introduce someone to a feature. To repeat it for every image in every email indefinitely is a plethora of information. Second, it pretty much wipes out any ALT text which follows it, given the length of the preface and the average image size in an email. Outlook 2003 Displays ALT text: yes While Yahoo Mail Beta and Thunderbird apply CSS font-size and color properties to ALT text, Outlook 2003 only applies color. I can’t think of a scenario wherein this would have a negative impact, but I feel it’s still relevant to my findings. Outlook 2003 is also the origin of the security-message-replacement woes of Outlook 2007. Outlook Express Displays ALT text: yes Outlook Express is parallel to Outlook 2003 regarding CSS font-properties. Eudora Displays ALT text: sort of Eudora replaces ALT text with an absolute URL to the location of a respective image. I assume this informs a reader where the image can be found, if they feel so inclined to view the image in their browser. But given that the path to the images is truncated, I’m left pondering the value of this system. Lotus Notes Displays ALT text: ? I attempted to get results for Lotus Notes but was unsuccessful in disabling images for the test. I found settings to disable images, but the setting yielded no changes in how images were displayed. I even sent a test to one of my clients who I know uses Lotus Notes at work every day. He, too, could not disable images. If someone can share this information, I’ll update the article to include Lotus Notes results and accompanying screen shot.
Moving past my angst at recent events, I have tested CSS support in two new webmail clients: Yahoo Mail Beta (YMB) and Windows Live Mail (WLM). The results are a nice blend of excellence and incompetence. Surprised? Didn’t think so. Before I dive in, however, I’d like to preface this article with a particular point of interest. With the release of Outlook 2007 looming it feels oh so very awkward to report on how CSS is handled in other new clients. One might even give in to despair with the realization that irrespective of how a standards-based email renders across the board, it simply won’t fare well in a client used in many offices around the globe. But from my perspective, it’s clear that we need to overcome this obstacle like other web standards of the past: we push the web community (browser/client developers and web designers alike) to embrace web standards in avoidance of regression. It’s a long road, but well worth the efforts. If we backed down from the parallel challenge with standards support in browsers, today’s web would be a very different place. I also want to shed some light on the dark caverns of rendered markup in these new webmail clients. There is a current trend in webmail clients which employs a dizzying level of AJAX to make webmail look more like a desktop application. It’s pretty amazing what these developers have accomplished. Anyway, getting to the actual code of a message for viewing rendered markup was quite labor intensive. I owe my gratitude to Chris Pederick who put together the essential Web Developer extension for Firefox which enabled me to get to the source of my test messages. Yahoo Mail Beta Yahoo is a company dedicating itself to progress in web standards. I continue to see advances with CSS and accessibility on redesigned pages on their site and within their new products. (Go, Yahoo team, go!) The new YMB client is no exception. My tests revealed a webmail client with serious support for CSS. In fact, it’s the best webmail client I’ve tested. They prove that you can support CSS in a webmail client while maintaining security, speed and top features. Take a peek at its beautiful rendition of my test email: However, there is one highly unfortunate CSS property that Yahoo still considers to be problematic: position. In previous articles I outlined how Yahoo Mail replaced all instances of position with xposition, thus rendering them inoperable. Now, however, Yahoo takes this approach to a new level. Instead of making the aforementioned modification, it strips the email of all instances of position. And not just in YMB, but in the original Yahoo Mail as well. So with Yahoo Mail and YMB, all positioning is out the window. Hello float. All said, I think this is pretty minor in the scheme of things. Thanks, Yahoo. Yahoo Mail Beta’s score: “excellence.” Windows Live Mail Where do I begin? I must give the WLM team credit for their advances in support for CSS, succeeding Hotmail by great strides. Not surprisingly, however, they have failed to offer support for many core CSS properties. In some ways this is worse because Hotmail’s handling of CSS-formatted emails yielded an acceptable email, comparable to a rich-text document. With a half-hearted attempt at CSS support, the result is problematic. Let’s take a look at where WLM falls down. Margin Good bye margin. Yep, it’s gone. Every instance. The most significant problems arise when we need to trim default margin to elements like blockquote and need to add to the default margin of elements such as a div: After WLM eradicates my margin declarations, my blockquote encroaches on the sidebar. And note how all of the text is pushed to the left edge of the window because the margin I applied to my paragraphs and headers has been axed. Albeit we still have padding, this creates its own complexities when working with even a moderate level of design. Image Caching Okay, email service providers, get ready to scream. Ready? When WLM opens an email it grabs linked images and downloads them to a local application-directory. So those tracking images you use to report how many times and email has been opened? You only get one hit irrespective of how many times a message is opened. Okay, let it out. Scream! This is how it works: src="https://www.campaignmonitor.com/assets/uploads/logo.gif" Becomes: src="https://www.campaignmonitor.com/assets/uploads/logo.gif" Why does WLM do this? Presumably to cache them for speed. Of course I’m giving them the benefit of the doubt here. (Don’t get comfortable, WLM team—I’m not finished with you.) Personally, I think it’s a nice uppercut to all of us. But I’ll let you folks decide how detrimental this is to what we do. Conversion of Quotes This one is rich. I hope you only want to use fonts with single names such as Helvetica or Georgia. CSS requires that when declaring a value for font-family, two-word names must be enveloped in quotes. So Trebuchet MS must be declared as follows: font-family: "Trebuchet MS", sans-serif; WLM says “no” to quotes in values, so the aforementioned sample becomes: font-family: "Trebuchet MS", sans-serif; This renders the declaration inoperable, rendering fonts to the browser default. So if our design employs Lucida Grande or Trebuchet MS, per se, we must either accept WLM’s presentation as is and proceed with our two-name fonts or compromise our design with a single-name font. Background WLM strips all instances of background. Good bye background images. While this is problematic for our pretty designs, it poses a threat to a more significant issue: accessibility. WLM strips the entire background declaration, which includes any colors therein. So if you have white text atop a colored background, you’re left with invisible content when WLM is finished beating you up. There is hope, however, in that we can exchange shorthand for longhand when declaring background properties. So: background: #c1d7ed url("https://www.campaignmonitor.com/assets/uploads/bqTop.gif") no-repeat; Becomes: background: url("https://www.campaignmonitor.com/assets/uploads/bqTop.gif") no-repeat; background-color: #c1d7ed; This enables us to retain background colors amid WLM’s background-image cleansing. The result, while less than satisfying, is more or less acceptable. Let’s compare. My test as seen in Yahoo Mail Beta: The same test as seen in WLM: Headers By default, headers (h1–h6) inherit font properties as previously defined in a style sheet. But with WLM, nothing is inherited. So it is important to redefine font properties as necessary. Fortunately the named value inherit does function within WLM. So font-family: inherit; works as intended. Phew. ID Replacement This is by far the worst of the lot, and is reminiscent of the .Mac problem I noted in a previous article. Webmail clients have evolved to ensure that type selectors do not override CSS declarations for the client itself (a problem for which I have illustrated a considerate solution). The common solution on part of webmail-client developers is to add an all-encompassing div to an HTML email, give it an ID or class, then prefix all class- and id-selectors (from the email) with the ID or class from the new div. So the CSS/HTML pair: #Content { } <div id="Content"></div> Becomes: #EC_Content { } <div id="EC_Content"></div> A reasonable solution if it were properly implemented. WLM and .Mac both have their faults in that they fail to appropriately match new parent div elements. Where WLM falls down is that it only applies its prefix in the CSS to the first ID/class selector in an element, leaving child ID/class selectors behind. So the CSS for: #Content #Primary {} Becomes: #EC_Content #Primary {} But in the HTML: <div id="Content"><div id="Primary"></div></div> Becomes: <div id="EC_Content"><div id="EC_Primary"></div></div> Obviously this renders all child ID/class selectors inoperable. The good news is that WLM does not prefix type-selectors in either the CSS or the HTML. So: #Content h1 { } <div id="Content"><h1></h1></div> Becomes: #EC_Content h1 { } <div id="Content"><h1></h1></div> I think we dodged a bullet on that one. Why webmail-client developers can’t get this right is beyond my comprehension. It is vitally important and is an obvious oversight which is now becoming commonplace. Windows Live Mail’s score: “incompetence.” In Summary It comes down to this: Yahoo is leading the way with their support of CSS and web standards, while Microsoft has once again proven they are falling behind. I would gladly stand up and applaud Microsoft for development of a product which offers a high level of support for web standards. But with Windows Live Mail, this is a big “no can do.” As for the Yahoo team, allow me to celebrate your efforts. The first round is on me next time you’re in Portland.
When I posted about Microsoft’s decision to use Word instead of Internet Explorer to render HTML emails in Outlook 2007, I certainly didn’t expect the storm of controversy and (sometimes) constructive discussion that eventuated. The post has already breached 300 comments and made the front page of Digg, Del.icio.us and Techmeme within a few hours. Heck, we even managed to land the number five spot on Alexa’s fasting moving sites on the web. This is clearly a topic many of you are passionate about. So why did Microsoft make this change? In my post, I chanced a guess at Microsoft’s motivations for this change: By default Outlook uses the Word engine to create HTML emails, which it’s done for years now. Perhaps Microsoft figured that in order to keep the look and feel of emails consistent between Outlook users they’d display emails using the same engine that created them. As diplomatically explained by Molly Holzschlag, it turns out that this is exactly why Microsoft made the change. It has nothing to do with security or the remnants of an anti-trust decision. I’m not going to harp on about what I think about this decision – I can certainly understand Microsoft’s motivation for making the change. It’s been made, and the best thing for us to do now is deal with it and use our frustration to constructively encourage Microsoft to resolve the existing issues with the Word rendering engine. What can you do? Molly is currently working closely with Microsoft as part of the Microsoft/WaSP Task Force and points out this refreshing fact – Microsoft is prepared to listen. Please comment as to your experiences and include any links to problem cases. I promise to make sure the top priorities and concerns get in front of the right eyes. Microsoft was very clear in letting me know that if we want a feature and need it and get an organized list to them, those issues will be addressed and prioritized as the new engine develops in response to developer needs, too. As email designers, all we have to do is provide examples of our older CSS based designs that are now breaking in Outlook 2007. The obvious challenge there is that most of us don’t have a copy yet (it’s being released publicly next month), so these reports may take some time to trickle through. At any rate, I encourage anyone who has noticed any discrepancies in their email designs using a pre-release version of Outlook 2007 to chime in on Molly’s post with the URL of your email and a short explanation of what’s breaking. If you don’t have a copy yet, you can also test Outlook 2007 support using SiteVista, which we reviewed recently.
Our customers often ask us what ‘open rate’ means, and whether the open rate they are getting is any good or not. We’ve put together the following guide to open rates, which you will now also find in the help section of your account. What is an open rate? Open rate is a measure of how many people on an email list open (or view) a particular email campaign. The open rate is normally expressed as a percentage, and at Campaign Monitor we calculate it as follows: So a 20% open rate would mean that of every 10 emails delivered to the inbox, 2 were actually opened. How do you measure an open? When each email is sent out, we automatically add a piece of code that requests a tiny, invisible image from our web servers. So when a reader opens the email, the image is downloaded, and we can record that download as an open for that specific email. It is important to understand that the open rate is not a 100% accurate measure. Recording an ‘open’ can only happen if the readers email client is capable of displaying html with images, and that option is turned on. So if you are sending text-only emails, there is no way to record open rates (the exception is if they actually click a link). Similarly, people reading your html email without images showing will not be recorded as opens. Another issue is that your readers may have a preview pane in their email client. That preview pane might be displaying your email automatically (and therefore downloading the images) without the reader ever having to click on it or read it. So you should never take your open rate as a hard and fast number, because you can never know the true figure. It is much better used as general guide, and as a way of measuring the trends on your email campaigns. What is a typical open rate? Really, there is no typical open rate. The rate obtained for any list, or group of lists will depend on how it was measured, when it was sent, the size of the list and a zillion other potential variables. There is no shortage of benchmark numbers out there, but even between benchmark figures you will find big variation in the reported open rates. So instead of giving a specific percentage, we’ve come up with the following chart. There are certainly some broad trends in open rates. As list size goes up, the open rate tends to fall; possibly because smaller companies are more likely to have personal relationships with their list subscribers. Companies and organizations that are focusing on enthusiasts and supporters, like churches, sport teams and non profits see higher open rates More specific niche topics, like some manufacturing areas also typically have higher open rates than emails on broader topics Why don’t you just give me a number! So what if you or your clients just have no idea of what is a reasonable open rate? Based on everything we have seen here at Campaign Monitor, and on the other research out there, the bottom line is this: If you are getting an open rate between 20% and 40%, you are probably somewhere around average. Very few lists of reasonable size are getting much above 50% open rates from normal campaigns. Your list may have some specific factors that give you higher rates; if so, well done. However, don’t expect to be getting 80% open rates. People are too busy, inboxes are too full and the measurements are technically limited. If, after all that, you are still interested in seeing specific figures, see the footer for some references you can browse through. How can I increase my open rate? There are a ton of elements you can vary to try to entice more of your subscribers to open up your emails. Here are just a few things you could try: Experiment with your subject lines: Try including details about the content of the email right in the subject line, instead of using your standard subject. Send on a different day: Are your subscribers too busy on a Wednesday morning to read your email, leaving it languishing down the inbox? Maybe a Friday afternoon email would be welcomed. Get the important content up the top: Remember that many people will see a preview of your email before deciding to open it or ignore it. Make sure your email is recognizable, and that your key points are in the top third. References: The typical open rates in the chart above were derived from Campaign Monitor’s own figures, in conjunction with numbers published by Mailchimp, Bronto and Mailer Mailer.
Every few days for the last 2 years we’ve been showcasing the amazing email designs you guys have been producing and sending through Campaign Monitor. This gallery has now grown to well over 100 entries and was really starting to outgrow the current blog format. Because of this, we’ve been hard at work on a brand new email design gallery that’s much easier to browse and really does justice to the quality of work you guys are pumping out. We’ve gone back and tagged every design we’ve featured to date making it much easier to find just the designs you’re looking for. Want to just see 1 column email designs? How about all the newsletter style emails we’ve featured? No problem. On top of this, we’ve now got a dedicated RSS feed so you can get an update every time we feature a new design. We’ll be rolling out a few more features in the coming days that will let you browse the gallery by popularity. To top it off, we’ve got a backlog of some awesome new designs that we’ll be featuring over the next few days and weeks. Enjoy.
As I type this post I still can’t believe it. I’m literally stunned. If you haven’t already heard, I’m talking about the recent news that Outlook 2007, released next month, will stop using Internet Explorer to render HTML emails and instead use the crippled Microsoft Word rendering engine. Now c’mon, how bad can this be? First things first, you need to realize that Outlook enjoys a 75-80% share of the corporate email market, which is similar to Internet Explorer’s share of the browser market – they make the rules. We’ve been doing some early testing, as have a few other brave souls, and come February, here’s just a taste of what won’t be supported: No background images – Background images in divs and table cells are gone, meaning Mark’s image replacement technique is out the window. Poor background color support – Give a div or table cell a background color, add some text to it and the background color displays fine. Nest another table or div inside though and the background color vanishes. No support for float or position – Completely breaking any CSS based layouts right from the word go. Tables only. Shocking box model support – Very poor support for padding and margin, and you thought IE5 was bad! Microsoft have released a full run down of what is and isn’t supported, including a downloadable validator that helps you validate your HTML for their engine. Word of warning though, it only works with Microsoft software and Dreamweaver. To give you a quick example of just how far backwards we’ve gone, here’s a screenshot of the Campaign Monitor newsletter (which uses CSS for layout) in Outlook 2000 and 2007. Yes folks, that’s seven long years difference. Outlook 2000 Outlook 2007 This really is a game changer. Previously you could send a HTML email in the comfort that the majority of your recipients would have very good CSS support. Other email clients were also catching up. Thunderbird uses the Firefox rendering engine, the new Yahoo! Mail beta has great CSS support. Things were looking good for us CSS based email designers. Unfortunately, that all goes down the toilet now. 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. This certainly doesn’t spell the end for HTML email, it just takes us back 5 years where tables and nasty inline CSS was the norm. Imagine for a second that the new version of IE7 killed off the majority of CSS support and only allowed table based layouts. The web design world would be up in arms! Well, that’s exactly what the new version of Outlook does to email designers. What’s the reasoning behind this? After picking up the contents of my desk off the floor and taking a few deep breaths, I tried to come up with a few decent reasons why Microsoft would go in this direction. Here’s what I came up with. Security – But wait! Microsoft have touted Internet Explorer as “a major step forward in security”. Surely they’d just replace the IE6 rendering engine with IE7 and be done with it. I’d also love to know how float and position impacts the security of an email in any way. Consistent rendering – By default Outlook uses the Word engine to create HTML emails, which it’s done for years now. Perhaps Microsoft figured that in order to keep the look and feel of emails consistent between Outlook users they’d display emails using the same engine that created them. But what about the millions of other email newsletters out there that aren’t created with Outlook or Word? If an email is created with Outlook, then surely it should display perfectly in a modern browser like IE7. They hate us – OK, this one might be pushing it, but I’m running out of explanations here. Don’t get me wrong, we’re not Microsoft bashers here. Both our products are developed on Microsoft’s .NET platform and we’ve been a fan of their development environment for the better part of a decade. But seriously, they’ve taken 5 important years off the email design community in one fell swoop. At least they’ve still got Hotmail, right? Well, no. We’ve been doing plenty of testing with the new version of Hotmail (Windows Live Mail) for an upcoming article and it turns out that like Outlook 2007, Live Mail is actually a step backwards for us email designers. At least Hotmail ignored all CSS (except for inline CSS) and you could force it to roll back to a nicely formatted rich text email. Instead, Windows Live Mail displays some CSS but, you guessed it, limited support for floats and no positioning. It’s looking like table based layouts all round at Microsoft for the next few years at least. Where to from here? We’ve been spending the better part of the last 2 years encouraging designers to embrace accessible and standards compliant email design, but frustratingly that position may no longer hold much weight. Just yesterday, Jonathan Nicol said: None of these limitations is going to make the task of designing HTML emails impossible, but they will ensure that no advances are made in this field for a good number of years. Remember, it’s been four years since the last version of Outlook was released, so I‚’m going to guess it’ll be at least six years before Outlook 2007 drops off the edge of the map. Sadly, I couldn’t agree more. While this is certainly a big blow, the reality is that many of us are going to have to scale back our email templates to years past and stick with tables and inline CSS if we want consistent looking emails in Outlook and Windows Live Mail. For a quick example, our sample email templates use a table based layout combined with some simple CSS. Template changes aside, I don’t see why we have to take it lying down. I’d love to hear your thoughts on this news. Perhaps if we get together as a community and explain to Microsoft how damaging this change really is, we can encourage some real change, or at the very least get the discussion started. What say you, email designers? Update 1: Welcome Digg users. With the anti-HTML email comments rolling in, I just want to clarify one thing here. This has nothing to do with the text/HTML email debate and won’t stop people sending HTML email. All it means is that a lot of HTML emails in Outlook will be garbled and difficult to read. Nothing more, nothing less. Thanks also to those posting constructive comments. It seems this situation might have plenty to do with Microsoft having to separate the browser from the OS for anti-trust reasons. Update 2: We’ve just posted a follow up article that explains Microsoft’s reasoning behind this change and exactly what we can do about it if we want it changed. Update 3: The time for complaining about this change or debating HTML vs plain text has passed. Read why we need to look forward and start doing our own part to improve standards support in HTML email.
If you read Mark Wyner’s recent email testing opus you may have despaired at how time consuming and complex it all seemed. Even though you know it is sensible and necessary, it seems like a lot of work. Fortunately for all of us without Mark’s commitment to excellence, SiteVista have today released the first version of their email testing service. SiteVista’s web page testing service has had great reviews, and this new service looks set to match it. So what is an email testing service anyway? Basically, it’s a quick, simple and efficient way to find out how your carefully crafted HTML email is going to be variously displayed or mangled by different email clients. You put your email in, and you get back a bunch of screenshots, just like a web page testing service. Right now you get screenshots from: Outlook 2000 / XP / 2003 / 2007 Outlook Express Hotmail Gmail Apparently more will be added soon, including Apple Mail, AOL, Yahoo! Mail, Entourage and Eudora. For each client you get one screenshot of your email in the inbox / preview pane, and one of the email as it appears when opened. So within minutes you can find out how Hotmail users will see your email, whether your header fits into the Outlook preview pane and what kind of ads Google is likely to run next to it! If you’ve ever had subscribers emailing you saying they couldn’t see that photo, or your text was unreadable, you know why this is a vital service. How does it work? SiteVista have made this incredibly simple. The signup process is quick and painless, and literally within one minute I was testing my first email. To start a new test, you are given a specific email address to send your email to. You fire off your html email to that address, let SiteVista know, and you are immediately taken to the results page. Over the next few moments (from seconds to a minute or two) all the spots in the grid are filled as the screenshots appear. You can click on each one for a full size view, and it is worth noting that you can see the full email, not just a screenful. SiteVista rather grandly call this ‘FullPage technology’. Any problems are easy to spot, and you can then go away and make whatever corrections are needed before running another test. Your account contains a record of all your previous tests, so you can go back and check your results at any time. It’s all fantastically straightforward and logical. How much does it cost? If you are a freelancer, you can have up to 50 tests a month for USD$49, which is great value. Even better, if you sign up by this Friday the 12th, you can lock in your account at USD$39/month for the life of your account. Businesses can have unlimited access for up to 10 people for USD$149/month. For the full details, including annual rates at a discount, check out the pricing page. So you like it then? Yes, we all think it is a great service. There’s a couple of questions I’d like to see the SiteVista site cover, like what screen sizes and resolutions the email clients are at. I also would like to know if the email clients have been left with their default settings or not. Other than that, SiteVista’s email testing service looks like a really useful tool that can save you a lot of wasted time and money testing and sending emails. If you want to make sure you are giving your email campaigns the best chance of success, you need to test them. SiteVista have given us a simple and cost effective way to do that. What do you think? Do you do any cross-client testing for your emails now? Would you give SiteVista’s service a try?
A quick one for all our UK based customers. A recent Companies Act amendments now requires additional content to be included in every email you send. As of the 1st January this year, each email sent by a company must now include: Your registered address (not just a valid company address) Your company registration number Your place of registration On top of appearing in all emails, this content must also be included on your web site. From what we’ve read, this doesn’t mean every page on your site, but just your about or legal page for example. You can find out a little more about this over at The Register.
Check out this years crop of amazing holiday emails.
Whether I’m developing a website or an HTML email, I spend a good deal of time testing. I run my files through a large suite of browsers and email clients, and my process is thorough. There are some things I test for globally and others which are specific to the target audience. In any case, my process is extensive because my goal is to maximize accessibility. I am often asked how I test emails. This article will outline that process including what I look for when I test, how I test for various viewing scenarios, what techniques/utilities I use for debugging and what email clients I use in my suite. You might recognize the process as part of your own, learn something new about testing or even curse my efforts as useless. I feel that my testing process is efficient and effective, but I’d love to learn something new about how my peers are testing. Comments are a good thing. My Suite of Test Devices To ensure my work accommodates people using all of the three most common desktop platforms (Macintosh, Windows and Linux) I have them all at my disposal. I design/develop on my Mac (as I have for over a decade) and have the other two on standby. Because I use a Mac Pro I can run all three platforms on a single computer (I’m running Ubuntu—an amazing and free Linux platform—and Windows XP), thanks to the glorious Parallels application: I also test on as many alternate devices as possible. This is most challenging because there are a plethora of mobile devices with an equally intimidating number of browsers and email clients. I do what I can with my Zaurus (Linux), my Treo (Palm OS) and my Blackjack (Windows). And I profusely apologize to my colleagues and friends as I occasionally beg them for test runs on their devices. Quite an annoyance, I’m sure. My Suite of Test Clients There is a lot of data to support a general consensus about the most widely used email clients and web browsers, but I also ask around to learn what people are using. This gives me a great foundation for where I should focus my efforts. However, with strict goals for accessibility I test for an extremely broad collection of clients/browsers. Some may call it extensive or even gratuitous, while I call it thorough and considerate. My suite of encompasses the following clients: Mac OS X Apple Mail 2.1 Entourage 10.1 Windows XP Mozilla Thunderbird 1.5 Outlook 2002 Outlook Express 6 Eudora 7 Lotus Notes 6.5 AOL 9 Linux Evolution Mail 2.8 Mozilla Thunderbird 1.5 Webmail .Mac Gmail Yahoo (original and new beta) Hotmail Windows Live Mail AOL Handhelds Palm Versamail (Treo smartphone) Linux EMail (Zaurus PDA) Outlook (Windows mobile) Deployment of Tests For Campaign Monitor customers who are logged in to the admin system, sending test emails is effortless. Simply navigate to the “test campaign” utility under the “create/send campaign” tab, enter the basic information and you’re set: I point all of the desktop/handheld clients in my suite to an IMAP account which I’ve created solely for testing. This enables me to send tests to a single address, then view the results across the board. Webmail accounts, however, are unique and consequently need to be tested individually. But the aforementioned test utility allows concurrent delivery to three addresses. So testing in six webmail clients is still simple and quick. Through countless tests I have learned (as we all do) what general markup will succeed and fail in various clients/browsers. This knowledge enables me to send an initial test which most often works fairly well across the board, sans a handful of unanticipated hiccups. Then, as I work to resolve the complications, the testing suite dwindles until I am satisfied with the results in each client. Campaign Monitor’s test utility enables me to quickly resend tests, and the IMAP setup enables me to view the results only in clients needing attention. My Approach to Presentation There are two fundamental ways to markup the presentational layer of an HTML document, each having its own benefits/compromises: standards-based CSS for all presentation, or table-based layouts which envelope font/color tags for text formatting. From my perspective, there is no contest between the two approaches. However, for those less educated about the pros and cons I’ll outline the basic concepts. Font Tags and Tables While this approach offers a fairly consistent visual presentation across most email clients, it comes at a high price: Embedded presentation layers weigh down an email, slowing down rendering times for mobile devices and people with dial-up connections and increasing fees for people using pay-per-kilobyte mobile plans. Table-based layouts render horribly on small-screen devices and are nightmares for disabled readers who must navigate using key/verbal commands. Table-based layouts are challenging to integrate into CMS solutions and to segment for templates. Redundant, inline presentational-markup complicates maintenance. Standards-Based CSS While web professionals are increasingly adhering to web standards, the debate about using them for HTML emails is still quite fiery. And because of my articles on the topic, I’m typically a target for misinformed, plain-text-email evangelists. The benefits of web standards in the email environment is no less impactful than on websites. If anything, they’re more important because of the increasing number of people using mobile devices to access email. The benefits of using web standards to mark up emails is obvious: Reduced file sizes are considerate of mobile readers who pay for every kilobyte they download and for people using slower dial-up connections. The content is accessible to everyone, is fluently read by aural devices and is easily navigated by those using assistive devices. Clean segmentation enables easy integration with CMS solutions. Presentation is maintained in a single location, ensuring global changes are quick and simple. There are a couple of compromises one must accept when using CSS for presentation: Visual design is reduced to something, not unlike a rich-text format in some clients. Formatting is lost when forwarded from many clients. A Word to the Wise Irrespective of my stance on this debate, there will always be a client who believes design integrity across the board is significantly more important than accessibility or catering to a mobile device audience. Consequently, I have learned that it is vital to discuss these approaches with my clients before engaging in a project. Failing to have this conversation up front will inevitably result in hearing a client say “this doesn’t look good in Hotmail” or “when I forward this from Outlook, the formatting is lost.” My Goals There are many viewing scenarios to consider which vary more wildly in the email environment than within web browsers. This is primarily because security and spam are of great concern in our inboxes, but also because of the increased use of mobile devices. I believe my approach to preparing for each of these scenarios yields appropriate results across the spectrum of clients. I have specific goals for each scenario—all focused on accessibility—and test for these specific results accordingly. Following, are some of these specific scenarios. Text-Only Clients Many people use non-graphical email clients, especially in the mobile arena. These clients either display the plain-text segment of a multi-part email or extract text from the HTML. Take a look at how Lynx (popular non-graphical browser) renders HTML into a text-only presentation: Note how there is some formatting which helps the reader distinguish headlines (flush left) from paragraphs (indented). This is possible because the headlines are marked up appropriately with H1, h3 and P tags. Font tags and tables would produce something much less readable. Also, note how I compose ALT text, using all-encompassing brackets. This is something I do by default to help readers distinguish ALT text from regular content when viewing HTML sans images. And I prefix ALT text with a description of the image (in this case “photo:”), which denotes what type of image has been omitted. I test for text-only presentations using Lynx, Palm VersaMail and Linux EMail (default email application on my Zaurus handheld). Disabled Images with CSS Support Images can be manually disabled, and are disabled by default in a handful of clients. As David Greiner brings to our attention, Epsilon Interactive conducted a study which reports how 30% of our recipients may not even know images are disabled. My approach to image integration is pretty simple, I use CSS backgrounds for all images which are part of the core visual design and only use embedded images (<img>) for contextually relevant images. The big challenge surfaces when images are disabled in a graphical client that supports CSS. In this scenario, CSS-background images would disappear leaving no ALT text. However, there is a solution to this problem which I outline in another article. I believe it yields acceptable results: The title of this email, “Digital Web Magazine,” is exhibited with an image of the publisher’s logo. With images disabled in a client that supports CSS we retain visibility of a title. Perfect. I am able to easily test how my email will appear with disabled images using an amazing Firefox extension which is invaluable even beyond testing for disabled images. I highly recommend it for every web designer. HTML Capable Clients with no CSS Support Many HTML-capable clients do not support CSS. In this scenario, CSS shines bright. “Why?,” you say. “It’s gone.” I use CSS for my entire presentation and semantic markup for the content, so when the CSS is removed from an HTML document the result is a readable email, visually similar to that of a rich-text document: This is where those seeking pixel-perfect designs across the board begin to recoil in horror. I feel this is an acceptable sacrifice to ensure accessibility for everyone, though many clients would disagree. And this is where the aforementioned pre-project discussion will come in handy. My clients are prepared for this scenario, safeguarding me from a mid-project debate and potential situation requiring me to recode an email using font tags and tables. Testing for this scenario is simple using the aforementioned Web Developer Extension for Firefox, wherein CSS can be disabled with a single click. But it is advisable to set up Hotmail and Gmail accounts for real-world testing. Both of the said webmail clients support HTML and disable CSS by default. Screen Readers Aural devices obviously ignore all visual design. But that doesn’t mean all visual elements disappear completely. For example ALT text and link titles are read aloud and lists are denoted as such. Thus it becomes obvious just what kind of impact our markup can have on a visually-impaired reader. Testing for aural devices is incredibly challenging because they simply aren’t widely available without paying significant license fees. The popular screen readers on the market are well worth their weight in gold to those who need them, but for developers the expense can be intimidating. However, there is an open source screen reader available for the Linux platform called Emacspeak. Thanks to the aforementioned Parallels application and respective Ubuntu Linux-platform on my Mac Pro, this is what I use to hear my websites and emails. Spammers and Standards Compliance I would like to conclude this article with a note about the deployment of mass emails, just so we’re all clear on my intentions. I have written a handful of articles about techniques for successfully deploying standards-compliant emails. Consequently, I have been labeled a “spammer,” an “email marketer” and outright “evil” in blogs around the web. I have also received some emails exhibiting a level of anger I would expect if I were clubbing seals. And the debate about whether or not we should even have HTML emails fuels the fire for these evangelists. My articles are intended to help legitimate companies send legitimate emails to an audience of subscribers. Permission-based email deployment is not evil and spammers do not take the time to ensure their emails are standards-compliant. I welcome a debate about use of HTML in the email environment, but I would like to ensure that my intentions are not misconstrued. I have clearly outlined the importance of CAN-SPAM ACT compliance, do not work with clients who disregard the importance of a permission-based email-communication system and do not support the use of rented lists for mass marketing. The benefits of web standards are clear, and my hope is that this information will encourage people to accompany their standards-compliant websites with standards-compliant emails. I’ve said it before and I’ll say it again: if we have to build HTML emails, we may as well do it right. I am willing to go the extra mile to ensure accessibility—how about you?
Professional trade show presenter Heidi Miller based a recent episode of her “Diary of a Shameless Self Promoter” podcast around the concept of email newsletters and spam. Heidi, who collects a lot of business cards through her work, had mentioned previously that she was considering taking email addresses from those cards and signing them up to her newsletter. Several callers to her show suggested (correctly) that without explicit permission from those contacts, subscribing them to her list could be considered spamming. One of the callers described a great method to handle this specific situation. When she meets people, she specifically asks them if they would like to receive her email newsletter. If they say yes, she has them write ‘Yes to Newsletter’ on the back of their business card. Conversely, if they say no, she notes that on the card instead. That way, when she processes the new contacts after a convention or show, she has a clear indication of who has opted-in and who has not. Nobody is accidentally subscribed and she always has the original permission to refer to. If you deal with a lot of offline permission situations, you might consider adapting this to your situation and put it into use. When you add new subscribers to Campaign Monitor, our anti-spam policy requires that you have clearly explained that you will be contacting them by email. This technique could be part of a good permission management process. Do you have any experience dealing with getting permission offline? What’s your process?
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.
SubscribeFrom Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.
Get started for free