Mark Wyner Design

Extreme Email Makeovers Vol. IV: Miroballi Shoes

Published May 4, 2007

Welcome to the fourth 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

Miroballi Shoes administers 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.

[fig. 1]

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

1. Graphical text throughout (all information vulnerable to possible omission) and no “web version” link or best-practice “permission reminder” statement.
2. Overly consistent connection to website with contextually-irrelevant navigation.
3. Missed opportunity for anchor links (quick access to items of immediate interest).
4. Left/right alternate positioning can be controlled with graphic text, but not HTML text.
5. Small, compressed graphic-text (impossible to increase size) and little visual distinction between subheads and descriptions.
6. Location information (only point of sale) buried at bottom of email.
7. 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).

Return to: top of this article | index of articles