August 07, 2007
Case Study
SUMMARY:
We’ve all seen the emails that contain four or five big empty boxes stuck together with some random red Xs or black lines in the top left corner of each box -- no images, no relevant copy. If your HTML emails render like this, your response rates have probably already taken a nosedive.
A major cable network got smart in how they use images to address the problem and increased their clickthroughs a whopping 41%. Includes before-and-after samples and an inspiring 13-point checklist to take straight to your IT colleagues.
|
|
CHALLENGE
“When email services like Yahoo!, Hotmail and Gmail were coming out with their new versions that blocked images, we knew we had to find a way to adapt,” says Ana Lucia Dunkle, Relationship Marketing Manager, A&E Television Networks. “Of course, we wanted to find a way that would at least let our email recipients know what we were promoting when they opened the message.”
Dunkle heads their content-based email program, which supports their television programming and the Web sites for the individual shows. Her bosses judge her on how well she drives traffic to those sites and gives their ecommerce directors some eyeballs to work with. And when you’re emailing for a visually oriented organization, it’s no wonder Dunkle felt like she was kicked in the gut when they began losing the ability to send email with images that rendered properly.
At first, they tried the commonly used Web-hosted link at the top of the email telling subscribers they could view the message in a browser, but asking busy consumers to take that extra step wasn’t much of cure-all.
CAMPAIGN
About a year ago, Dunkle and her team redesigned their newsletters with blocked images specifically in mind. Their first change was to switch techniques so images and copy were not connected by code and images and copy would render separately to let people at least read the offer.
But that was only the starting point. Here are the four steps that sent their clickthroughs soaring:
-> Step #1. Balance copy and images
To begin, Dunkle created a three-column layout where the text flowed up and around images so readers who had their email images disabled could focus on the message rather than the blank spaces.
More specifically, she made sure a paragraph of text was positioned at every level of the email from top to bottom:
- Left column: A 15-to 20-word sentence that told an important part of the offer and then other images underneath that.
- Center column: An image and then four or five paragraphs of ad copy.
- Right column: A skyscraper ad promoting one of their TV shows would normally take up the entire right-hand column.
“We had been rather image heavy,” Dunkle says. “We didn’t want to ‘minimize’ our imagery per se, but we did seek a greater balance between images and copy.”
-> Step #2. Add ALT-text tags
Next, they used a feature available in all HTML email programs, but not used by all marketers: ALT-text tags. The tags allow the designer to insert descriptive copy that the viewers could read inside the blocked images.
Here’s what they did to add ALT-text tags:
o Open the image tag (IMG)
o Add the ALT-text attribute: (img src="http://..." alt="XYZ")
o Type in copy the way they wanted it to read
-> Step #3. Keep ALT-text tag copy short
Dunkle and her team didn’t set a hard limit on how long an ALT-text description could be, but they didn’t want people reading gobs of copy inside a disabled image, so they set a general rule that the copy should stay between two and eight words. Only the right-hand skyscraper ad could contain more words because of its vertical nature.
Here are two examples of the copy style they used:
o Sticky Stuff NEW Time: Monday @ 8 pm/7C
o Gene Simmons Family Jewels
-> Step #4. Implement checklist
To avoid badly written code or copy typos in the ALT-text tags, Dunkle put together a 13-point quality assurance checklist that addressed various potential tripwires in rendering and deliverability:
#1. Are all URLs working and tracked? Are they going to the correct landing page?
#2. Do ALL images contain the description of the image in the ‘ALT’ attribute image IMG HTML tag?
#3. Is the ‘FROM’ display name correct (i.e., FROM: AETV.com, History.com, etc.)?
#4. Is the ‘FROM’ email address correct? (i.e., AETV monthly email would be ae-news@newsletters.aetv.com, for reference check the address manager in DM)?
#5. Is the footer copy addressed properly? (It needs the correct language and campaign reference.)
#6. Is the #first name# tag implemented? (Check that the script has the correct alternate greeting.)
#7. Is the unsubscribe email address correct?
#8. Survey session emails - does the email need a send rate/stagger option set up?
#9. Survey session emails - is #user ID# implemented properly (body and URL)?
#10. Survey session emails - is the URL going to right server (URL needs to come from Informative and updated on Mediaspa)?
#11. Survey session emails - go through the session to make sure it’s working as it should (videos, language, etc.).
#12. Is there a ‘reply to’ address?
#13. Is there a hosted/Web version of the email?
RESULTS
In baseball vernacular, describing the success of the newsletter redesign and ALT-tags as a mere home run would not be enough. With clickthroughs being their most-important data point, Dunkle and her team saw a whopping 41% increase since the overhaul. In addition, email-generated traffic from the content programs has doubled at their Web sites. The ALT-text tags, as well as the improved copy/image design balance, deserve most of the credit.
“We’ve seen that designing HTML for a Web page and an email is totally different,” she says. “It’s been difficult for our designers because they’re used to designing using tools like CSS, Flash animation, Java script, etc. So, we went back to basics and found that HTML as a programming language contains a plethora of tags and attributes that may not always be used for Web page design but can be taken advantage of in email.”
Another benefit is that it now takes less time -- even with the ALT-text tags -- to design the newsletters compared to inlaying the copy in the images in their old banner style.
Dunkle’s checklist erased the reoccurring glitches that had existed before. More importantly, the process has brought marketing and IT closer together in terms of understanding how top-shelf email gets crafted around image blocking and other rendering issues.
“If you are not already using ALT-text tags, I most definitely recommend putting them into your layouts,” Dunkle says. “It may take a little more design time if you are using a lot of images in your emails, but it’s certainly worth it.”
Useful links related to this article
Creative samples from A&E’s emails:
http://www.marketingsherpa.com/cs/ae/study.html
How-to tutorial for HTML email:
http://www.w3schools.com/html/html_images.asp
Epsilon Data Management - A&E’s email service provider:
http://www.epsilon.com/home.html
A&E Television Networks:
http://aetn.com/
