Browse by...
Home Resources Blog

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]


  • 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.


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:

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
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