From: Pottery Barn Kids Subject Line: Trick or treat! Costumes starting at $29 + treat bags ship free Date: Thursday, August 19, 2010 From: Nature Made Subject Line: Men's Health: The Benefits of Fish Oil for Men Date: Friday, June 18, 2010
A few tips for designing with HTML text: Use HTML-safe fonts. Using fonts such as Arial, Georgia, Verdana and Times will allow the copy to be coded as HTML text instead of as an image, thus allowing the copy to be viewable with images disabled. If you find system text utterly boring or off-brand, we suggest using your special font for the headline only -- just make sure to include an alt tag on that image when coding. Use solid colors behind HTML text. Outlook does not display background-images (images that appear behind HTML text). So keep that area free of gradients, patterns or images. Outlook does, however, show background-colors -- so the color behind your HTML text doesn't have to be white. In this example, notice that the image behind the system text does not show up in Outlook. Instead, you see a solid color (that you can choose). It's particularly important to apply a background color behind your images if your system text is white. Keep copy away from rounded corners. When designing with rounded corners, keep in mind that the portion of the box that includes the corners will need to be cut as an image. So keep your copy outside of that image in order to code that copy as HTML text. Know that HTML text will expand differently (horizontally and vertically) in different browsers. Therefore: 1) make sure to leave adequate room at the end of your paragraphs in case a word needs to jump to the next line, 2) don't cut your paragraph too close to images, 3) make sure your line height is at least equal to the font size and 4) leave some extra space below your copy block.

Without Yahoo Code	With Yahoo Code
From: Tablespoon Subject Line: Grill Masterpieces: 5-star BBQ Ideas Beyond The Burger Date: Monday, July 12, 2010 From: Tablespoon Subject Line: Fun and Frosty Drinks = Instant Summer Chill Out Date: Monday, July 19, 2010 Those of you in the email coding world may have noticed a recent change from Yahoo. If your links are all appearing blue, here is the work-around. Simply add a tag with the color directly inside the <a> tag. Example: <a href="#" style="color:#808080; text-decoration:none;"><span style="color:#808080;">Link</span></a> Happy coding! :)

From: Abercrombie & Fitch
Subject Line: A&F Premium Jeans
Date: July 23, 2009
Subject Line: The best plaid to party in
Date: July 26, 2009

I've given Abercrombie & Fitch some flack for their emails in past entries, so I'm excited to see some cool stuff coming from them lately. The horizontal scroll is fun and still a fresh sight in the inbox, and the copy is fun and on-brand, too. The copy on the jeans email especially optimizes opportunities to play with the pants theme, mentioning...erm..."assets," and telling subscribers to get their "butt in stores" to check out the jeans.

From: Apple
Subject Line: Thank you for your interest in iPhone.
Date: Tuesday, April 3, 2007

I signed up to receive iPhone product updates the day the gadget was announced, but only received this Welcome message today. Of course it's beautiful, and almost because of that I have to point out that the bottom legal copy is misaligned in IE7. But who cares about PCs, right?

From: Sephora
Subject Line: SNEAK PEEK: Fall's Biggest Beauty Trends
Date: Sunday, March 25, 2007

Sephora generally does a good job with making their emails timely and relevant. This one is a "TREND REPORT" highlighting looks that appeared on the runways. Red lips, bouncy hair and gunmetal eyes are all well-and-good in and of themselves, but framing them as recent runway trends give them much more relevance and power. What can you do to make your messages more relevant and powerful?

BTW, Sephora is also following current best practices: body text, product names and prices are all featured as HTML rather than graphical text.

From: Eddie Bauer
Subject Line: Shop New For Spring | Spring Outerwear is here.
Date: Thursday, January 18, 2007

From: Eddie Bauer
Subject Line: One Week Only: Extra 30% Off Sale Outerwear.
Date: Monday, January 22, 2007

Eddie Bauer appears to be taking the dual "supressed images/preview pane" threat seriously: these recent campaigns use HTML for almost all text - including nav items. And you know what? I think they look pretty darn good. A lot of us have been skittish to follow the best practice - use as much HTML text as possible - because we lose a degree of creative control over how text renders. But (depending upon your brand and your audience) it might be better to have slightly-less-beautiful text read than no text at all. And with the introduction of IE7, which renders HTML text in a more appealing (read: aliased) way than it's predecessors, combined with the upsurge in Mac use, HTML text is looking better and better. Plus, as more and more B2B and B2C marketers make the switch, our eyes will adjust, and what once looked ugly might look just lovely.

Dang, Microsoft is really laming out! Click here to read all about it.

From: Scoop NYC
Subject Line: New for Fall: Tory Burch + Kooba @ scoopnyc.com!!
Date: Wednesday, July 12, 2006

Luxury retailers in particular need to pay attention to their EDM production values. While www.scoopnyc.com is a respectible-looking website, quality standards drop off on their email campaigns. This particular campaign body is coded as a single low-res graphic using an image map for linking. Image mapping doesn't work in several popular email browsers, disablings click-through for a substantial percentage of subscribers. The rest of the message was coded without browser-compatibility in mind, apparent from the random positioning of the search box, a stray call-to-action carrot, and even several special characters appearing in the upper-left corner of the message.

We can look at email campaigns as flashes in the pan, and from this perspective, details aren't so important. But we can also look at email marketing as an opportunity to cultivate an intimate, ongoing conversation with our customers. If we take this stance, what message does low production quality communicate?

We have to sweat the details and give customers the respect they deserve! They are the only reason you have a job!

From: katespade.com
Subject Line: please visit our online sample sale - limited time only
Date: Monday, June 12, 2006

kate spade has a history of executing visually appealing sale messages - click to see examples from January and October - and this one is no exception. At this time of year, the sale offers are literally stacking up in our inboxes, so it's particularly important for both the campaign creative and subject line to pack a lot of punch in order to stand out from the crowd. Here, including the "limited time only" clause in the subject line was a smart way to inspire subcribers to open now or miss out.

kate spade was particularly crafty here in requiring folks to sign up to take advantage of this limited-time offer; providing a deep discount incentive is an excellent way to gather customer data.

Just one "whoops": the "SEND TO A FRIEND" menu item is misaligned in the Mac Safari web browser. Since this message will probably be forwarded along more than most, this is a rather unfortunate HTML flub.

From: The Land of Nod
Subject Line: Try the new and improved landofnod.com.
Date: Thursday, May 11, 2006

From: Neiman Marcus
Subject Line: MARC by Marc Jacobs: Shop fall & win a wardrobe
Date: Tuesday, May 16, 2006

Ouch! While I often see minor footer splits and menu misalignments, this week we've got some serious technical incompatibility coming from Land of Nod and Neiman Marcus.

While I applaud Neiman Marcus for attempting to push the envelope in email creative implementation, I'd advise everyone to wait on incorporating Flash into their email campaigns until email browsers can actually handle it. I'm glad Nieman included a "Have trouble viewing the email below? Click here!" link at the top of the message so I could see a hosted version of the Flash in a browser window (Everyone should be doing this regardless of whether or not you use Flash, by the way!), however, from my experience, only around 1% of folks click this link. Rather than trying to implement an email in Flash, I'd recommend doing a flat design and including a link within the creative to view an interative feature.

Land of Nod's glitch was particularly embarassing due to the context. The subject line invites us to "Try the new and improved landofnod.com.", but, because of an HTML coding error, all Mac users see is a blank white screen! Dang! Again, we are able to see the actual campaign if we click on the "View this email in a browser window." link, but for the 99% of folks who don't click that link, this is not only a lost chance to tout new features, but a particularly embarassing foobar.

Let's all make sure to test all of our email campaigns in multiple email programs, in Safari, IE, Netscape, Firefox, Camino and Opera browsers, and on Mac and PC platforms.

From: Modernseed
Subject Line: Capture Your Mini!
Date: Wednesday, April 5, 2006

Modernseed is the self-proclaimed "starting point in a lifestyle rich in design knowledge and well-conceived, functional products." While Modernseed does offer a wide selection of smart, stylish product, their "fresh scoop!" newsletter offers too much: too many words and too many images. While the messages (Product Test Contest, Gitta Bags, Doodles Coloring Book and Gift Registry) may be compelling, they get lost in tiny type and thumbnail imagery. This type of format might work for a print newsletter, but for an EDM, which needs to capture a busy customer's attention in 8 seconds or less, we have to feature one or two messages very clearly using large images, a few well-chosen words, and a strong call-to-action: "Click here to shop now!" While at first a simpler presentation may seem inferior or watered-down, we have to create messages appropriate to the medium, and in the rapid-fire email environment, a brief, clear campaign better serves both the customer and the merchant.

Now for the technical piece. This EDM is implemented as a single, flat graphic. Links are constructed using image maps. In the complex world of Email Browser Compatability, this is a no-no for two reasons:
1) Image maps are stripped by several email programs, meaning that here, since they were constructed using image maps, the blue text that looks like links will not be clickable for some users. In order for links to work properly in every email program, it is necessary to cut up a message into separate graphics and tag each linkable piece with it's own "href" (or, obviously, and in this case more appropriately, to use HTML text.)
2) More and more email browsers are hiding graphics by default. A customer has to click a "show images" option on a campaign-by-campaign basis in order to view a message with graphics. This includes Microsoft Outlook. One way we can entice customers to elect to "show images" is to use as many interesting "alt" tags as possible. "Alt" tag text appears in place of graphics when they are stripped. We can attach a different "alt" tag to every graphic within a single message. The more separate graphic pieces we have, the more "alt" tag text we can show in a customer's browser window, and the more chances we have to interest them enough to opt to "show images."

In short, I'm a Modernseed fan, and they would gain more fans (and more dollars) via Email Direct Marketing using simpler creative and more sophisticated technical executions.

From: Burberry
Subject Line: Introducing the Burberry Spring 2006 Catalogue
Date: Wednesday, February 8, 2006

Yikes! As you can see from my screenshot here, we've got a coding error in this EDM. The footer's been split from the main message and appears outside of the main email viewing pane. I've seen this happen with campaigns from Burberry, Saks, Land of Nod, Williams-Sonoma... the list goes on!

This error can be easily avoided by encasing ALL of your HTML body code in one big enclosing table. Additionally, stay away from the nowrap tag - it can produce a similar "splitting" effect, especially within the Hotmail email browser.

From: Bergdorf Goodman
Subject Line: The stunning spring collection from VALENTINO
Date: Tuesday, January 10, 2006

As a high-profile luxury brand, Bergdorf should really be email browser-testing their campaigns on Macintosh computers! Every time I receive one, I'm distracted from the "stunning" product by the out-of-alignment menu item graphics.

From: Eddie Bauer
Subject Line: Guaranteed Christmas Delivery With No Rush Charges.
Date: Monday, December 19, 2005

Eddie's pushing five different messages simultaneously, with very little creative distinction between each, employing the same colors, fonts, and even the same red ribbon treatment. Reads like a rush job to me. The email browser incompatibility (in the out-of-alignment red promo) confirms it.