Professional Documents
Culture Documents
Lyris Creative Review:: Macmall (Af Services)
Lyris Creative Review:: Macmall (Af Services)
1 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Lyris Creative Review:
2 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Executive summary:
The campaign review provides a high-level audit of your current message creative and
performance, and recommends a re-designed template focused on increasing results from your
email marketing program.
1. Overall design and format: length, readability, brand consistency, font, colours, use of
navigation, etc.
2. Rendering and design for preview panes and blocked images environments
3. Use of an administrative footer and/or functionality (address used, profile update, referral,
etc.), CAN-SPAM Act compliance
4. From name and address
5. Sample subject line style
Design format:
We tested the following HTML creative:
Macmall Creative1 – iPad Macmall Creative4 – DealofDay
Macmall Creative2 – AutoCad Macmall Creative5 – NYsBlowout
Macmall Creative3 – Apple Blowout
3 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Email Advisor (Content Analyser) results:
iPad and NYBlowout creative had the score of 1.52. The HTML is being reported as having a low
ratio of text to image area. This means the email creative has image(s) that weigh out the text.
Increasing more HTML text can help elevate this issue.
The other 3 creatives – AutoCad, Apple Blowout, DealofDay performed with a score of 0.00. A
perfect score.
4 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Preview pane:
Optimizing the preview pane views will increase response rates. Within the preview pans you
ideally have the main message of the email as HTML. This means it can be seen in the preview
pane and is also displayed when images are not downloaded.
Outlook 2007:
5 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Hotmail (MSN):
6 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
7 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
AOL (AIM):
8 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
9 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Gmail:
10 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
11 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Yahoo:
12 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Most of the time images will be disabled. With images disabled, you will notice you cannot see
the content of the message unless the images are manually enabled. Without a consist trend of
email recipients enabling the images, the probability of the message being delivered to the spam
folder is much higher.
Design for the preview pane of email applications: no more than 550 pixels wide
All your templates are using 500px for its width, which is a good width to utilize. If your subscriber
base is likely to be using desktop email clients, try to squeeze your most valuable content into the
far top-left of the design. If you’re designing a marketing email with a call-to-action, consider
placing one call-to-action in the top ~200px and another in the top left ~400x400px. Or you could
try combining these into one.
13 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
People read email in their preview panes (90% of users have access to a preview
pane, 70% use it - source: EmailLabs), which is usually a small portion of their available screen.
Different email programs have different sized preview panes. That means you've got about
500/550 pixels to convey your key message. 550 pixels wide is as far as you should go.
Around 75% of people who use preview panes go for the horizontal version, while the remaining
25% prefer the vertical version. You can cover both pane configurations by placing the most
important information is in the top left corner. Try to get your call to action above the scroll.
Refrain from huge images at the top of the message; otherwise include a description of the image
in the alternate tag.
1. Design
You should always assume that your images will be turned off by default
Make sure that any images you use are there for a reason. Users should be able to understand the
message without switching their images on.
14 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Here is a chart to give you an idea of what ISPs has defaulted for images & links:
Don’t rely on ALT tags (but make sure they’re labelled correctly) as they won’t always show.
Avoid having your main message only within an image. Always try and replicate the key
information (like headlines, links and calls-to-action) as html text as well (and as close to the top as
possible).
Graphs, tables and other important information should also be done in html, rather than as an
image.
Example:
15 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Amazon.com example:
For the same reason also consider the balance between HTML code and text. Some anti-spam
software checks for the balance between the amount of code and the amount of text in an email.
Too much HTML code (compared to the amount of text) and you’re likely to be marked as
spammer.
Small thumbnails work better than big graphics, even if you have lots of text to keep the balance
right. If your content is just one or two lines of text, then insert one or two graphics only. If big
images are needed, make sure they’re well compressed (and not too close to the top, preferably
on the right-hand side) and the HTML code spotless.
Animated gifs can be a good alternative for moving images (flash and videos are not widely
supported). People who have opted for HTML emails with images will be able to see them, but
keep in mind that, for security reasons, animated gifs are not supported by MS Outlook 2007
(along with background images). Only the first frame will show. So make sure it will make sense on
its own/out of context.
16 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Using alt tags in your HTML emails is important for three reasons:
1. Recipients using dial-up or other slow connections might not see images for several
seconds. Displaying alt tag text can convey what is to come.
2. Many email clients (Outlook 2003 and Outlook Express) and email services (AOL, Yahoo
and Gmail) disable images by default or display a warning message or command to
download the images.
3. Gmail email service uses what it calls "snippets," which display the first few text words it
sees in an email, following the subject line. Gmail will also display the text from alt tags, so
it is important to use this to your advantage - as an addendum to your subject line.
Chase Bank
17 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
• Charts and Graphs: Include enough text to explain the value and contents of the chart or
graph, such as "Chart: Open Rates from A/B Split Test."
• Gmail Snippets/Preview Text: Use an appropriate image in your header to display key
teaser info. For ecommerce emails, the information might expand on special offers
mentioned in the subject line, reinforce Free Shipping or promote additional products. For
newsletters, consider mentioning additional articles beyond what is in the subject line, or
expand on the existing topic.
While this sounds like a lot of work, at most it probably adds 5 to 10 minutes to your email
production. Most importantly, though, marketers who don't use alt tags correctly risk lower open
and click-through rates because recipients might decide not to display images or act further.
My personal inbox sees between 200-300 emails per day, so I have a vested interest in quickly
browsing through emails to see what needs my attention and what can be deleted. The email
above was one that was opened rather than tossed, because it did a good job of giving me an
incentive to open. How?
First, they've addressed the customer’s name--'Dear Andrew' shows me that there's a good
chance that they have interacted with at some point. Secondly, with a quick glance at the text
below I can see that this email has to do with cricket, a sport that could be of interest. Yes, this is
definitely an email I intended to receive and want to open and read. With a design that considers
the preview pane, this sender is quickly showing the customer what this email is about, even
though no images are displayed.
18 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
5 Navigation Elements Invite, Capitalized Text Informs, Coupons Inspire Action
The email above does an excellent job of giving recipients an incentive to open and further
explore. Notice that the email has navigation elements that are similar to those that may appear
on a Web site, and that the navigation elements are repeated as inline links within the body copy.
This provides recipients with a very subtle but compelling invitation to browse the site even if they
are not responding to a particular offer.
Another technique that this retailer has used is simple, but very effective. As mentioned earlier,
Microsoft adds alternative text to the images reminding users that images are not automatically
downloaded. But the designer's alternative text also appears. The designer of this email very
cleverly decided to capitalize his alternative image text (GREAT CHRISTMAS OFFERS) as a way to
help it stand out from the text that the software automatically generates.
Finally, pay attention to the special offer and coupon code in the red box. The bold color helps
draw the eye to this very important call-to-action, and showing the coupon code within the
preview pane shows the recipient that this is a legitimate offer.
19 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
6. The Power of HTML to Add Brand Triggers
The example above looks different than other emails we've seen thus far, but how did they get
their logo to display in the upper-left hand corner? They didn't. The headline at the top may look
like an image, with the attractive colors and the bold font, but it isn't. It's actually a hard-coded
HTML that reiterates the site's brand name and mirrors the color scheme used in the company's
Web site design. Using HTML code to add brand triggers to your email designs is an excellent way
to ensure your emails make it past the preview pane.
Note the Clearance Promo Email has not CSS tags in the HTML. For example:
This CSS example sets color and font size information for the text in a specific paragraph.
<p style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?</p>
Email 101 – anatomy of a Healthy Email
20 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Here is a diagram of the anatomy of a Healthy Email. This will give you a good idea of other
structure and possible placement for other designs. You are currently following some of these
elements, which mean you are on the right track. On the other hand, there could be some little
tweaks that can help improve the performance of your email message.
1) Preheader:
Current
Suggestions:
• Make snippet offer a clickable link
• Brand recognition at the first line of preheader
• Unsubscribe link – if getting high complaints
• Social Media link(s)
• Mobile Version? (similar format to Buy.com emails)
21 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
2) Header & Navigation:
Current
Example
Suggestion:
• Make Bulletproof buttons w/alt tags for the navigation bar.
• Can include CTA or special offerings
22 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
3) Primary, Secondary, Tertiary Message
Current
• As an e-commerce’s company, the primary message are the products in the email or a can
be a specific offer of a product. Coding the HTML as individual items/images would be the
best approach:
– Each item assigned a cell/image with HTML text associated to the details
– The product image alt tag should have the product name
– Using background color in the HTML text area is a good way to match your design’s
look and feel.
– Converting your main image to small images (image/product) with a description of
the item below in HTML text helps with the 1:1 image to text ratio.
23 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
4) Submessages
Suggestions:
• Layercake
• Siderail – “What’s hot” – promotion product lineup
• Use visual prompts like color, headlines, imagery and graphics to guide eyes
Example:
5) Recovery Message
24 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Current
Other Examples:
TigerDirect example:
Suggestions:
• The final outpost; acts as a catch-all
25 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
• Include alternate category or brand links
• Last chance incentives to inspire engagement
• Social Network links
• It would be interesting to incorporate “Top 100 Searches at MacMall” or something similar,
maybe “Top 10 Searches” or “Top 10 Sellers”:
Overall:
Since you have limited time and space in most email promotions to get your message out, instead
of noting your best points in your paragraphs, showcase them by using bullets, numbers, and/or
asterisks to separate them possibly at the top-left of the creative; example is a “Top 10” or
“What’s Hot”. This will give the consumer an easy CTA to direct traffic to the website.
26 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
6) Footer
Current
Always give users the chance to unsubscribe and change their registration preferences.
1. Enable recipients to update their preferences (crucial for highly personalised emails + helps
distinguish you from unsolicited email)
2. Explain why the email is received, and display the email address the message is sent to (add to
message’s trustworthiness)
3. Supply complete contact information: physical / postal mailing address (PO Boxes are not
sufficient) + telephone number and email address
4. Link to a privacy policy
27 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Good footer examples - from ClickZ Experts Newsletter:
Send Us Feedback! | Technical Questions or Bug Reports | Legal Notices, Licensing, Reprints & Permissions | Privacy Policy
This newsletter is a service of EmailLabs. Should you no longer wish to receive these messages please click here to
unsubscribe or send an email to: unsubscribe-929@emaillabs.com
To ensure delivery of this newsletter to your inbox and to enable images to load in future mailings, please add
intevationreport@emaillabs.com to your e-mail address book or safe senders list.
EmailLabs
www.emaillabs.com
4400 Bohannon Drive, Suite 200
Menlo Park, CA 94025
Tel: 866-362-4522
With regards to the above example though - as explained before – they should have placed the
Web Version link as close to the top of the email as possible (not in the footer), and also removed
the wording “click here” from the two bottom links (View our Privacy Policy and Anti-Spam Policy
become the active links).
28 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Creative Checklist:
29 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Preview Pane Recommendations
Take these steps to make your email more preview pane/disabled image friendly:
1. Redesign the top of your email template so that key content shows in the preview pane
even if images are disabled. Content-oriented newsletters should include headlines or “In
This Issue” teasers. Newsletters with banner/images-based ads should switch to text ads
and content teasers. Ecommerce and other promotional-type emails should summarize or
highlight the key value proposition, offer or products right up top. See how we’ve
approached this with the redesign of the Intevation Report. (Redesigned Intevation
Report).
2. Study your click-tracking reports, or use other software that maps out where readers are
clicking most often. Those are the links that need to be highest in your newsletter.
3. Ask to be added to your subscribers' address book. Images are displayed by default if
you're in the address book for all AOL and Hotmail recipients as well as anyone using
Outlook or Outlook express. Always send from the same address the recipient added every
time.
4. Move less critical administrative information to an admin center at the end of the
newsletter, especially if it draws few clicks per issue. But consider keeping or including text
links to key actions below your “In This Issue” or teaser text. See how we’ve approached it.
(Teaser Text). At EmailLabs, we saw a fairly high number of Intevation Report subscribers
clicking the “View Web Version” link. So, we kept that and added “Update Profile” and a
few other key actions. However, we moved the “Add this address…” copy to the Admin
Center. We recommend that this “Add this address…” information should be included in
the opt-in messaging on your Web site, in the confirmation emails and perhaps in the first
email they receive. Thereafter, however, this copy is simply taking up prime preview pane
real estate.
5. Your from and subject lines become much more important in this new reality. Sixty percent
of readers told us they consult those to decide whether they'll scan the message in the
preview pane or just delete it without a glance.
6. In this new format, the from and subject lines become the top two points of a triangle,
with the third point being the top of your newsletter. All three have to work together to
snag a reader's eye.
7. Remember that email clients vary in how they show from and subject lines in the inbox.
You can test your lines using our free From and Subject Line Tool in our online Resource
Center: Subject Line Tool
8. Use both text and HTML in advertisements, logos and branding messages rather than live
images linked to your Web site, such as JPEGs or GIFs. You'll still be able to deliver key
information even to readers whose email clients block images.
9. Yes, blocked images affect your open rate. Based on our survey, it could be significant.
Most email marketing software tracks opens using a clear 1x1 pixel GIF that counts the
email as being opened when the image loads from the server. So it is conceivable that
image blocking might have contributed to a drop in your B2B open rates of 5 to 10
percentage points during the last few years. And yes, an email that is viewed in a preview
pane DOES count as an open, if images are enabled.
10. Along the same line, use alt tags that describe an image's content or action. However, most
ISPs and email clients that block images also don’t render alt tags. (See our ClickZ column
on Blocked E-Mail Images.) You can get more information about how to do this with this
Quick Tip in our Resource Center: Don't Forget to Use Image Alt Tags
30 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
11. Review your HTML coding to make sure it complies with W3C standards: Validate HTML
Content and Avoid Using Scripts
12. Review how well your format complies with the quirks and nonstandard rendering of Lotus
Notes. Our statistics show that 8% of Intevation Report readers use Lotus Notes.
Depending on your B2B readership, your Lotus Notes subscriber base might range from a
low of 5% to as high as 15% if you reach a lot of Global 2000 and professional services
firms.
13. Learn more about working with Lotus Notes in this article in our Resource Center: How to
Address Lotus Notes Compatibility
14. Eliminate skyscraper or vertically rectangular ads that go deeper than the pixel equivalent
of 3 or 4 inches.
Whether your email subscribers are B2B or B2C, use of the preview pane will only increase. You
should act now to redesign your emails for a world of blocked images and small preview panes.
These articles and tips will help when you explore email design and coding issues:
• Blocked E-Mail Images
• 25 Quick Tips to Boost Email Marketing Usability
• Text version for multipart emails - text version of HTML emails
• Minimizing HTML Rendering Issues - Provide Recipients a Web Version
• 20 Tips for Better B2B Newsletter Content
• How Message Size, # of Links and Subject Length Affects Email Results
• Determining Which Content is King
• Using Alt Tags in HTML Emails
31 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Subject line considerations:
Spam type words in the subject line have less of an effect on deliverability as they used to.
Therefore there is not a problem using words such as ‘Free’ or ‘offer’. However I do recommend
doing a subject line split test on every email campaign.
Subject lines should be 60 characters or less including spaces. Ideally 20 – 40 characters for
optimal performance across multiple email readers
Subject line should have consistency – start with the same words so that recipients can recognize.
The reason why is because Friendly Name might not appear & Recipient may only look down to
subject line to determine if they should open or not.
List key info first – Some email clients allow more characters in a subject line than others, but
most give you at least 50, including spaces. So, load your key information in that first 50. Also,
make sure the cut-off doesn't occur in a crucial word, such as a price or date.
Support the “From” line - The "from" line tells the recipient who sent the email, and the subject
line sells the recipient on opening. If your "from" line lists your company name, you don't have to
repeat it in the subject line, which frees up space in the subject line. But do consider branding your
subject line with the name of the newsletter, for example, so that it will stand out in the junk
folder and your recipients’ overflowing inboxes.
Be careful of words that will trigger spam filters such as free and discount - selling words tend to
score higher when being evaluated during spam filtering processes. Even punctuation and symbols
in a subject line such as ! and $ can play a role in your email being filtered. It doesn't mean you
can't use them, just don't go overboard.
Don't SHOUT (caps lock); again, it's widely seen as a spammer/scammer trick, can trigger spam
filters and isn't considered to be good email etiquette.
Consider your own behavior. When you are going through your inbox, what are your thought
processes? You open emails based on the five ‘I’s …
1. Importance - If it is work-related, or a PayPal payment, you are going to open that email.
2. Intrigue - Curiosity, like a good joke or riddle, causes you to open the email to see what the
punch line is.
3. Interest - We all have subjects that we love to read about, so sometimes all you have to
communicate is the topic.
4. Involvement - Pull on the heart strings, appeal to passion, greed, narcissism or any other
emotional hot button.
5. Investment - Recipients will be personally or financially invested in something. Craft your
subject line around it and it will get opened.
32 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
o Offer - Make a compelling offer that the recipient will want to take up
o Question - Ask a question that the reader will answer “yes” to, or maybe put the subject in the
form of a mystery or puzzle where they will feel compelled to find out the answer.
33 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Some of MacMall’s competitors
TigerDirect:
• Very graphic
• No HTML text
• Too busy!
• No clear CTA
34 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Buy.com:
35 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
Mobile style email- 1 column
36 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011
NewEgg:
Welcome Email:
37 of 37 PJ Gallofin
pgallofin@lyris.com
January 2011