Mark Wyner Design

Extreme Email Makeovers Vol. II: Trident Communications

Published March 27, 2007

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

Trident 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 Trident 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, it is good practice to include 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 Trident 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. 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 Trident 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.

Return to: top of this article | index of articles