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
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.
You have me sold! I have been searching for years on how I can offer stylish email newsletters to my clients, but no one wanted to part with that valuable information without a pricetag. If I knew it was going to be as simple as designing a webpage and uploading it to Campaign Monitor, I would have contacted you eons ago! Thanks for making something so wonderful available to everyone! Doris Cush, Owner, Fraidy Kat Design
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.
I couldn’t be happier with your product. I run my own design and communications company in Boston and my clients have been clamoring for a product like Campaign Monitor. Your pricing model is spot on and a huge improvement over your competitors, plus your interface is top notch. Keep up the *great* work. Karl Stier, Watershed Media
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.
If you’re used to coding your email newsletters for Gmail, you’re probably an expert on inline CSS by now. As our recent CSS research highlighted, Gmail doesn’t support the <style> or <link> element. This means if you want your links to be in a size 11 font and a light blue color, you’ll need to code something like… <a href="https://www.campaignmonitor.com" style="font-size:11px;color:#4fb5e9;">Visit the web site</a> to find out more OK, kind of annoying but it works. But what about our automatically generated links for unsubscribing, linking to a web-based version and adding a forward to a friend link. As you know, these are generated after you import your design from the tags present in your HTML, such as <unsubscribe> and <webversion> and up until now you couldn’t add your own inline CSS to them. Well, not until today anyway. Introducing the style=”” attribute By adding a style="" attribute to the unsubscribe, webversion and forward a friend tags, we’ll automatically add that inline CSS to the personalized links we create for each recipient. Using our example above, let’s say we want to make our unsubscribe link at the bottom of the email blue and in size 11 font. <unsubscribe style="font-size:11px;color:#4fb5e9;">Unsubscribe</unsubscribe> from our monthly newsletter list We’d get <a href="http://www.unsubscribeaddress.com" style="font-size:11px; color:#4fb5e9;">Unsubscribe</a> from our monthly newsletter list You can use exactly the same technique for the web version and forward to a friend tags too, such as <forwardtoafriend style=""></forwardtoafriend> and <webversion style=""></webversion>.
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.
Today we’re talking to Kandace Nuckolls, founding partner of Needmore Designs, a Portland based design firm that’s been using Campaign Monitor for themselves and their clients for more than 2 years. We asked Kandace about how she pitches email marketing to her clients, charges for her services and even the biggest email marketing mistakes she’s made to date. We’ll be bringing more fantastic insights from some of our clever customers over the coming weeks. How did you gets started providing email marketing services to your clients? We began by sending out our own semi-monthly newsletters. Our clients loved them and began asking if we could help them create something similar. We also started noticing the large number of poorly-designed, mismatched mailings going out, and felt that we could offer to bring the design of a website into an email. Has it been hard to convince your clients to embrace email marketing? How do you approach this and any tips to share? “We began by sending out our own semi-monthly newsletters. Our clients loved them and began asking if we could help them create something similar.” We work with a lot of artists, musicians and creative businesses-people who have a real need for mailings. In fact, many of our clients were already keeping their own mailing lists on spreadsheets and manually selecting all of their recipients for every announcement. What we offer is an easy way to have visitors sign up right from a client’s website, which helps to grow their fan base (they end up with many more people on their list-specifically interested people-folks who have already been to the client’s site). And, sending is much easier. Now that MailBuild is also an option, we are able to offer exactly what our clients want, whether it is a do-it-yourself mailing approach or an individually designed and sent campaign. How much of your current schedule is spent on email marketing for your clients? “Everyone can benefit from the communication and sense of community that newsletters create and encourage.” Because we now offer email newsletters with every website we produce, the time we spend is just another facet of the project. We feel strongly about this! Everyone can benefit from the communication and sense of community that newsletters create and encourage. Also, many of our clients are opting for MailBuild, a fairly easy setup and design since the design mirrors the sites we are building. How do you charge your clients for your email marketing services? We charge a flat fee for initial design and integration with the website and then a fee per mailing. We include access to statistics along with this fee. For some clients, we also have post-campaign meetings to chat about results and future changes in their campaigns. What do you think is the biggest benefit of email marketing? We learned with our own mailings that they are a great opportunity to create community and keep your business in the minds of others. Also, we are compelled to create interesting emails so that people use the “forward to a friend” feature and spread the word. From your own experiences, what’s the biggest challenge right now in email design? Personally, my biggest challenge is to hold myself back from gratuitously using graphics when they’re not actually needed. I have to be sure to always check emails with images turned off, to make sure they still work. I got a mailing from a friend’s list yesterday that was nothing but a page full of blue, and three broken image icons! You never know when something might go wrong, and the images might go missing. Be sure folks can still read what you have to say. How do you communicate campaign results back to your clients? We give them a log-in to their control panel. Every once in a while, we’ll sit down with a client and go over their results (what they mean, how we might tweak their mailing in the future). You can tell right away which ones are the “statistics freaks” – they quickly become engrossed in the details! Has it been hard for your team to transition from web design to email design? The biggest challenge has been learning about different email programs and their interaction with HTML. However, this isn’t all that different from web design – you should use the right tools to get the job done. They complement each other very nicely. What’s the biggest email marketing mistake you’ve made to date? That would be just last week, when we sent out a newsletter for our personal project, Gone Raw. We spent some time perfecting the copy, double-checking the email list, and getting everything in order. We sent out the list, and promptly went out for a celebratory drink (or three). When we checked back the next morning, we discovered the site had gone down almost immediately after we sent out the mailing (this never happens, we swear!) and had been down for about 12 hours. Oops. Any email marketing secrets to share with your fellow designers? Keep it simple. Even our mailings probably have too much graphics. As many similarities as email has to web design, there are very significant differences, too. There’s something to be said for sending out plain text emails, though being a designer, I just can’t bear the thought myself!
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