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

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

on

  • 1,359 views

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 ...

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.

Statistics

Views

Total Views
1,359
Views on SlideShare
1,345
Embed Views
14

Actions

Likes
3
Downloads
0
Comments
0

4 Embeds 14

http://paper.li 7
http://a0.twimg.com 5
https://twimg0-a.akamaihd.net 1
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Whereoware - Cracking the code: Keys to email creative success - Silverpop Presentation Transcript

  • Cracking the Code:Keys to Email Creative Success
  • 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
  • Agenda • Why creative matters • Decoding an email • Preheader • Header + navigation • Body • Footer • Making it Mobile • Key takeaways8.15.2011 | Page #
  • 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
  • Email size MOST IMPORTANT 300 px EMAIL REAL ESTATE MELISSA JAEGER, KEEP FILE SIZE LESS THAN 65KB 600 px SIDE BAR SECONDARY MESSAGETwitter: @whereoware
  • In the preview pane OUTLOOK 2007 YAHOO MELISSA JAEGER,Twitter: @whereoware
  • In the preview pane HOTMAIL MELISSA JAEGER, AOL MELISSA JAEGERTwitter: @whereoware
  • 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 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
  • PreheadersTwitter: @whereoware
  • Decoding an email PREHEADER HEADER NAVIGATION SIDE BAR SECONDARY MESSAGETwitter: @whereoware
  • 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
  • Header + navigation EMAIL WEBSITETwitter: @whereoware
  • Decoding an email PREHEADER HEADER NAVIGATION PRIMARY MESSAGE SIDE BAR SECONDARY MESSAGE SECONDARY MESSAGETwitter: @whereoware
  • 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
  • The body: working it for the preview paneTwitter: @whereoware
  • The body: makes you want to scroll THE CASCADING S-CURVE** Coined by Retail Email BlogTwitter: @whereoware
  • The body: makes you want to scroll CREATIVE USE OF TEXT CREATIVE USE OF GRAPHICSTwitter: @whereoware
  • Decoding an email PREHEADER HEADER NAVIGATION PRIMARY MESSAGE SIDE BAR SECONDARY MESSAGE SECONDARY MESSAGETwitter: @whereoware FOOTER
  • 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
  • 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 email mobile friendly. 1 2 3Twitter: @whereoware
  • 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 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
  • 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
  • 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
  • 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• Make it obvious to your readers that they should scrollTwitter: @whereoware
  • 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
  • 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
  • So test, test, testCALL TO ACTION IN CALL TO ACTION WHICH TEST WON? TOP 300 PIXELS BELOW TOP 300 PIXELSTwitter: @whereoware
  • So test, test, testCALL TO ACTION IN CALL TO ACTION WHICH TEST WON? TOP 300 PIXELS BELOW TOP 300 PIXELSTwitter: @whereoware
  • 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 the most important • Make your email mobile friendly • Test, Test, TestTwitter: @whereoware
  • 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