Cracking the Code:Keys to Email Creative Success
Us: Whereoware                       Online strategy, design,                       development + marketing               ...
Agenda                     • Why creative matters                     • Decoding an email                       •   Prehea...
Why creative matters    Affects open + click    through:    • You have very little real estate to      capture your reader...
Email size                       MOST IMPORTANT                                                   300 px                  ...
In the preview pane OUTLOOK 2007                                         YAHOO                       MELISSA JAEGER,Twitte...
In the preview pane       HOTMAIL             MELISSA JAEGER,                                                AOL          ...
Decoding an email              PREHEADER                          SIDE BAR           SECONDARY MESSAGE
Preheaders     What is it? The text at the very tippy-top of your email     What’s it for? Preheader text is visible witho...
PreheadersTwitter: @whereoware
Decoding an email                          PREHEADER                            HEADER                           NAVIGATIO...
Header + navigation     What is it? The area that immediately follows the preheader     What’s it for? Provides branding c...
Header + navigation       EMAIL              WEBSITETwitter: @whereoware
Decoding an email                          PREHEADER                            HEADER                           NAVIGATIO...
The body  What is it? The area that immediately  follows the header  What’s it for? Contains your main  message and call t...
The body: working it for the preview paneTwitter: @whereoware
The body: makes you want to scroll                                THE CASCADING                                   S-CURVE*...
The body: makes you want to scroll                             CREATIVE USE OF TEXT  CREATIVE USE OF GRAPHICSTwitter: @whe...
Decoding an email                          PREHEADER                            HEADER                           NAVIGATIO...
The footer  What is it? The text at very bottom of your email  What’s it for? This is where you put all your CAN-SPAM  req...
The footerTwitter: @whereoware
Making it mobile            Use analytics to see how many of your users are using mobileTwitter: @whereoware
Making it mobile                       Skip the “mobile” friendly link at the top.                        Just make the em...
Making it mobile                       Avoid long subject linesTwitter: @whereoware
Making it mobile   • Mobile screens are between 320-480     pixels wide (vertically), keep your email     to the 600 pixel...
Making it mobile   • Mobile screens are between 320-480     pixels wide (vertically), keep your email     to the 600 pixel...
Making it mobile   • Mobile screens are between 320-480     pixels wide (vertically), keep your email     to the 600 pixel...
Making it mobileTwitter: @whereoware
All email platforms render differently OUTLOOK 2007               iPHONETwitter: @whereoware
All email platforms render differentlyGMAIL (FIREFOX)            GMAIL (IE)Twitter: @whereoware
All email platforms render differentlyYAHOO (FIREFOX)            YAHOO (IE)Twitter: @whereoware
Yet…rules were made to be broken  THE SIDE SCROLLING EMAILWhat to remember:• Load all the important stuff to the left• Mak...
Yet…rules were made to be broken       USING ANIMATED GIFS  What to remember:  •   Watch your file size  •   Animated GIFS...
Yet…rules were made to be broken            HUGE HEADERS      What to remember:      Design the email in a way that      m...
So test, test, testCALL TO ACTION IN                           CALL TO ACTION                       WHICH TEST WON? TOP 30...
So test, test, testCALL TO ACTION IN                           CALL TO ACTION                       WHICH TEST WON? TOP 30...
So test, test, test      TEXT LINKS       WHICH TEST WON?   IMAGE LINKSTwitter: @whereoware
So test, test, test      TEXT LINKS       WHICH TEST WON?   IMAGE LINKSTwitter: @whereoware
So test, test, test     IMAGE ONLY        WHICH TEST WON?   TEXT + HTMLTwitter: @whereoware
So test, test, test     IMAGE ONLY        WHICH TEST WON?   TEXT + HTMLTwitter: @whereoware
Key takeaways    • Be cognizant of your      audience’s email      platform    • The top 300 pixels of      your email are...
Questions    MORE INFOSlides available at:www.slideshare.net/whereowareMore best practices: portal.silverpop.com  GET IN T...
Upcoming SlideShare
Loading in …5
×

Whereoware - Cracking the code: Keys to email creative success - Silverpop

1,581 views

Published on

You only have an instant to cut through the clutter and capture your email reader's attention. Are you doing all you can to get the best responses from your mailings? A few simple changes can go a long way to helping maximize your results.

Learn email best practices you can start implementing immediately. Plus, see real life examples of the best practices in action.

Published in: Business, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,581
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • vertical orientation smartphones screens are between 320 and 480 pixels wideWhen an email is 600 pixels wide, it will be 20-50% smaller than it was designed for, making it still readable
  • vertical orientation smartphones screens are between 320 and 480 pixels wideWhen an email is 600 pixels wide, it will be 20-50% smaller than it was designed for, making it still readable26% of wireless subscribers accessed email via a mobile device in Nov. 2010 (from comscorejan 2011)
  • vertical orientation smartphones screens are between 320 and 480 pixels wideWhen an email is 600 pixels wide, it will be 20-50% smaller than it was designed for, making it still readable
  • vertical orientation smartphones screens are between 320 and 480 pixels wideWhen an email is 600 pixels wide, it will be 20-50% smaller than it was designed for, making it still readableWhen pressed against a screen, a finger covers 45 pixels.During a light, precise tap, it can target a 30 pixel area accuratelyMake sure that your calls-to-action are padded at least 10-15 pixels to avoid frustrating tap errors.
  • vertical orientation smartphones screens are between 320 and 480 pixels wideWhen an email is 600 pixels wide, it will be 20-50% smaller than it was designed for, making it still readableWhen pressed against a screen, a finger covers 45 pixels.During a light, precise tap, it can target a 30 pixel area accuratelyMake sure that your calls-to-action are padded at least 10-15 pixels to avoid frustrating tap errors.
  • vertical orientation smartphones screens are between 320 and 480 pixels wideWhen an email is 600 pixels wide, it will be 20-50% smaller than it was designed for, making it still readableWhen pressed against a screen, a finger covers 45 pixels.During a light, precise tap, it can target a 30 pixel area accuratelyMake sure that your calls-to-action are padded at least 10-15 pixels to avoid frustrating tap errors.
  • vertical orientation smartphones screens are between 320 and 480 pixels wideWhen an email is 600 pixels wide, it will be 20-50% smaller than it was designed for, making it still readable
  • For example you would want an animated gift to “fade” in.
  • For example you would want an animated gift to “fade” in.
  • Double the click rate with text links
  • Double the click rate with text links
  • Equal results!
  • Equal results!
  • Whereoware - Cracking the code: Keys to email creative success - Silverpop

    1. 1. Cracking the Code:Keys to Email Creative Success
    2. 2. Us: Whereoware Online strategy, design, development + marketing The Stats: • Eleven years in the business • Work with B2B services, B2B product, + B2C companies • The Whereoware philosophy: 1-to-1 marketing - targeted, personalized, automatedTwitter: @Whereoware
    3. 3. Agenda • Why creative matters • Decoding an email • Preheader • Header + navigation • Body • Footer • Making it Mobile • Key takeaways8.15.2011 | Page #
    4. 4. Why creative matters Affects open + click through: • You have very little real estate to capture your reader’s attention (preview pane) • Getting users to enable images affects open rates • Creative best practices can help click through Looks matter: • Often times you are judged by your looks • Even if an email is all text, it needs to appear clean and professional • With the amount of clutter out there your email needs to popTwitter: @whereoware
    5. 5. Email size MOST IMPORTANT 300 px EMAIL REAL ESTATE MELISSA JAEGER, KEEP FILE SIZE LESS THAN 65KB 600 px SIDE BAR SECONDARY MESSAGETwitter: @whereoware
    6. 6. In the preview pane OUTLOOK 2007 YAHOO MELISSA JAEGER,Twitter: @whereoware
    7. 7. In the preview pane HOTMAIL MELISSA JAEGER, AOL MELISSA JAEGERTwitter: @whereoware
    8. 8. Decoding an email PREHEADER SIDE BAR SECONDARY MESSAGE
    9. 9. Preheaders What is it? The text at the very tippy-top of your email What’s it for? Preheader text is visible without images enabled Best practices: • Keep it simple • Summarize your message + include a call to action • Include view in browser messaging Things to consider: • Some email clients add the first text they “see” after the subject line. Does your preheader text entice people to open? • You may not need a preheader. Does your email have text that looks good in the preview pane?Twitter: @whereoware
    10. 10. PreheadersTwitter: @whereoware
    11. 11. Decoding an email PREHEADER HEADER NAVIGATION SIDE BAR SECONDARY MESSAGETwitter: @whereoware
    12. 12. Header + navigation What is it? The area that immediately follows the preheader What’s it for? Provides branding consistency and provides consistency between the website and email Best practices: • Include your logo either right above or to the left of your navigation • Only include 4-5 navigation links and keep them fairly consistent across all your emails • Try to create your nav links in html if possible Things to consider: • Make sure your preheader, header and nav don’t push your important text out of the wayTwitter: @whereoware
    13. 13. Header + navigation EMAIL WEBSITETwitter: @whereoware
    14. 14. Decoding an email PREHEADER HEADER NAVIGATION PRIMARY MESSAGE SIDE BAR SECONDARY MESSAGE SECONDARY MESSAGETwitter: @whereoware
    15. 15. The body What is it? The area that immediately follows the header What’s it for? Contains your main message and call to action Best practices: • Front load your message with the most important copy at the top • Try to fit in the call to action in the first 300 pixels • Make your readers want to scroll through your design • Keep text to a single column • Use headers and bulleted lists to keep text scannable • Do not use JavaScript, Flash, embedded video or formsTwitter: @whereoware
    16. 16. The body: working it for the preview paneTwitter: @whereoware
    17. 17. The body: makes you want to scroll THE CASCADING S-CURVE** Coined by Retail Email BlogTwitter: @whereoware
    18. 18. The body: makes you want to scroll CREATIVE USE OF TEXT CREATIVE USE OF GRAPHICSTwitter: @whereoware
    19. 19. Decoding an email PREHEADER HEADER NAVIGATION PRIMARY MESSAGE SIDE BAR SECONDARY MESSAGE SECONDARY MESSAGETwitter: @whereoware FOOTER
    20. 20. The footer What is it? The text at very bottom of your email What’s it for? This is where you put all your CAN-SPAM requirements and any disclaimers Best practices: • Include update preferences, snooze, change email address, and subscribe before your unsubscribe link • Make your unsubscribe link stand out to avoid spam complaints • Include your mailing address Things to consider: • It doesn’t have to be boring. Being creative in the footer can make people think twice about unsubscribing.Twitter: @whereoware
    21. 21. The footerTwitter: @whereoware
    22. 22. Making it mobile Use analytics to see how many of your users are using mobileTwitter: @whereoware
    23. 23. Making it mobile Skip the “mobile” friendly link at the top. Just make the email mobile friendly. 1 2 3Twitter: @whereoware
    24. 24. Making it mobile Avoid long subject linesTwitter: @whereoware
    25. 25. Making it mobile • Mobile screens are between 320-480 pixels wide (vertically), keep your email to the 600 pixels • Use larger fonts to improve readability (but don’t over do it) • Increase the size and padding of any calls to action: buttons and text links 30 px 45px 60 pxTwitter: @whereoware
    26. 26. Making it mobile • Mobile screens are between 320-480 pixels wide (vertically), keep your email to the 600 pixels • Use larger fonts to improve readability (but don’t over do it) • Increase the size and padding of any calls to action: buttons and text links 30 px 45px 60 pxTwitter: @whereoware
    27. 27. Making it mobile • Mobile screens are between 320-480 pixels wide (vertically), keep your email to the 600 pixels • Use larger fonts to improve readability (but don’t over do it) • Increase the size and padding of any calls to action: buttons and text links 30 px 45px 60 pxTwitter: @whereoware
    28. 28. Making it mobileTwitter: @whereoware
    29. 29. All email platforms render differently OUTLOOK 2007 iPHONETwitter: @whereoware
    30. 30. All email platforms render differentlyGMAIL (FIREFOX) GMAIL (IE)Twitter: @whereoware
    31. 31. All email platforms render differentlyYAHOO (FIREFOX) YAHOO (IE)Twitter: @whereoware
    32. 32. Yet…rules were made to be broken THE SIDE SCROLLING EMAILWhat to remember:• Load all the important stuff to the left• Make it obvious to your readers that they should scrollTwitter: @whereoware
    33. 33. Yet…rules were made to be broken USING ANIMATED GIFS What to remember: • Watch your file size • Animated GIFS are not supported by all email clients, Outlook being the big one • Make sure the email looks good when the animation doesn’t workTwitter: @whereoware
    34. 34. Yet…rules were made to be broken HUGE HEADERS What to remember: Design the email in a way that makes users want to scrollTwitter: @whereoware
    35. 35. So test, test, testCALL TO ACTION IN CALL TO ACTION WHICH TEST WON? TOP 300 PIXELS BELOW TOP 300 PIXELSTwitter: @whereoware
    36. 36. So test, test, testCALL TO ACTION IN CALL TO ACTION WHICH TEST WON? TOP 300 PIXELS BELOW TOP 300 PIXELSTwitter: @whereoware
    37. 37. So test, test, test TEXT LINKS WHICH TEST WON? IMAGE LINKSTwitter: @whereoware
    38. 38. So test, test, test TEXT LINKS WHICH TEST WON? IMAGE LINKSTwitter: @whereoware
    39. 39. So test, test, test IMAGE ONLY WHICH TEST WON? TEXT + HTMLTwitter: @whereoware
    40. 40. So test, test, test IMAGE ONLY WHICH TEST WON? TEXT + HTMLTwitter: @whereoware
    41. 41. Key takeaways • Be cognizant of your audience’s email platform • The top 300 pixels of your email are the most important • Make your email mobile friendly • Test, Test, TestTwitter: @whereoware
    42. 42. Questions MORE INFOSlides available at:www.slideshare.net/whereowareMore best practices: portal.silverpop.com GET IN TOUCHJay Beutlerjbeutler@whereoware.com701-205-1463 Website: www.whereoware.com Twitter: @whereoware Facebook: www.facebook.com/whereoware Blog: www.whereoware.com/blog

    ×