Friday, August 14, 2009

Not quite the apple of my eye.

The Hunt
Message Content, Layout and the Email's Anticipated Rendering (or what I like to call CLEAR) are probably the three most important physical aspects of your email communication. With proper segmentation, targeted offers and an optimized creative design, you can ensure that you are delivering the right message - but have you accounted for the variables of rendering across a multitude of email clients? Does your message pass the CLEAR test?


The Skunk

I've actually purchased a few trips from Apple Vacations that have resulted in great getaways. These bookings might not have been directly related to a specific promotional email but their offers that pop into my inbox help keep their brand top of mind when I am looking for a good deal (or just d
aydreaming.)

For the most part, the content of the email (the specific offers they send to me) are relevant to what I may be looking (wishing) for and the layout, better or worse, manages to adequately convey the brand, offers etc. Even with "images on" there are a few missed opportunities when it comes to improving the code to help drive the message home.


The images below show the same email, as delivered through gmail. The first is with "images off," second is with "images on" and third is the hosted "Having troubles viewing?" link. With gmail being the 4th largest email service provider, I think there are a few tweaks that can be made to optimize for this and other email clients.


The Resolution

The header navigation could be easily be coded to actual HTML text versus images based copy. Clear navigation links (even with images suppressed) are great reminders on where the recipient can do more research – even when the offers don't resonate with reader and they just want to poke around the website.


Those CSS style definitions don't do much good when they are stripped out and replaced with the default rendering as applied by the email client. To control the look and feel (as best you can,) define fonts, sizes and color using inline coding practices. The bigger, blue and bold call-to-action on the price gets lost in the copy when it doesn't render as hoped.


Image ALT tags. When you feature top brands, don't forget to add the image ALT tag, especially when featuring image logos. If you look at the placement of the current promoted brand logos that are near the top, an image ALT tag could be just enough to trigger the recipient to either enable images or read further. Use image ALT tags for all images.


What you can't see? Try this exercise with your email - review your communication with images off, including other elements that might get moved around or rendered differently than expected. Look for the most important elements of your message, are they there and more importantly, did it render as expected? This type of review can reveal that the secondary copy text is visually now the "feature" rather than supporting backup for your main call-to-actions and critical messaging points. This exercise can also help determine what elements can be removed with little or no effect of message tone or its strength - optimizing for a clean layout with few distractions.