August 2010 Archives

OMG!!

From: Threadless Newsletter
Subject Line: A lil somethin (OMG A COUPON!!!) so you can stock up for school!
Date: Monday, August 30, 2010

Threadless always has cute, cheeky copy, but I particularly love this goofy subject line. I appreciate the fact that they made me excited about a coupon, even though I look at dozens of email coupons every single day as part of my job. Way to distinguish yourself, Threadless!

Featured Expert: Jim Spence, Senior Designer

Gradients! How to use them and keep your good looks

When used properly, gradients can add depth and visual appeal to elements in a layout. However, before adding one to your design, it's important to consider some common issues associated with gradients. 

1. Design, don't decorate. 
Gradients should be treated as supportive elements. They're not a substitute for good design. A good rule of thumb when using decorative elements like these is to consider whether the layout would work if they weren't there. If the answer is "no," then work on solving the design problem -- don't try to decorate your way to a solution. 

2. Choosing colors. 
Gradients often have a reputation for being cheesy, gaudy, or just plain ugly. While I'm sure we can all think of some really horrifying examples of gradients gone wild, there's nothing that says they have to be done badly. When choosing colors for a gradient, it's often best to limit the number of color stops, avoid high degrees of contrast and hue shift between colors, and keep away from tints and shades that look washed out or dirty. This produces a result that is less dramatic, but much richer for its subtlety. From a more technical standpoint, it also helps maintain the legibility of type overlaying the gradient and ensures a more graceful degradation if images don't render. 

If you're unsure where to begin, here's a simple technique that will consistently yield good results. Using the Gradient Editor in Photoshop (or any other CS program), use the color stop on the left to select a color from your brand palette or list of web-safe colors. Keep in mind that this will be the darker of the two colors in the gradient (and thus if it's too light, it may be good to seek out a darker tone). Next, select the same color with the color stop on the right, and increase its brightness by 10 to 15 percentage points. This should create a nice effect that resembles natural light bouncing off of an object. 

3. Background image workarounds. 
Since gradients are often used as the background for areas that use system text (like buttons, navigation, or promotional banners), it's important to consider how they'll look in an environment where background images aren't supported. By keeping the gradient's color shift simple and subtle and supplying a background color that is the same as the gradient's base color, you can ensure that the affected area will break down in a way that's still both functional and attractive. If many of your subscribers are using a client like Outlook, and it's important that they get the same experience as other subscribers, you can also consider keeping the gradients limited to areas which can be sliced out as regular images. 

For example, if you're designing a button, try using a flat background color in the text area. Then set aside 10px above and create a gradient that is lighter at the top but which transitions cleanly into the base color at the bottom, to create a highlight effect. Do the same below, but with a gradient that transitions into a darker tone for a shadow effect. These two image areas can be sliced separately and coded as button "caps" when the HTML file is produced.

Tips for Designing with HTML Text

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.



Unless you have a highly engaged and active consumer, usually the best way to get a person to open your email is through the subject line. While some say that the 'From Address' is also a factor, I have seen that the 'From Address' is pretty consistent across brands, without many updates or changes over time.

In an already overcrowded inbox, the subject line needs to stand out amongst the rest. Different subject lines work for different brands and different groups of people. You will never know what is working and what isn't unless you test.

There is no solid answer for what works best, so the best way to figure it out is to test. Split out your emails for test groups to see which works best. Send different subject lines to your active consumers over your inactive consumers. Differentiate your frequent buyers from those who haven't made a purchase in over a year. Every consumer is different, and therefore you need to market to them differently to lift engagement.

You should also test and know how your subject line displays amongst different browsers (don't forget about mobile smart phones). While you are testing your email amongst yourself or your company, send tests to all of your accounts (AOL, Yahoo, Gmail, Outlook, etc.) and try to open on your smart phone to see how it renders.

With the holidays quickly approaching, retailers send more volume then ever - so why not test more often? The inbox has more clutter than usual, and you want to get noticed (and you also want to know WHY you may have gotten noticed over another brand). (Also check out the Retail Guide to the Holiday Season 2010 which just came out).

My tips and tricks;

  • Do A/B test splits that have a specific element where you can clearly define why one outperformed the other
      • Conduct both random splits of your list, as well as splitting out based on level of engagement and past activity
  • Areas to test;
      • Including the brand vs. no brand in the subject line
      • Sense of Urgency
      • Overall length
      • Word Order (placing the offer in the beginning or end)
      • Symbols & Characters (!, ..., ?)
      • Personalization
      • Capitalization
  • Reference past results to drive future results
      • Review past subject lines from last season and pick out your top performers. Re-use or build from those to conduct your tests
Attached is a snapshot from a GMAIL inbox. What stands out to you? I highlighted what caught my attention.

Sample Gmail Inbox





    As you plan this year's holiday email campaigns, be sure to check out the Retail Guide to the Holiday Season 2010. It's packed with insightful strategic tips and examples of standout holiday messages to help get you on track to make a strong impression on your subscribers throughout this year's holiday fanfare. Download the PDF from our Research Library.

    Here comes the sun!


    From: Hermès
    Subject Line: Here comes the sun!
    Date: Tuesday, August 24, 2010

    I'd like to thank the fabulous Gary Bauman for bringing this adorable animation to our attention.

    Business Newsletter

    Website: American Express
    Subject Line: Your August Business Newsletter
    Date: Wednesday, August 25, 2010

    I'm interested in three things Amex did with their Business Newsletter:

    (1) The preheader: "How to be ready when recovery comes." I think it's interesting that they chose to lead with such a powerful hook.
    (2) The single-column format: Some older smart phones break two-column HTML.
    (3) The preview pane message: I like that they used a large type size and a strong call-to-action on a field of generous white space to bring their statement of purpose and call for feedback to the fore.

    Have you seen any good B2B newsletters lately?

    In Praise of White Space

    Website: Apple
    Subject Line: Apps and more for your iPad.
    Date: Thursday, August 19, 2010

    I'm always impressed with how Apple uses white space and a handful of color fields -- rather than line -- to pocket information bytes. They manage to include no fewer than a dozen stories in this one email message without stretching (or stressing) a subscriber's attention.

    Yes, I moved. How did you know?

    From: Pink
    Subject Line: Free gift + update your info for even more goodies!
    Date: Sunday, August 19, 2010

    I was surprised to find this email from Pink asking if I had moved, and if so, to update my address so they can send me goodies. I did in fact just move. I'm not exactly sure how they knew, but well played Pink...slightly creepy...but well played. ;)

    PETCO's Fun Social Game

    From: PETCO
    Subject Line: PETCO | Summer Scavenger Hunt!
    Win Prizes + FREE Shipping on $25
    Date: Sunday, August 15, 2010

    PETCO sent an email introducing a multi-day Scavenger Hunt. The hunt leads you through their facebook, twitter and blog pages, getting subscribers to follow them and familiarizing them with the content found on those pages. The hunt is loaded with incentives for the subscriber - play and you could win gift cards! How creative and fun!

    My only gripes:

    1) Timing
    The email was sent on a Sunday and the first step of the scavenger hunt was for Sunday only. For those who didn't check their email that day, they lost out on the first opportunity to play.
    A) One solution would be to send out an introductory email with an overview of how the Scavenger Hunt will work and when it will begin.
    B) Another idea would be to make each step of the scavenger hunt span a week (rather than one-per-day). This would spread out the email reminders and would give the subscribers additional time to play on their schedule.

    2) Segmented Email Series
    So far I've only received one email - I'm anxious to see if I'll get more. If made into a series, I suggest announcing last week's winner in each email to entice subscribers to be the next big winner. I also caution against sending too many emails to subscribers that aren't interested. I would only continue to send the series to those who click on any of the first 3 emails.

    3) Best Practices: HTML copy
    HTML text would have been great on the hunt portion of the email. Nice job using it at the top though!

    Overall, I love this concept - what a fun way to get your fan-base accustomed to using your social networks and grow your social subscriber base!


    Surprise and Delight

    Website: Barneys New York
    Situation: Preference Center Update Confirmation Page
    Date: Wednesday, August 12, 2010

    I love to see companies that look for every opportunity to surprise and delight their customers. Here, Barneys created a cute "thank you" experience for those of us updating our email preference center profile.
    It's a little thing, but that's where the difference lies.
    The second annual Email Design Look Book was released last week, available for free download in PDF form. If you haven't yet had the chance to check it out, I definitely recommend perusing the lively gallery of standout emails, handpicked by our team members. 

     The 20 emails come from B2B and B2C brands spanning the globe. My personal favorites include Senior Designer Rocky Thomas's pick from Salesforce.com and Creative Director Julie Montgomery's pick from the UK company Selfridges, packed with very different and inspiring ideas for effective messaging. To see these and other great promotional emails, newsletters and transactional messages, download the PDF from our Research Library.