This document provides guidance on email creative success. It discusses the importance of creative elements like preheaders, headers, navigation, body text, and footers. It also covers best practices for making emails view well on mobile and different email platforms. Key recommendations include testing different creative elements and focusing on the top 300 pixels of emails.

1. Cracking the Code:
Keys to Email Creative Success

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, automated
Twitter: @Whereoware

3. Agenda
• Why creative matters
• Decoding an email
• Preheader
• Header + navigation
• Body
• Footer
• Making it Mobile
• Key takeaways
8.15.2011 | Page #

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 pop
Twitter: @whereoware

5. Email size
MOST IMPORTANT
300 px
EMAIL REAL
ESTATE
MELISSA JAEGER,
KEEP FILE
SIZE LESS
THAN 65KB 600 px
SIDE BAR
SECONDARY MESSAGE
Twitter: @whereoware

6. In the preview pane
OUTLOOK 2007
YAHOO
MELISSA JAEGER,
Twitter: @whereoware

7. In the preview pane
HOTMAIL
MELISSA JAEGER,
AOL
MELISSA JAEGER
Twitter: @whereoware

8. Decoding an email
PREHEADER
SIDE BAR
SECONDARY MESSAGE

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. Preheaders
Twitter: @whereoware

11. Decoding an email
PREHEADER
HEADER
NAVIGATION
SIDE BAR
SECONDARY MESSAGE
Twitter: @whereoware

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 way
Twitter: @whereoware

13. Header + navigation
EMAIL WEBSITE
Twitter: @whereoware

14. Decoding an email
PREHEADER
HEADER
NAVIGATION
PRIMARY MESSAGE
SIDE BAR
SECONDARY MESSAGE
SECONDARY MESSAGE
Twitter: @whereoware

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 forms
Twitter: @whereoware

16. The body: working it for the preview pane
Twitter: @whereoware

17. The body: makes you want to scroll
THE CASCADING
S-CURVE*
* Coined by Retail Email Blog
Twitter: @whereoware

18. The body: makes you want to scroll
CREATIVE USE OF TEXT
CREATIVE USE OF GRAPHICS
Twitter: @whereoware

19. Decoding an email
PREHEADER
HEADER
NAVIGATION
PRIMARY MESSAGE
SIDE BAR
SECONDARY MESSAGE
SECONDARY MESSAGE
Twitter: @whereoware FOOTER

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. The footer
Twitter: @whereoware

22. Making it mobile
Use analytics to see how many of your users are using mobile
Twitter: @whereoware

23. Making it mobile
Skip the “mobile” friendly link at the top.
Just make the email mobile friendly.
1 2 3
Twitter: @whereoware

24. Making it mobile
Avoid long subject lines
Twitter: @whereoware

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 px
Twitter: @whereoware

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 px
Twitter: @whereoware

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 px
Twitter: @whereoware

28. Making it mobile
Twitter: @whereoware

29. All email platforms render differently
OUTLOOK 2007 iPHONE
Twitter: @whereoware

30. All email platforms render differently
GMAIL (FIREFOX) GMAIL (IE)
Twitter: @whereoware

31. All email platforms render differently
YAHOO (FIREFOX) YAHOO (IE)
Twitter: @whereoware

32. Yet…rules were made to be broken
THE SIDE SCROLLING EMAIL
What to remember:
• Load all the important stuff to the left
• Make it obvious to your readers that they should scroll
Twitter: @whereoware

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 work
Twitter: @whereoware

34. Yet…rules were made to be broken
HUGE HEADERS
What to remember:
Design the email in a way that
makes users want to scroll
Twitter: @whereoware

35. So test, test, test
CALL TO ACTION IN CALL TO ACTION
WHICH TEST WON?
TOP 300 PIXELS BELOW TOP 300 PIXELS
Twitter: @whereoware

36. So test, test, test
CALL TO ACTION IN CALL TO ACTION
WHICH TEST WON?
TOP 300 PIXELS BELOW TOP 300 PIXELS
Twitter: @whereoware

37. So test, test, test
TEXT LINKS WHICH TEST WON? IMAGE LINKS
Twitter: @whereoware

38. So test, test, test
TEXT LINKS WHICH TEST WON? IMAGE LINKS
Twitter: @whereoware

39. So test, test, test
IMAGE ONLY WHICH TEST WON? TEXT + HTML
Twitter: @whereoware

40. So test, test, test
IMAGE ONLY WHICH TEST WON? TEXT + HTML
Twitter: @whereoware

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, Test
Twitter: @whereoware

42. Questions
MORE INFO
Slides available at:
www.slideshare.net/whereoware
More best practices: portal.silverpop.com
GET IN TOUCH
Jay Beutler
jbeutler@whereoware.com
701-205-1463
Website: www.whereoware.com
Twitter: @whereoware
Facebook: www.facebook.com/whereoware
Blog: www.whereoware.com/blog