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
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!
Mark Brownlow just put together a great motivational piece to encourage email marketers to start sending more targeted emails to their subscribers. I loved this quote in particular, which is something I’ve heard variations of countless times before… One might get the impression that segmentation and targeting is just for those with degrees in computer science or a big fat wad of cash to throw at database vendors. I’ve seen the faces and the questions at workshops: “Ugewh! Sounds great but we don’t have the skills or resources to do that kind of thing.” Mark’s right, even basic forms of targeting are a big step forward and can lead to better results and less complaints and list fatigue. Our custom fields and segments feature makes it so damn easy to capture data about your subscribers. Combine this with our segments feature and you can create targeted sub-lists in a matter of seconds. If the quote above rings true to you, checkout this 5 minute video walkthough where we cover the simple process of adding custom fields and creating segments in your account. Targeting your subscribers doesn’t get much easier.
Last Sunday, Microsoft made an announcement about the official launch of Windows Live Hotmail, the new version of Hotmail that will be rolled out to all of their users over the coming days. This wasn’t big news, we’ve all known about the beta for a long time and covered it in detail in previous posts. However, there was one little bullet point in the press release that actually was big news to us email designers. In the coming weeks, Microsoft will introduce an additional e-mail client option for Windows Live Hotmail with the release of Windows Live Mail beta, a free consumer e-mail client available via download that will be a successor to Outlook Express and Windows Mail on Windows Vistaâ„¢. Holy crap! We’ve got a new email client to contend with people. Windows Live Mail comes to the desktop After some digging around, we tracked down an entire entry by Live Mail Program Manager Tanja Fournier about the new email client on the Live Mail blog. It’s always been a bit confusing to us. There was Outlook 2007, regular old Outlook Express, and then when Vista came we got Windows Mail. On top of this Microsoft have also been offering Windows Live Mail Desktop Beta from their Live Beta site since July 2006. Thankfully, the press release points out that this new app will be the official successor to Outlook Express and Windows Mail on Vista, and will be built on the Windows Live Mail Desktop Beta foundations. This is great news because this version, in particular, had seen loads of improvements since its release and was starting to shape up as a great desktop email client (pictured below). The new app will feature plenty of decent features like easy synchronization of Hotmail and POP accounts between the desktop and web-based versions and a cleaner, faster interface. That’s all good and well, but what are the implications for us email designers and marketers? Unsubscribe and spam complaint integration Currently, Windows Live Mail Desktop Beta (pictured above) supports the Unsubscribe functionality we mentioned here last week, reducing the chance of false spam complaints and giving subscribers another way to unsubscribe from your lists. The current beta also features integration into Hotmail’s junk mail feedback loop which already hooks directly into your Campaign Monitor reports. This means that we can report on any spam complaints made by Live Mail customers, whether they use the web or desktop version. Disappointingly, this option is off by default in the current beta, so let’s hope this is switched to the default option for the final version. What about CSS support and image blocking? We’ve done some CSS testing on the Live Mail Desktop Beta and can confirm that unlike Outlook 2007, it does, in fact, use Internet Explorer to render all HTML emails. This means it features almost perfect CSS support (yep, even position and float work nicely). The problem here is, neither the press release nor blog post mention if this will continue with the new app coming in the next few weeks. Of course, given the fact that this release will be built on top of the Windows Live Mail Desktop Beta, there’s a very good chance the same rendering engine will be used. This is further backed up by the fact that Outlook Express and Windows Mail on Vista both use the IE rendering engine already. You can breathe a tentative sigh of relief if you’re using CSS based layouts for business to consumer based emails. Like Windows Live Hotmail (that’s the web-based version if it’s starting to get confusing), it appears that the desktop version will block images by default. We also noticed an option in the preferences to show images by default for any recipients in the safe sender list or the user’s contacts, following a similar path to the web-based version. Key takeaways The new Windows Live Mail (for the desktop) is shaping up to be Microsoft’s best email client yet for email designers and marketers. You’ve got to love great CSS support combined with List-Unsubscribe functionality and feedback loop integration for spam complaints. No news yet on how strongly Microsoft will be pushing the new email client, but if it’s delivered via Windows Update as a replacement for Outlook Express and Windows Mail for Vista and promoted to all Hotmail users, this client could quickly become one of the most popular in the world. Right now we’ll have to wait and see how they play this one out. Giving consumers only one free email client (Windows Live Mail) is way better than confusing them with a choice between 4 possible alternatives. We’ve been in touch with Microsoft about getting our hands on a copy of the final version of Windows Live Mail, and will post an update here the moment we find out more.
Welcome to the fourth episode of our Extreme Email Makeover series with Dr. Mark Wyner. We’ll be running a series of email makeovers to help illustrate best practices for email design, layout, and construction. Dr. Wyner will assess an existing email newsletter for ailments which can easily be cured with treatments in modern “medicine.” A patient’s vitals will be provided (email intent, target audience, etc.) and a diagnosis will be revealed. Finally, a cure will be outlined, complete with a brand new email template designed and built by Dr. Wyner. The Patient Miroballi Shoes sends an email newsletter for their customers which announces product offerings, discounts, and sweepstakes. The emails comprise brief advertisement-like messages and are deployed every month or two. Email Clients This is a consumer-based newsletter and thus we can safely assume the primary target clients are as follows: Apple Mail Thunderbird AOL Outlook Express .Mac Yahoo Gmail Windows Live Hotmail Hotmail Outlook Note that while it is likely most consumers are reading these emails on their personal computers, some may be using typical office-clients such as Outlook. This has been considered as part of the markup development. The Diagnosis Exploratory surgery quickly revealed the culprit of the pain: a message entirely enveloped in images. This was a life-threatening condition which would require immediate surgery to stop the bleeding. Design Ailments The overall design of this email was clean, professional, appropriate for the audience and closely related the company’s website design. However, it was lacking scannable characteristics and missed key opportunities for the addition of secondary information. Dr. Wyner addressed the following disorders as part of his treatment: [fig. 1] Graphical text throughout (all information vulnerable to possible omission) and no “web version” link or best-practice “permission reminder” statement (learn why this is important). Overly consistent connection to website with contextually-irrelevant navigation. Missed opportunity for anchor links (quick access to items of immediate interest). Left/right alternate positioning can be controlled with graphic text, but not HTML text. Small, compressed graphic-text (impossible to increase size) and little visual distinction between subheads and descriptions. Location information (only point of sale) buried at bottom of email. CAN-SPAM Act messaging folded into disclaimer, no copyright notice and missed opportunity for a “forward to a friend” link. It should be noted that this template was not only CAN-SPAM Act compliant (reference item 7 in fig. 1), but the patient went the extra mile for good health in adding a telephone number. The Dr. added a link to Miroballi’s home page for good measure. Markup Ailments The risks of sending image-based emails extend well beyond visual design: Large file sizes trigger spam filters and increase bandwidth usage for mobile/dial-up recipients. When images are disabled, the content is lost in its entirety. Those with visual impairments are unable to access any content. Recipients with small screen devices (mobile) either receive no content (stripped images) or an image reduced to a size in which the content becomes unreadable. But the primary risk of sending a single-image email is the potential for legitimate emails to be filtered as spam. An emerging trend among spammers is a technique labeled “image spam,” whereby text is hidden within an image in an attempt to foil the filters. Though while it has been a successful technique for spammers, defenders are on guard with new systems to detect image spam. Content management also becomes an issue whereby an author/editor must have a graphically-compatable application to create new editions or make modifications to existing content. Moreover, s/he must also have compatible fonts and the necessary skills to work in a said application. Email Vital Signs Standards-based markup: n/a CAN-SPAM Act compliance: perfect File size: 244KB The Cure Simple ailments called for simple treatment. Treatment Text-to-HTML: the graphic text was converted to HTML text to ensure accessibility and content readability, improve ease of use for content managers, reduce the overall file size and decrease the possibility of spam filtering. Improve information design: secondary content (website navigation) and important location-information was relocated to a second column. Additional secondary-content (special sales) was also integrated in the new column to add overall value. Experience-design evolutions: a set of anchor links was applied as an overview to the featured content and to enable quick access to items of interest. Permission reminder: a preface was integrated to assist with previews/snippets and to help reduce spam flagging. A “web version” link was included therein. Visual design evolutions: text formatting was enhanced to improve information scanning and segmentation. Legal-messaging clarity: CAN-SPAM Act information separated from disclaimer notice, a copyright was integrated. A “forward to a friend” link was also implemented. Addition of peer-to-peer functionality: a “forward to a friend” link was implemented to simplify information sharing. Strong call-to-action: two scannable instances of the call-to-action were integrated, clearly exhibiting the intent of the email. The first instance includes a graphic for emphasis and the second instance is HTML text to ensure call-to-action visibility when images are disabled. Email Vital Signs Standards-based markup: yes CAN-SPAM Act compliance: perfect File size: 20KB (8% of the original size) Before and After Let’s review some screen shots illustrating some key benefits of this surgery. Thunderbird: plain-text view [fig. 2.1: before (left), after (right)] These screen shots were taken in Mozilla Thunderbird in plain-text view. Looking at the original template (fig. 2.1, left) we can see how the image-based text renders the email unreadable for those using text-based clients. Note how in the new template (fig. 2.1, right) all content is clearly readable because of proper, semantic markup. Yahoo Mail: images disabled [fig. 2.2: before (left), after (right)] These screen shots were taken in Yahoo Mail with images disabled. Looking at the original template (fig. 2.2, left) we can see how the content itself is disabled along with the images. Note how the new template (fig. 2.2, right) all content is clearly readable because of proper, semantic markup. Opera Mini webmail: images enabled [fig. 2.3: before (left), after (right)] These screen shots were taken in Opera Mini webmail with images enabled. Looking at the original template (fig. 2.3, left) we can see that the content is essentially rendered unreadable. Note how in the new template (fig. 2.3, right) most of the visual design is retained, anchor links provide an overview of subsequent content and all text is clearly readable. Notes on Outlook 2007 People continue to ask about how emails hold up in the Outlook 2007 environment. So although this template is consumer based in nature, I thought it would be helpful to show a screen shot of its performance therein: Note that while we lose the floated images and graphic bullets (unavoidable), nearly the entire design is in tact. And it took a single-row, two-column TABLE to make it happen. So for those facing a requirement of design integrity within Outlook 2007, the minor degradation of web standards may be a saving grace in avoidance of a complete breakdown of sensible markup. Summary Dr. Wyner approached treatment from many angles. Speech therapy (accessible/semantic markup) to help the patient communicate via all email clients, minor cosmetic-surgery to make the patient visually appealing (because when we look good, we feel good) and reduction of fat (removal of image-based text) will make the patient’s heart and lungs happy (bandwidth). Check out more handy work from Dr Mark Don’t miss the other makeovers in the series: Vol. 1: Teenie Tiny Tots Vol. 2: Tangent Communications Vol. 3: EIU Alumni Association
It’s been a busy year for the Freshview team, which I guess can happen with more than 1,500 new customers signing up to our apps each month. Still, I think we’ve managed pretty well for a full-time team of 5 (there were 3 of us less than 6 months ago). The job’s never done though, and we’ve got some pretty big ideas on how we can make Campaign Monitor and MailBuild loads better. To do that, we need to find more super talented people to join our team. As of today, we’ve got 3 new positions available at the Freshview office in Sydney, and a fourth available for someone to help out from the US or Canada. For those interested, you can read a little more about what it’s like working for us and check out the official lineup below: Quality Assurance Engineer Senior .NET Developer System Administrator US/Canada Based Customer Support Legend None of these are incredibly urgent and we’re a pretty fussy bunch, but we’re putting them out there now realizing we might not find the perfect person overnight. If you think you’re a good match or know anyone who might be interested, please let us know.
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.
We’ve just pushed an update live that’s been a long time coming. From today, you can now include a single click unsubscribe link in the following automated emails: The double opt-in verification email – When a new subscriber completes your double opt-in subscribe form, we automatically send them a customizable email with a link they need to click to confirm their subscription. The subscription confirmation email – When a new subscriber is added to your list (either single or double opt-in), you have the option of sending them a customizable welcome email (check out these tips on writing good welcome emails) Including a single-click unsubscribe link in both of these emails is a great way to add another layer of trust with any new subscriber and show them right off the bat how commited you are to respecting their preferences. As always, you can customize the unsubscribe confirmation page that anyone sees when they click this link so they’re redirected to your own (or your clients site). You can head into your “Unsubscribe Settings” for each list to set this up.
We recently made an update to reduce anxiety, but this one is aimed purely at reducing frustration. Previously, when making changes to either the HTML or text component of your email creative from the Campaign Snapshot, you’d be forced to go through the update steps for both. This became all the more frustrating when you wanted to make a small tweak to the text component of your email, but were forced to re-import your HTML version first. Today I’m pleased to say this annoyance has been removed and as per the screenshot below, you can now make quick changes to either your HTML or text versions in a single click. This was one of those annoyances that kept getting delayed for bigger updates, but enough was enough!
Since we released the Campaign Monitor API way back in July 2005 we’ve seen it used in ways we never anticipated. On top of the way you guys have been using it, we’ve also been incredibly lucky to have many customers put together API kits in their language of preference (such as Ruby on Rails, PHP, .NET and Flash). For those of you familiar with the incredibly popular Drupal content management system, Campaign Monitor customer Alexis Bellido recently put together a free Drupal module that makes it easy to integrate Campaign Monitor into any form on a Drupal managed site. Install the module then drop in your API key and List ID and you’re done. Judging by the comments, a number of further improvements to the module are in the works, so if anything eventuates we’ll be sure to post about it here. A huge thanks to Alexis for putting this module together, we’re looking forward to seeing where he takes it from here.
Welcome to the third episode of our Extreme Email Makeover series with Dr. Mark Wyner. We’ll be running a series of email makeovers to help illustrate best practices for email design, layout and construction. Dr. Wyner will assess an existing email newsletter for ailments which can easily be cured with treatments in modern “medicine.” A patient’s vitals will be provided (email intent, target audience, etc.) and a diagnosis will be revealed. Finally a cure will be outlined, complete with a brand new email template designed and built by Dr. Wyner. The Patient The Alumni News Bulletin is a monthly email-publication for Eastern Illinois University (EIU) Alumni Association. The newsletter covers (a whole lot of) information about the EIU-campus, alumni events, etc. Email Clients As this newsletter is deployed by an educational institution to a subscriber base of graduates, it can be assumed that a general audience of recipients are employing a broad array of email clients such as: Apple Mail Thunderbird AOL Outlook Express .Mac Yahoo Gmail Windows Live Hotmail Hotmail Outlook Note that while it is likely most of the alumni are using personal email addresses to receive the bulletin, some of them may be using typical office-clients such as Outlook. The Diagnosis An initial assessment exposed an array of potential infirmities, but an exploratory surgery would be necessary to grasp the full scope of the patient’s condition. Upon investigation, it became clear that reconstructive surgery would only be the beginning of treatment which would be necessary to stabilize the patient’s health. Design Ailments The EIU Alumni Association has quite a lot to tell each month, and they sure pack it in. While very informative, this email is quite extensive for a single message. And for recipients willing to read a 1,700-word email, the visual design left something to be desired. Dr. Wyner addressed the following disorders as part of his treatment: [fig. 1] Graphical masthead (title and issue date vulnerable to possible omission). “Web version” link placed below large masthead-image and in the right-column of a two-column layout (very low in the hierarchy). Lengthy, redundant information consuming valuable real estate (albeit useful, it is more of a utility statement). Secondary information placed in most important corner of layout, including gratuitous use of graphical text (vulnerable to possible omission). Overwhelming number of events (distracts attention from events on the immediate horizon). Photos with graphic borders/shadows (bandwidth-heavy and labor intensive to create). Excessive number of story previews (decreases potential for quick scanning). No visual separation between stories and utility information about the association (blends recurring information with news). No link with “forward to a friend” feature (especially when Campaign Monitor makes this so easy). It should be noted that this template was not only CAN-SPAM Act compliant (reference item 9 in fig. 1), but the patient went the extra mile for good health in adding a link to their website as well as two telephone numbers. Nice work! Markup Ailments When I opened up the patient’s code, it became clear that there was a lot of work ahead to stop internal bleeding. Following is a list of life-threatening ailments which required attention: CSS was in short supply, and only half of it was embedded (external style sheets are scarcely supported, trigger many spam filters and are most often stripped altogether). The CSS which was used utilized a naming schema with no reference to presentation (.style13, .style 14 and so on) creating an ambiguous environment for third parties attempting to format content. Tables were used for all aspects of layout, including use of 1×1 pixel “spacer GIFs” (an antiquated technique which increases file-size and decreases accessibility), and many FONT tags were used throughout. ALT text was not used for graphical text. Lack of semantic markup (unnatural and inconsistent paragraphs, subheads, etc.). Email Vital Signs Standards-based markup: no CAN-SPAM Act compliance: perfect File size: 56KB The Cure With a clear diagnosis a treatment was obvious. A visual-design overhaul would help heighten the attention of the patient’s audience and enable content editors to easily create new editions. Improving the information design and using semantic markup would ensure readability and accessibility for all recipients. Finally, a depressant would be prescribed to reduce the amount of information exhibited in each edition. Treatment Text-to-HTML: the graphic text was converted to HTML text to ensure accessibility and content readability, improve ease of use for content managers, reduce the overall file size and decrease the possibility of spam filtering. Link to website version: while the original template did include a link to a website version of the email, its placement was less than optimal. Moving this to the beginning of the template ensured it would be visible in the very scenario it is intended to reconcile. Improve information design: the creation of two columns—one for primary information, and another for secondary information—and placing the former first in the hierarchy (left column) would strengthen the overall information structure and ensure fluid readability in the broad array of email environments. Reduce information overload: rather than printing previews to every news story from the monthly cache, only four stories are featured with previews. Then a list of titles for the remaining stories are printed under the subhead “additional news.” The list of upcoming events was also optimized to reduce clutter and bring focus to those in the immediate future. Optimize visual treatment of contextual photos: using CSS borders is a light-weight and manageable solution to the approach of creating photos which emulate three-dimentional objects. Separate stories from utility information: recurring information about the association and the university was segregated from the newsletter stories to increase reading efficiency for monthly readers. Permission reminder: a preface was integrated to assist with previews/snippets and to help reduce spam flagging. The doctor performed one final procedure which would serve the needs of both appearance and character: [fig. 2: before (top), after (bottom)] Dr. Wyner noticed how the patient used a seasonally-relevant photograph in each edition of their newsletter (fig. 2, top) to help capture the relevance of the moment. He knew could make a few minor hexadecimal changes to the CSS and change one image SRC value to create a unique template for each season of the year. With that, we are happy to announce the birth of quadruplets (fig. 2, bottom)! Meet Spring, Summer, Fall and Winter. Email Vital Signs Standards-based markup: yes CAN-SPAM Act compliance: perfect File size: 17KB (30% of the original size) Before and After Let’s review some screen shots illustrating some key benefits of this surgery. Thunderbird: plain-text view [fig. 4.1: before (left), after (right)] One of the most detrimental aspects of the markup was the lack of semantic structure. Many paragraphs were created with BR tags instead of the semantically appropriate P tags, and subheads were created with CSS-styled P tags instead of semantically appropriate header tags such as H2. Coupled with a lack of ALT text and gratuitous “spacer GIFs” the problem is quite serious. These screen shots were taken in Mozilla Thunderbird in plain-text view. Looking at the original template (fig. 4.1, left) we can see how the antiquated markup and gratuitous images render the email scarcely readable for those using text-based clients. Note how in the new template (fig. 4.1, right) the preface text is visible first in the hierarchy, the title and issue date are immediately obvious, ALT text for the photos are clearly exhibited and paragraphs are properly formatted. A word about plain-text alternatives Some email clients (such as Thunderbird) offer a preference to disable HTML rendering even though they are an HTML-capable. Many other email clients—primarily mobile devices and screen readers—simply do not support HTML, and instead look for plain-text alternatives. It is always a best practice to send multi-part emails (HTML and plain-text versions as a single package) to ensure that a properly-formatted plain-text version is available to those who can’t (or choose not to) render HTML. However, if for whatever reason you are unable to send a multi-part email, the aforementioned process of utilizing semantic-markup will help your content survive the evolution from HTML to plain-text if rendered as such. .Mac: images enabled [fig. 4.2: before (left), after (right)] These screen shots were taken in .Mac with images enabled. Looking at the original template (fig. 4.2, left) we can see some significant problems: An inappropriate marriage of color and background declarations exhibits dark text on a dark background (including nearly-undecipherable links and subheads). Secondary content (alumni links) take center stage while important content is forced downward. Note how the new template (fig. 4.2, right) retains its formatting and consequently retains its readability. Opera Mini webmail: images enabled [fig. 4.3: before (left), after (right)] These screen shots were taken in Opera Mini webmail with images enabled. Looking at the original template (fig. 4.3, left) we can see some significant readability issues: Many small-screen devices reduce large images to the width of the screen. In this case the graphic title and issue date are reduced to a size which is nearly illegible. Lack of semantic markup clumps all fake paragraphs into a single paragraph. Placing secondary information in a left-hand column and primary content in a right-hand column, forces important information (including “web version” link) down in the hierarchy. Note how the new template (fig. 4.3, right) addresses these issues: Use of HTML text for the masthead ensures the title and issue date are readable and immediately obvious. Semantic markup clearly differentiates subheads from paragraphs. Important information appears first in the hierarchy, offering immediate help (preface) and value (first story) for the reader. Opera Mini webmail: images disabled [fig. 4.4: before (left), after (right)] These screen shots were taken in Opera Mini webmail with images disabled. Looking at the original template (fig. 4.4, left) we can see that the aforementioned issues (with images enabled) are made even worse with images disabled. The primary issue is that with no ALT text for the masthead image and only sporadic implementation for the links/subheads, the content becomes practically unreadable. While some of the text is indeed legible, it is ambiguous without subheads and the presence of a title. Note how the new template (fig. 4.4, right) is very readable with information which retains nearly all of its formatting. Outlook 2003: auto preview [fig. 4.5: before (top), after (bottom)] These screen shots were taken in Outlook 2003 using its “auto preview” feature. Looking at the original-template preview (fig. 4.5, top) we can see that because Outlook is using the image source for its auto preview, it offers literally no information about the email itself. Note how the new-template preview (fig. 4.5, bottom) at least assures the recipient that s/he is a subscriber. Gmail: snippet [fig. 4.6: before (top), after (bottom)] These screen shots were taken in Gmail using what it refers to as “snippets” (serves the same purpose as Outlook’s auto preview). Looking at the original-template snippet (fig. 4.6, top) we can see that Gmail has plucked the ALT text from the images in their order of appearance. Given that ALT text was used sporadically, the preview is quite meaningless. Note how the new-template snippet (fig. 4.6, bottom) at least assures the recipient that s/he is a subscriber. A word about auto preview and snippets The aforementioned thoughts reference general considerations about optimizing content for auto preview and snippets. However, David Greiner devised a well-thought-out technique for truly targeting these previews. If you are interested in capturing this valuable real estate, you’ll want to check out his post about this technique. Thunder screen reader Link 1: ~alumni Link 2: Eastern Illinois University Home Link 3: s://www.give2eiu.eiu.edu Link 4: www.eiu.edu/~pubaff Link 5: EIU Alumni Association Membership Page Visit the Link 6: events page for more information and registration. February 17 Link 7: Alumni Reception Camelback Inn, Scottsdale, Ariz. February 24 …(cont.)… Field Narrowed to 16 for EIU’s President Position You are receiving this email because the email address [email] was subscribed to the EIU Alumni Link 1: email list . Having trouble reading this email? View it on our website. Page Headline: eiu alumni newsletter march | 2007 Field Narrowed to 16 for EIU’s President Position The field of presidential candidates has been narrowed down from 58 to 16 as the search for the next president of EIU continues. Robert Webb, the Presidential Search Advisory Committee chairman, said the committee has begun conducting reference checks on each of the 16 remaining candidates. During their Feb. 15 meeting, committee members are to discuss those findings and reduce the field to five to eight candidates who will be invited to confidential preliminary interviews. After those interviews are complete, finalists will be invited to campus for extensive interviews with the EIU community. For up-to-date information on the presidential search, please Link 2: visit the presidential search page. These transcripts were captured with the screen reader “Thunder” as it read the two templates. Looking at the transcript from the original-template (top) we can see that the primary content is not revealed until well into the email (59 lines to be exact). We aren’t even given a title or issue date because of the absence of ALT text. Note how the transcript from the new-template (bottom) shares the title and issue date on the fourth line, and immediately continues to the primary content. Summary Dr. Wyner approached treatment from many angles. Speech therapy (accessible/semantic markup) to help the patient communicate via all email clients, extensive cosmetic-surgery to make the patient visually appealing (because when we look good, we feel good) and reduction of fat (bulky presentational markup) will make the patient’s heart and lungs (bandwidth) happy. Check out more handy work from Dr Mark Don’t miss the other makeovers in the series: Vol. 1: Teenie Tiny Tots Vol. 2: Tangent Communications Vol. 4: Miroballi Shoes
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