Browse by...
Home Resources Blog

Blog Post

Extreme Email Makeover, Vol. 3: EIU Alumni Association

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:// Link 4: 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

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

Extreme Email Makeover, Vol. 2: Tangent Communications

Welcome to the second 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 Tangent Communications offers design/communication services in print- and digital-media. Customers who have registered on their website receive an email newsletter called “Breakfast Bytes” which promotes a presentation at their studios in London, England. Their presentations are focused on emerging business technologies, and thus their audience comprises those in the workplace. Email Clients With a B2B list comprising primarily office-based subscribers (both business and web-technology focused), it can be assumed that recipients are employing the following email clients: Outlook 2007/2003/2000 Lotus Notes Apple Mail Thunderbird Entourage Note that because their presentations cover an array of web technologies such as podcasting and wikis, it can be assumed that many of their subscribers are web designers/developers and thus use Apple Mail, Thunderbird or Entourage. The Diagnosis Exploratory surgery quickly revealed the culprit of the pain: a single image which comprised all content. This was a life-threatening condition which would require immediate surgery to stop the bleeding. Design Ailments The overall visual design of this email was appropriate for the target audience. However, it was lacking a connection to the company’s brand exhibited on their website. And with an email of this nature, intended in part to promote the business of its publisher, Dr. Wyner believes a relevant branding-relationship would be far more beneficial than a unique eNewsletter design. Moreover, the template contains one call-to-action (RSVP) which blends quietly into the content. This template is also missing some key components to CAN-SPAM Act compliance. While the subject line (New social media trends and new ways to engage your online users) isn’t misleading, it certainly doesn’t describe the unique content of the email. Rather, it focuses on the recurring theme of the email newsletter itself. Recipients would receive a far greater benefit from a descriptive subject line about the event being promoted therein. And while Tangent does include an unsubscribe link, they do not include clear information about who is sending the email, including a valid physical address. On the topic of ensuring readers feel comfortable with the receipt of an email, we can point to David Greiner’s post “One of the most underrated essentials in email design,” which discusses a best practice of including permission reminders as a preface to an email. Depending on the frequency of deployment, this can be a vital component to any successful email newsletter. Especially in the B2B market wherein many people are scanning/reading emails at dizzying paces. Markup Ailments The risks of sending a single-image email 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-compatible 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: moderate File size: 151KB The Cure Treatment was as clear as relief from the common cold. Introduction of HTML text and a few advancements for improved CAN-SPAM Act compliance would ensure a life of solid health for this email template. And some simple design evolutions would strengthen brand awareness for Tangent and bring vitality to the call-to-action. Finally, as always, trimming the fat is a great path to a healthy body. 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. Brand conditioning: the relationship between the company’s website and the email was strengthened with the integration of relevant graphics and familiar visual treatments. CAN-SPAM Act compliance: physical address was added and a more relevant subject line was composed. Permission reminder: a preface was integrated to help reduce spam flagging. 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: 17KB (11% of the original size) Before and After Let’s review a couple screen shots illustrating some key benefits of this surgery. Outlook 2003: images disabled [before (top), after (bottom)] These screen shots were taken in Outlook 2003 with images disabled. Looking at the original template (top) we can see that literally no content is available to the reader other than a link to see a version outside of the email environment. The title is unclear, it’s unclear who is sending it (other than the “from” field) and without a subject line unique to the content of the message we don’t even know what the email is about. Note how the new template (bottom) offers critical information even with images disabled. It’s clear who sent the email, what it’s called and what it’s about (with a contextually-relevant subject line). Outlook 2003: images enabled [before (top), after (bottom)] These screen shots were taken in Outlook 2003 with images enabled. Notice how in the original template (left) there is only one call-to-action, and that it blends in with surrounding text. The new design (right) employs three call-to-action elements, one of which is a graphic button and all of which are emphasized with a unique color. Notes on Outlook 2007 Outlook 2007 is a hot topic right now. Specifically because Outlook holds a huge portion of the business segment and because it is one of the worst email clients to hit the market in quite some time. Dave Greiner put it best: “Microsoft takes email design back 5 years.” So while I personally avoid business which requires me to conform to specific browsers and email clients—and abandon web standards in the process—I felt it was important to illustrate some possible compromises to accommodate the ineptitude of Outlook 2007 for the sake of posterity. As painful as it was to use tables (none nested, though) for minor layout structure, the compromise proved to help visual integrity within Outlook 2007. Note, however, that margin/padding, background images and floating are still unsupported, leaving us with a visual design which remains somewhat broken. Font-sizing also becomes an issue once text is placed inside of table cells. I tried many combinations in hopes of finding consistent sizes across the board, but the TD tag itself causes inconsistency with fonts therein. The resulting design could potentially please a client seeking design consistency across the board, given proper explanation of the still-compromised result. So for those facing this requirement, the minor degradation of web standards may be a saving grace in avoidance of a complete breakdown of sensible markup. Following, is a screen shot of the new template in Outlook 2007: Note that while we lose our trivial background image (coffee cup) and the padding necessary for spacing out elements, the overall design is mostly in tact. Summary It is clear that Tangent Communications put much thought into the design of their email, and Dr. Wyner believes they only needed a gentle push to polish it off. The critical ailment originated with the single-image syndrome, which has now been remedied with proper HTML. And while tables were used for layout/padding to accommodate Outlook 2007 (a target email client), all other styling was created using standards-compliant CSS. The compromise was minimal and appropriate for the audience. Check out more handy work from Dr Mark Don’t miss the other makeovers in the series: Vol. 1: Teenie Tiny Tots Vol. 3: EIU Alumni Association Vol. 4: Miroballi Shoes

Blog Post

Reducing Send Button Anxiety

I don’t care who you are or how many emails you’ve sent in your time, you’re not human if you don’t get that horrible anxious feeling in your stomach right before pressing the “Send” button on a big campaign. Wait! Let me just triple check the creative one more time! Is this definitely the right subscriber list? Maybe I’ll get the boss to give it one last look over. You know the drill. This anxious feeling is only compounded when the software you’re using doesn’t make the final sending process crystal clear. I’ve used plenty of email apps in my time where you’re never really sure which button or screen would actually start the send process. It’s always been a priority of ours to make this step as clear as possible and take any surprises out of the process. Even so, there’s always room for improvement. We just pushed a number of small tweaks to the create/send process live. Among other things, I’d like to introduce the “Big Green Button”… Hopefully this and a range of other small tweaks can take the old anxiety dial down a few more notches when sending your Campaign Monitor campaigns. We just pushed the same updates live in MailBuild too, which should help those nervous clients of yours when sending their own campaigns.

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

Extreme Email Makeover, Vol. 1: Teenie Tiny Tots

Welcome to the first 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 Teenie Tiny Tots is an online retailer offering “unique gifts and keepsakes for infants, toddlers and kids.” Customers who have registered on their website receive an email newsletter with information about featured products and offerings. With a child-focused product line the target audience is parents and extended family members. Email Clients With a B2C list comprising primarily home-based subscribers, it can be assumed that recipients are employing the following email clients: Apple Mail Thunderbird Outlook Express Entourage AOL Yahoo Mail/Yahoo Mail Beta Gmail Hotmail The Diagnosis Exploratory surgery revealed some detrimental ailments. While no life-threatening conditions were discovered, it was clear that future health would be contingent upon proper treatment. Design Ailments The design of this email was a fair representation of the patient’s website design. However, there was room for a stronger relationship between the two without compromising best practices or adding gratuitous weight to the overall file size. Dr. Wyner addressed the following afflictions as part of his treatment: [fig. 1] Excessively large masthead, likely to ensure clearly-legible text. Omission of the gradient background from the website (a key ingredient to the website’s overall design). Font family used for category titles differed from that of the website. Bulky product shots (unfavorable in the email environment). Gratuitous tag lines (consume valuable real estate). Lack of clear segmentation of products (decelerates scanning and reading). Small, graphic add-to-cart buttons rendered unreadable/unusable with image blocking. Inflexible grid layout for product positioning, restricting each email to an even number of products. Missed opportunity to extend the website brand (uniquely colored boxes) to the email. Special offer of significant value placed at the bottom of the message. Absence of interactivity for “forward to a friend” call-to-action. Poor placement of “view in browser” link (if someone was having problems viewing the email, they likely wouldn’t reach the end of the message). Missing physical-address (non-compliance with the CAN-SPAM Act). Ambiguous subject line (“Gimme a Break! FREE SHIPPING!”) complete with excessive use of exclamation points and capital letters, both of which are commonly flagged by spam filters Markup Ailments The markup in this email was riddled with syntax errors, half-finished properties and incorrectly structured elements. The results of these types of errors range from minor variances to illegibility. One specific concern was regarding the use of type selectors such as img { border: 0; } which can inadvertently result in modifications of webmail client’s chrome. Another concern was the lack of descriptive ALT text. For example, the ALT text for the a photograph of a baby modeling an eating set is “Infants 0–18 months.” Email Vital Signs Standards-based markup: no CAN-SPAM Act compliance: good File size: 194KB The Cure The necessary treatment was very clear. Some simple design evolutions would strengthen the brand, improve information design and ensure a clear read for recipients. And reconstructive surgery with clean, well-formatted markup would help this overweight email slim down to a healthy size. Treatment Masthead reconstruction: the overall masthead was reduced to a suitable size, important text was created with HTML (rather than as images) and migrated to the upper-left corner. This yielded a reduction in file size, prepared for image blocking and ensured important information would be available in both horizontal and vertical preview panes. Brand conditioning: the union between the company’s website and the email was strengthened with the integration of relevant graphics and font families and consistent colors. Layout/readibility enhancements: gratuitous information was removed, products were clearly segmented and made extensible, add-to-cart links were converted to HTML text and important messages and offers were relocated to appropriate locations. Spam filter buffering: a sensible subject line was written, content-to-code ratios were reduced with standards-compliant markup and use of images was limited. CAN-SPAM Act compliance: physical address was added. Augmented value: anchor links were added to expedite content scanning, product descriptions were added for context, secondary content introduced the value of the company into their email messages and a forwarding utility was established and linked to. Email Vital Signs Standards-based markup: yes CAN-SPAM Act compliance: perfect File size: 28KB (14% of the original size) Before and After Let’s review some screen shots illustrating some key benefits of this surgery. Outlook 2003: horizontal preview-pane, images disabled [fig. 2.1: before (top), after (bottom)] Looking at the original template (fig. 2.1, top) we can see that little information can be gleaned about the contents of the email and the potential value of further reading. The following quirks are especially unfavorable: The logo, tag line and description have been reduced to ALT text of the logo and have lost all visual impact. An overview of the email is unavailable for a quick scan. ALT text for the product photos offers no additional value considering how much real estate they consume. Note how the new template (fig. 2.1, bottom) addresses these issues: It is immediately obvious who sent this email, why the recipient is receiving it and how s/he can unsubscribe. Even with images disabled, the integrity of the company name and tag line have not been compromised. An overview of the email is provided complete with links to respective content. Yahoo Mail Beta: images disabled [fig. 2.2: before (left), after (right)] Looking at the original template (fig. 2.2, left) we can see that almost no information about the product is available, specifically the following: The product photo lacks appropriate ALT text. Incorrect CSS syntax renders the product name nearly illegible and partially cloaks the price. The “add to cart” button is unreadable, obstructing sales. Note how the new template (fig. 2.2, right) addresses these issues: Appropriate ALT text is used to ensure a clear message in lieu of images. Proper CSS ensures all text is legible. Use of HTML text for the “add to cart” button ensures readability and usefulness of an important call-to-action. Mozilla Thunderbird: plain-text view [fig. 2.3: before (left), after (right)] It is challenging to extract a message from the original template (fig. 2.3, left); doing so would be labor intensive. The primary reasons for this are as follows: Overuse of images results in an array of image paths (use to replace the images). Lack of proper, semantic markup inhibits a plain-text engine to decipher headlines and paragraphs from one another, forcing an engine to clump all information together into a single block of text. ALT text is given to visual separation from regular content and thus seeps into the general content flow. Note how the new template (fig. 2.3, right) addresses these issues: Limiting images to contextually relevant content reduces presence of image paths and ALT text. Use of semantic markup creates appropriate visual separation of block-level elements (headlines, paragraphs, etc.), rendering content scannable and intelligible. ALT text is given bracket bookends and prefixed with the word “photo” to help differentiate it from general content. Summary Teenie Tiny Tots had a great foundation for a successful email, and simply needed a push to maximize its potential. It is apparent that during the design/development of their original email many decisions were made with consideration for the email environment and for specific email clients. With the help of Dr. Wyner, Teenie Tiny Tots is back on track for optimum health. Check out more handy work from Dr Mark Don’t miss the other makeovers in the series: Vol. 2: Tangent Communications Vol. 3: EIU Alumni Association Vol. 4: Miroballi Shoes

Blog Post

Oh My God, You Guys Rock!

Oh my god, you guys rock! I just moved here from one of the big email providers and I’m never looking back. I can’t believe how lovely this system is in comparison. Thanks thanks thanks! Ben Parzybok, Ideacog

Blog Post

The “Define Campaign” Screen Just Got Smarter

Each time you send a campaign, it’s important to keep the from name and sending email address consistent for each issue. This helps receivers recognize you and also reduces any filtering/image blocking issues if you’re in their address book. To make this process easier from now on, we just pushed a nice little update to the first step in the Create/Send process live. Here’s the new layout, followed by an explanation of each change. So what’s new? The “Choose your client…” option has been moved up to it’s logical home at the top of the screen. As soon as you select a client, we automatically display the last subject you used for that client. This is especially helpful if you’re sending a series of emails or use a consistent subject for most campaigns. e.g. ABC Widgets November Newsletter. We realize many of you mix up your subjects for each issue, so instead of pre-populating the field, we just display the previous subject above it. As well as pulling out the last used subject, we also pre-populate the last from name, from email address and reply-to address you last used for that client. No more guess work required. This update wasn’t so much based on customer requests as more of a common sense decision. From personal experience sending the Campaign Monitor and MailBuild newsletters, I always used the “Edit and Resend” feature to ensure I used the same sender details for each campaign. This update wipes out that step and encourages those already not taking this approach to stick to best practice.

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.

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.


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