Mark Wyner Design

Extreme Email Makeovers Vol. I: Teenie Tiny Tots

Published March 15, 2007

Welcome to the first episode of our Extreme Email Makeovers 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.

[fig. 1]

Dr. Wyner addressed the following afflictions as part of his treatment:

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.

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.

Return to: top of this article | index of articles