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]

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:

[screenshot (fig. 1): original email template]
[fig. 1]

  1. Excessively large masthead, likely to ensure clearly-legible text.
  2. Omission of the gradient background from the website (a key ingredient to the website’s overall design).
  3. Font family used for category titles differed from that of the website.
  4. Bulky product shots (unfavorable in the email environment).
  5. Gratuitous tag lines (consume valuable real estate).
  6. Lack of clear segmentation of products (decelerates scanning and reading).
  7. Small, graphic add-to-cart buttons rendered unreadable/unusable with image blocking.
  8. Inflexible grid layout for product positioning, restricting each email to an even number of products.
  9. Missed opportunity to extend the website brand (uniquely colored boxes) to the email.
  10. Special offer of significant value placed at the bottom of the message.
  11. Absence of interactivity for “forward to a friend” call-to-action.
  12. 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).
  13. Missing physical-address (non-compliance with the CAN-SPAM Act).
  14. 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.

[screenshot: new email template]

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

[screenshot (fig. 2.1): email preview][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

[screenshot (fig. 3): email preview][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

[screenshot (fig. 4): email preview][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:

  • Bob

    This is excellent, guys! My client has been wanting a template that not only pushed product, but also had space for news, tips, contests, etc. The old template was OK for pushing product, but really didn’t address the other items that she has been considering.

    Now, realistically, she won’t care about the technical issues that were addressed in the makeover. That’s my job, and I greatly appreciate the time spent breaking down the steps taken to improve the template. There were issues that I was unaware of (border:0 altering webmail clients’ chrome), issues that I was aware of but was deferring to the wishes of the client (overly large images, arrangement, etc.), and issues that I take full responsibility for even though I know better! (ALT text, non-standard markup, etc.) This template was somewhat hastily conceived, and for the purposes of speedy delivery, created (and edited weekly) in Dreamweaver with too little attention given to the code. (Hangs head in shame…)

    Anyway — I’ve passed this all on to the client. I can’t wait to see her reaction to the makeover! Thanks again!

    Cheers,
    Bob Sawyer

  • Leo

    The difference is clear to see, the second one is now understandable where as the first one you could not read.

  • minxlj

    Great article, from a designer’s point of view it’s definitely useful to see the comparison. I’m designing an emailer right now and bearing all the above considerations in mind – thanks!

  • Damien Buckley

    Great article – good to see best practices in action! – and to learn something new. Although we’ve been including them regardless, I wasnt previously aware that a physical address was required for CAN-SPAM compliance.

  • daynw

    The inclusion of the company name and tag line in the masthead as text is especially nice. Even with images off, we still retain the branding and trust that comes with recognizing the sender.

    Thanks for this! I’m adding these tips to my frequently checked “best practices” list.

  • Lars Koudal

    Excellent make-over. I now have a great big gun to pull out with examples for clients that need a makeover. Thank you.

  • Michael Moore

    Great insight! A good way to extend the effort and awareness much further than your local client. Thank you for sharing!

  • Paul Grovess

    Great – thanks, please may we see the new markup?

  • Dave Greiner

    Sure Paul, you can check out the complete HTML of the new version here.

  • christy

    can we see what it would look like in gmail with all the CSS stripped out of it?

  • Nick Gray

    It looks great! I hope our company can be considered for the next makeover.

  • Dave Greiner

    Hi Christy, here is the email in Gmail, Hotmail and Outlook 2003. You’ll notice that Mark’s standards based approach results in a rich text version for Gmail and Hotmail because of their lack of CSS support.

  • Char-Lou Benedict

    This article was great – but I wanted to email it to some folks in my company so they could understand the necessary design factors in an email – they still think “print” – Wish you had an easy “email to a friend” for this article!

  • Norm

    Excellent article, and great design transformation. I’ve been using tables for email display consistency, maybe I don’t need to? Do you know how this newsletter will look in Outlook 2007?

  • Jani Anderson

    Fantastic! I have just started using Campaign Monitor, and your service has always been dependable and informative. But now, with this new Makeover section, you are really showing us (your customers) that you’ve got the best servicee around. Bravo!

  • Jesse Thomas

    great article!

  • TL

    Wonderful redesign. Will be sharing this one with my clients and our designers first thing on Monday.

    Also, would really love to see a followup with some anayltics, especially clickthrough rates and conversion rates on those clickthroughs.

  • Stephen

    Out of curiosity how does this email look in Outlook 2007 though? It uses floats to position content and under my current understanding of 2007, floats are no longer a supported CSS property.

  • Dave Greiner

    Thanks for all the great feedback guys, we’ve got more makeovers coming real soon. Norm and Stephen, we’ll be discussing this design in Outlook 2007 later today.

  • jo

    great article! Any statistics on conversion, click count change between the two versions?

  • Dave Greiner

    Jo and TL, this customer hasn’t used the new template for a live campaign yet, but when they do, we’ll be sure to share the results.

  • Dave Greiner

    Sorry for the delay, but we’ve now put together the Outlook 2007 screenshot, which you can check out here.

    A few comments. Firstly, because this is a B2C email, the target email clients didn’t include Outlook 2007, which is one of the many reasons Dr Mark took the CSS approach he did. We’ve got a few more makeovers planned for the coming weeks, some of which will have more of a B2B focus and will be designed for all versions of Outlook, including 2007.

    The Doc will have more to say about this when volume 2 is published in the next week or so.

  • Ward

    Awesome – thanks for the insight. Keep them coming!

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098 0800 161 5300