Browse by...
Home Resources Blog

Blog Post

A Guide to CSS Support in Email: 2007 Edition

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.

Blog Post

W3C HTML Mail Workshop

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.

Blog Post

Improve Your Email Subject Lines

Your email subject line is the first thing your subscriber sees in their inbox, and that can be the moment they decide to open it, ignore it or delete it. There is a risk that as designers we can spend all our time battling with rendering problems in Outlook or css in Gmail, and not even consider the subject line. So we’ve dug up this little collection of links to help you and your clients craft more effective subject lines. Next time you send a campaign, spend a little more time working with your client on that subject line, and compare your open rates with previous attempts. Friday links: Improve your subject lines Writing Headlines, Page Titles, and Subject Lines for the Web – by Jakob Nielsen The Art of the Subject Line – by Brad Berens Getting the Subject Line Right – by Gail Goodman We’ve left the best for last – over at CopyBlogger, Brian Clark is taking headlines and rewriting them to be more effective. It’s not specific to email subject lines, but Brian explains his process, and you can learn a lot from his approach. If you have written a really successful subject line (or a spectacularly unsuccessful one!) , leave us a comment below.

Blog Post

5 Ideas You Can Use When Pitching Email Marketing to Your Clients

Once you’ve added email marketing as part of your business services, you can start encouraging your current and potential clients to make use of it. Here are our top 5 ways to encourage your clients to get started with, or refocus on email marketing 1. Show them that it works! The biggest selling point for email marketing is simply that it works! We covered this in reason 4 of why web designers should offer email marketing as a service – email marketing gets results, and gets them for less cost than other marketing methods. Explain to your clients some of these highlights: Emails are a great way to get in closer contact with customers. It doesn’t rely on your customer remembering to visit your site, or seeing a print advertisement. You can personalize emails to suit the particular interests of that customer, instead of sending a generic brochure. You only pay for people you are actually sending to, instead of shot-gunning out to the world at large. Email marketing is predicted to return an incredible $48.29 for every dollar spent in 2007. That’s a fantastic ratio. 2. Show them how they can measure it working One of the frustrations with many marketing activities is that it can be very hard to tell what is working, and what is just costing money. When you conduct email marketing with a tool like Campaign Monitor, you can see very quickly what is working, and what is not. Show your clients some of the reports they could get with Campaign Monitor. You might even go further, setup a sample account, and let them click around and see some real reporting. If something isn’t working, they’ll find out and be able to tweak it immediately, at low cost. This is a potentially huge saver of time and money. 3. Explain that it’s easy to manage If your client has tried email marketing in the past, they may have been overwhelmed by unsubscribe requests, or bounces coming back to them. Or they might have tried a system that was just not fun to use. You can offer something better – automated processes that handle all the tedious subscribing, makes sure people can get off the list when they want to, and keeps track of emails that bounce. Ask them how much time they used to spend doing those things. 4. Emphasize its flexibility Take some time to think of a few ways your specific client could use email marketing. Could they feature a different product each week, and offer special prices to frequent buyers? Maybe they can have case studies of customers using their service, and can segment their lists to send them to other potential customers in similar industries. Could they email customers who have been out of touch for a little while, and ask if they have any suggestions? You want to get your clients excited about the possibilities! If you put some effort in first to start them off, they may come up with some even better ideas on their own. 5. Show them a working example One final thing you might try would be to include a sample email design with your web designs. Seeing their brand in action as an email could be much more convincing than words and graphs. Why not send a sample email to your client, with their own branding on it? It’s free to do through Campaign Monitor, and should not take you much time at all. We’d love to hear any comments on other techniques that have worked for you or you plan on trying. Any pitching ideas we’ve missed?

Blog Post

Campaign Monitor in Your Ears

There are a few web design podcasts around these days, but one of the oldest and most popular is Boagworld. In this weeks episode, Tagtastic, we’ve contributed a segment on the basics of planning and running an email marketing campaign. If you’re a veteran Campaign Monitor user, there won’t be too much new for you, but it might be a nice overview to help you explain to your clients what it is all about. It quickly covers the whole process from planning through design, sending and tweaking for improvement. The whole podcast is definitely worth a listen, as it is aimed at people managing, designing and developing websites on a daily basis. We’d love to hear about any other podcasts in this area that you listen to – leave us a comment with your favorites.

Blog Post

The Secrets behind a 70% Open Rate

I just came across a great post by Campaign Monitor customer Craig Killick from The Escape on the recent tactics they employed to get an impressive 70% open rate and the sale of 60% of their inventory for the product being marketed. Craig goes on to explain the 4 main reasons behind this success and also some recommendations of what not to do. Here was the standout for me and is a great example of how to use our segments feature: When they subscribed, they were given the choice to check a box against specific selections: In this case it was artists that they are specifically interested in buying pieces of work from. This specific e-mail was personalised and about something (a specific artist) that they have a great interest in, from someone they know and trust. Therefore, the penetration is that much more effective. Definitely a great read for those that need reminding of how crucial it is to ensure your creative is as relevant as possible to your subscribers.

Blog Post

How to Charge Your Clients for Email Marketing

Like most services a web designer can offer their clients, there are many different ways to approach charging your clients for email marketing. At Campaign Monitor, we’re in a unique position in that we speak with designers charging their clients for email marketing all day every day. Over the years I’ve seen a huge range of billing approaches taken, some which make sense and others that seem plain crazy. We occasionally get asked by customers how they should charge their clients for their services. The truth is, there’s no one approach that works for everyone (you knew I was going to say that, right?). Having said that, out of the different models I’ve seen over the years, there are a few that make the most sense. The purpose of this post is to present you with some of these options and let you work out which approach suits you and your client’s budget best. The popular areas to charge for Over the course of pitching to your clients, designing them a template, getting it delivered and then measuring the results, there are a number of points where you have the opportunity to charge for your services. Of course, most designers won’t charge for all of these areas (though some do), these are just examples of what can be deemed billable work. 1. Template Design (flat fee or hourly rate) This one’s pretty straightforward, just like designing a single page site or a landing page, you charge your client for putting the concept (or concepts) together, then coding the approved design and finally testing that design in the most popular email environments. 2. Delivery (usually dependant on the number of recipients) This is where the range of billing approaches starts to surface. Here are a few of the more popular billing approaches for covering delivery fees: Charge your client a flat monthly fee that covers any campaigns delivered that month Charge them based on a pricing bracket for the number of subscribers being sent to. For example, 2,000 to 5,000 recipients is $150. Charge them a set per/recipient fee. For example, 4 cents/recipient with a flat delivery fee on top, such as $10. 3. Reviewing the results (flat fee or hourly rate) Once the campaign has been delivered, the designer reviews the reports and makes recommendations to the client to improve or maintain results for subsequent issues. For example, you might have tried a different design approach for the newsletter’s “featured product” which yielded a 17% better click-through rate. This is explained to the client and further recommendations might be made. 4. Subsequent changes to the creative (flat fee or hourly rate) Obviously each campaign you send for the client will include new content. These changes can be made much more cost effectively than the original template design. If the client approves any recommendations you made after reviewing the results of a sent campaign, these may also be included in any updates you make. Because of this, 3 and 4 or often billed as a single item. 5. Other services we’ve seen designers charge for While the 4 areas above are the most commonly billable areas of email marketing, I’ve seen designers also charge for the following separately: Testing the design in popular email environments. Cleaning and importing the client’s subscriber list into their account. Adding list subscribe forms to the client’s web site. Processing bounces and unsubscribe requests for the client (even though we do this automatically). Giving the client access to web-based reports on the results or sending them a print-based version of the reports (usually a set monthly fee). List and image hosting fees (even though we offer this for free). The email marketing billing cycle Just like most web sites, an email marketing program is an organic thing that changes over time. Each issue needs to include new content or a new offer, there might be a design tweak you need to make or a new email client to test in. As well as improving your clients relationship with their customers or driving sales, an email marketing program can also provide a great cashflow injection each month. Here’s a quick example of how you might charge a client for your email marketing services on an ongoing basis. Campaign Monitor’s pricing structure was a very deliberate decision on our part. We wanted a system that meant you only had to pay when you got paid, and you weren’t left short if you had a quiet month. Because of this, the “Charge them a set per/recipient fee” approach from the delivery options above usually makes the most sense for our customers. Try and keep it simple From my own experience charging clients for email marketing and also the feedback we get from our customers, it seems that simple is almost always better than complex. Splitting the costs into template design, delivery costs and making subsequent charges is about as granular as most of our customers get and that model seems to work best for most. Hitting your clients with fees for every little detail in the process can certainly be a profitable way to offer email marketing, but you’re also running the risk of confusing some customers. Worse still, you may end up alienating some customers by giving the impression you’re trying to milk them for everything they’ve got (even if you’re not). Finally, email marketing is often sold to clients as part of a wider package that might include a web site or some paid search advertising. Billing for the range of these services can get complicated pretty quickly, so the simpler you keep your email marketing component the better. I’d love to hear how you guys go about charging for your email marketing services. Do you use the approaches I mentioned here or take a different approach to billing your clients?

Blog Post

Some Hard Numbers on Preview Panes and Image Blocking in Consumer Emails

As a nice follow up to Mark’s research into the current state of image blocking in email last week, I just came across an interesting study from MarketingSherpa via Tamara’s blog. They surveyed 1,323 consumers over 18 to find out their email viewing preferences in regards to image blocking and preview panes. We already know preview panes are extremely popular in the B2B market because of the popularity of Outlook, but it’s important to note this survey was targeted specifically at the consumer market. A full 38% of online consumers now use preview pane ‘capable’ email clients and 64% of people who are offered preview panes start using them as their default… Can you imagine if people judged your print ads by just a corner of the creative? Or your TV ads by just a few frames? That’s what’s increasingly happening with email. Consistent with our recommendations back in November 2005, this great comparison really drives home the importance of ensuring the best bits of your email are at least visible in a preview pane. To get an idea of exactly which corner many subscribers will be seeing, they also asked the type of preview pane being used. Turns out that just like business email users, home email users also favour the horizontal preview pane, which makes sense considering that’s the most popular default in those email clients that offer one. Because of this, it’s safe to assume that the most important content in your email should be at the top of your email, and preferably top-left to get the best of both types of preview panes. Another interesting find was that between 35-50% of consumers have images off by default in their email clients. Of course, a percentage of those surveyed would enable images for safe senders and images would still be displayed automatically if you were in their address book. Check out the rest of the survey for the nitty gritty.

Blog Post

Image Blocking in Email Clients: Current Conditions and Best Practices

For the most current results on image blocking in email clients, view our updated post. Many people, either by email client defaults or personal preference, are blocking images in the HTML-formatted messages they are accepting. And then there are a small number of people who block HTML entirely. As David Greiner points out, according to a study by Epsilon Interactive 30% of your recipients don’t even know that images are disabled. In any case, it’s logical for recipients to block images and good practice for us to prepare for this scenario. So what happens to our emails when images are blocked? What are the best practices for ensuring accessibility and optimizing presentation therein? What are default settings across the board? Let’s get down to answering these questions. Default Settings in Popular Email Clients Every client has its own default settings regarding displaying/hiding images. And while most email clients have a setting to turn images on or off, some offer conditional settings which are contingent upon known senders or other factors. The following table outlines the default settings of popular desktop- and webmail clients. (Note that I’m reporting the settings of my personal versions of each client and that settings may differ from one version to another.). I have included contextually-relevant references to ALT text as part of this article. For a more in-depth look at how ALT text renders in popular email clients, you may want to read a more comprehensive article I wrote about ALT text. Image Blocking in Webmail Clients Client Default Img Display Trusted-Sender Img Display Renders ALT Text Yahoo Mail on No No Yahoo Mail Beta on Yes Yes Windows Live Mail off Yes No Gmail off Yes sometimes .Mac on No sometimes Hotmail on Yes No AOL on Yes Yes   Image Blocking in Desktop Clients Client Default Img Display Trusted-Sender Img Display Renders ALT Text Apple Mail on No No Thunderbird on Yes Yes Outlook 2007 off Yes sort of Outlook 2003 off Yes Yes Outlook Express on No Yes Lotus Notes on Yes Yes Eudora on No sort of Entourage on No Yes AOL off Yes No So now that we’ve covered the settings in popular email clients, let’s outline how we can help our emails survive image blocking. Recommendations for Successful Deployment From my perspective, an email is successful when it meets the following goals: Retains visual integrity in the most commonly used email clients with images enabled. Retains readability in the most commonly used email clients with images disabled. Is readable to people with visual disabilities and navigable to people with mobility disabilities. Is low in weight for recipients using mobile devices and dial-up connections. Is deployed to a permission-based list of subscribers. Meets CAN-SPAM Act requirements. Legitimately passes common tests employed by spam filters. Looking at this list it becomes clear just how important it is to consider image blocking when designing/developing an email. Dependency on images can lead to failures on many different levels. Preparing for a scenario in which images are disabled puts us at an advantage to oblige the settings/preferences of a broader range of recipients. Become a “Known Sender” Nearly every email client in my test suite enables people to automatically display images when a message is from a “known sender” (senders appearing in white lists, contact lists or address books). Because our subscribers have requested to receive emails from us, they will naturally want to ensure they receive the messages. Spam filters can disrupt legitimate communication when subscribers are unaware of how they function. With a couple, simple notifications we can increase our chances of success: Ask a subscriber to add the email-list address to their address book (right on the subscribe form) and briefly explain why. Enable a double opt-in subscription process, and send a plain-text confirmation which includes a request to add the email-list address to a recipient’s address book. And, again, briefly explain why. Informing a subscriber about this simple step will increase our chances of images being enabled and will help us legitimately pass through spam filters. Prepare for Disabled Images So we’ve created a structurally-sound template, we’re preparing to send our email to a permission-based list of subscribers and we’ve taken steps to see our list email-address into the address books of the said subscribers. There are still a number of people on our lists who will intentionally block images, and therefore we should account for that scenario. I wrote an article outlining a technique for this very purpose. With the releases of Yahoo Mail Beta and Windows Live Mail we lose the ability to integrate the aforementioned technique. However, Ryan Kennedy from the Yahoo Mail team has pointed out that they are looking into potential resolutions for this obstacle. Positioning aside, there are some things we can do to retain the integrity of our emails when images are disabled: Begin an email with HTML text or logical ALT text. We can decide what a reader sees in a preview pane or small message-window. If we’re prepared, we can optimize the experience of scanning messages. Moreover, some applications offer the ability to preview the first few lines of text before an email is loaded/viewed. Use ALT text. This seems so obvious I’m almost embarrassed mentioning it. However, I don’t have enough fingers and toes to count the email newsletters I receive sans ALT text, so there it is. Use captions for contextually-important images. In lieu of proper support for ALT text across the board, we can add captions to images which are vitally important to the content of an email. Avoid Image-Based Emails Again, this is something which should seem obvious. But image-based emails are often practiced as a simple, easy method of delivering a pretty design irrespective of the rendering circus among the array of common email-clients. When we ponder image blocking as part of the rendering equation, it’s easy to see how an image-based email could be completely destroyed with a single preference. Furthermore, this doesn’t take into consideration file sizes for mobile/dial-up recipients, accessibility for those visually impaired or the HTML-to-text ratio that popular spam filters apply with their algorithms. In summary, we should be giving serious consideration to image-blocking and what we can do about it. It’s natural and reasonable why people disable them, but with the right approach we can improve the experience for our subscribers.

Blog Post

Creating and Using Segments

Something you may not have used in your Campaign Monitor account is segments. A segment is a subset of one of your existing subscriber lists. For example, instead of emailing to everyone on your ‘Alpaca owners’ list, you might just want to send an email to the Huacaya Alpaca owners. That’s a perfect job for a segment. Instead of paying to send your email to everyone on the list, send it to just the people who are most interested in your particular topic this week. You save money, and you can make your email much more specific, hopefully leading to better response rates. Creating a segment To get started with segments, jump into your account. Hit the ‘Manage Subscribers’ tab, and then pick the list you want to work with. You’ll find the segments link at the bottom of the right column. Now you can hit the big green button to create a new segment. You’ll need to give it a sensible name that describes the segment so you can use it later. So, in my example, ‘Huacaya owners’. Create the segment, and you are ready to add some rules. Using rules with segments Rules are what you use to select the addresses you want. For every list, you can create rules that are based on Name, Email address and date subscribed. If you have custom fields in your list, you can make rules based on those too. In my case, I want to create a segment of subscribers who have an ‘Alpaca Type’ of ‘Huacaya’. So I drop down the select box and choose ‘Alpaca Type’, and hit Go. Now I can create my Alpaca Type rule. I would select ‘Alpaca Type equals Huacaya’. (It’s not case sensitive) The full list of possible rule types is: Value: Equals Does not equal Is provided Is not provided Number: Is greater than Is less than Email address: Contains Does not contain Date subscribed: Is before Is after Campaigns: Campaign was opened Campaign was opened – Any link clicked Campaign was opened – Specific link clicked Campaign was opened – No link clicked Campaign was not opened You can combine any number of rules to split your segment as far as you like. Not all of them are available for every field or list. You can also add multiple rules for the same field. For example “Email contains hotmail or Email contains gmail” Each time you save your segment, the count at the top right will show you how many people you are selecting with all the rules applied. You can also hit the link there to see who is in your segment. Segments are smart! Once you’ve finished tweaking your rules, you’ll have a set of subscribers. Every time you come back to check out your segment, and every time you send a campaign to your segment, the rules will be re-applied to your list, and the segment will be updated. So now you when you create a new campaign and select some recipients, your new segment will show up as an option. Huacayas owners will rejoice with their own individual email! More ideas for using segments As well as picking your favorite Alpaca owners, segments can be used in lots of different ways to increase the effectiveness of your campaigns. Here are a few ideas to get you started. Send a special thank you offer to your old school members, who signed up before a certain date. A second chance offer to people who did not click through on your last campaign Target campaigns to certain geographical areas Offer special prices to frequent purchasers Send emails to people interested in certain topics FAQs about segments Is sending to a segment charged like a normal campaign? Yes, each time you send to a segment of your list, you will pay the normal rates (USD$5 delivery fee and 1 cent per recipient). Do I have to update them manually? No – segments are automatically updated before you send to them, and each time you view the segment details. They don’t update ‘live’ because of the amount of processing that would require. Can I do a ‘contains’ rule for custom fields? Sorry, no. At the moment, you can only use ‘Contains’ and ‘Does not contain’ rules for the email address.

Blog Post

How ALT Text Renders in Popular Email Clients

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.

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