How to Create Great Emails
that Get Opened and Clicked
January 16th 2014
Who Am I?

Justine Jordan
Marketing Director, Litmus
Twi er

@meladorri @litmusapp
#KISSwebinar
We’ll cover…

1

Making a good first impression

2

Creating an excellent subscriber experience

3

A/B test ideas + exampl...
Why Email?

1

Effective

2

Inexpensive

3

Immediate

4

Measurable

5

(Relatively) easy
#KISSwebinar
Banner Ads

$2

for every $1 spent
Source: MediaPost.com
Keyword Ads

$17

for every $1 spent
Source: MediaPost.com
Email Marketing

$40
for every $1 spent

Source: MediaPost.com
Email gets more clicks . . .

#KISSwebinar
. . . and conversions

#KISSwebinar
You get the point.
Email Works.
Duh!
Email is:
A unique medium
with unique
considerations
Email is not:
A JPG
A print ad
A banner ad
A one-page web site
Emails are not weapons of mass destruction
Every email should have a purpose.

➡ What do you want the subscriber to do?
➡ How are you going to measure success?
➡ Wha...
Every email should have a purpose.
Why are you sending this email?
✓ Lead generation
✓ Brand awareness
✓ Is it relevant?
W...
Every email should have a purpose.

What do you want subscribers to do once they receive your email?
✓ Register for a webi...
The email experience

From Name
Subject Line
Preheader
Preview/Open
Tap/Click
Page/Site
???
#KISSwebinar
First impressions ma er
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

What is recognizable, trus...
no-reply is a no-go
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
Be on-brand and relevant
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???

#KISSwebinar
Symbols in subject lines

Can increase open rates.
Use carefully to support your
message rather than detract
from value.
No such thing as a perfect subject line

1

Free is OK

2

Shorter=be er?

3

Relevance!

4

Useful + specific

5

Test, te...
Preheader = tertiary inbox content
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
Preheader Best Practices

Support your subject line with a
creative, useful or helpful preheader.
1

Call to action

2

Re...
These are bad preheader examples

Repetitive content, unhelpful,
potentially negative brand impact
These are good preheader examples

Helpful, smart, funny, engaging
Preheader text case study: Wedding Wire

Pre-header text A/B Tests:
30%+ CTR Boost

/ courtesy @mparkerbyrd
Optimizing the “Envelope Fields”

From Name

~25 characters
Subject Line 

~35 characters

Preheader

~85 characters
Don’t count on images showing up
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
Convey your message without images
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
Be aware, not afraid, of the fold
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
Content and visual hierarchy

➡ Prioritize important information
➡ Prune extraneous & irrelevant content
➡ Use color, weig...
Create click opportunities
From Name

Subject Line

Preheader

➡ Linked imagery
➡ Video
➡ Bu ons
➡ Charts
➡ Colored backgr...
Tell the subscriber what to do!
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???

#KISSwebinar
What is the message?
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
What should I do?
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
What should I do?
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
Call to action best practices

1

Bu ons!

2

Context

3

Active language

4

Size

5

Placement

h ps://litmus.com/blog/d...
Bulletproof bu ons are visible when images aren’t

#KISSwebinar
Don’t forget the landing page
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
Is this a positive experience?
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Where’s the download?

… add t...
Don’t forget the text version

1

Create hierarchy with symbols

2

Avoid hard breaks

3

Put links on a new line

4

Tabs...
Don’t forget the text version
Designing for purpose

Email is the ideal
environment for fast,
easy and cheap testing
BUT
what works for one
person (or o...
Testing ideas

Time of day

Pre-Header

Day of week

Navigation

Subject Lines

Content Layout

Creative look and feel

Le...
Some tests we’ve run…

Subject lines
• Specific vs. vague
• Buzzy vs. straightforward
!

Bu on language / call-to-action
• ...
Some tests we’ve run…

Version A: Green bu on

Version B: Blue bu on
Some tests we’ve run…

no

change

Version A: Green bu on

Version B: Blue bu on
Some tests we’ve run…

Version A: Start testing

Version B: Read our overview
Some tests we’ve run…

2x

clicks

Version A: Start testing

Version B: Read our overview
Some tests we’ve run…

Subject line A:
Don’t forward
this…
!

Subject line B:
The best way to
share emails
Some tests we’ve run…

Subject line A:
Don’t forward
this…
!

Subject line B:
The best way to
share emails

54%
more click...
Testing can be simple
. . . or complex.
Which test won?

Design A

Design B

Design C
Which test won?

Design C
➡ Outperformed Control CTR by 26%
➡ Outperformed Projected revenue of 2nd place by 4%

#KISSwebi...
Which test won?

Design A

Design B

Design C
Which test won?

Design B
➡ Outperformed 2nd place by < 2%
➡ Outperformed control CTR by 26%
➡ Outperformed unsubscribe ra...
The uniqueness of email
goes beyond design . . .
HTML coding / rendering

➡ HTML for email is not HTML for the web

➡ Avoid CSS for positioning or layout

➡ Code like it’s...
HTML coding / rendering

➡ No JavaScript
➡ No Flash
➡ Limited support for HTML5 or CSS3
➡ Use inline CSS instead of embedd...
Rendering

➡ TEST TEST TEST
➡ Only comprehensive testing will ensure
that your email appears the way you
want it to in you...
Avoid this
-TAKEAWAYS -

1

Design for your subscribers

2

For every email, ask:
What am I trying to say?
How will subscribers take ...
Questions?
I (may) have answers.
Thanks!

Thanks!
justine@litmus.com / @meladorri
Upcoming SlideShare
Loading in …5
×

How to Create Great Emails that Get Opened and Clicked

5,151 views
5,030 views

Published on

Email has a bad rap: it’s been declared dead, called spam, and been sidelined by marketers and creatives alike. But email is one of the highest performing digital marketing channels, and requires its own unique set of content, marketing, and design considerations.

In this webinar, you’ll learn how using performance-driven email design can drive email strategy that delivers results, best practices and principles for creating great emails that get users to take action, and simple strategies and A/B tests to maximize conversions.

Originally presented in conjunction with KISSmetrics on January 16th, 2014.

Published in: Marketing, Technology, Business

How to Create Great Emails that Get Opened and Clicked

  1. 1. How to Create Great Emails that Get Opened and Clicked January 16th 2014
  2. 2. Who Am I? Justine Jordan Marketing Director, Litmus
  3. 3. Twi er @meladorri @litmusapp #KISSwebinar
  4. 4. We’ll cover… 1 Making a good first impression 2 Creating an excellent subscriber experience 3 A/B test ideas + examples 4 Lots of best practices along the way #KISSwebinar
  5. 5. Why Email? 1 Effective 2 Inexpensive 3 Immediate 4 Measurable 5 (Relatively) easy #KISSwebinar
  6. 6. Banner Ads $2 for every $1 spent Source: MediaPost.com
  7. 7. Keyword Ads $17 for every $1 spent Source: MediaPost.com
  8. 8. Email Marketing $40 for every $1 spent Source: MediaPost.com
  9. 9. Email gets more clicks . . . #KISSwebinar
  10. 10. . . . and conversions #KISSwebinar
  11. 11. You get the point.
  12. 12. Email Works. Duh!
  13. 13. Email is: A unique medium with unique considerations
  14. 14. Email is not: A JPG A print ad A banner ad A one-page web site
  15. 15. Emails are not weapons of mass destruction
  16. 16. Every email should have a purpose. ➡ What do you want the subscriber to do? ➡ How are you going to measure success? ➡ What are the business goals behind this communication? ➡ Is email the best way to communicate your message? ➡ Who should should receive the message? ➡ Is the message relevant to your subscribers? #KISSwebinar
  17. 17. Every email should have a purpose. Why are you sending this email? ✓ Lead generation ✓ Brand awareness ✓ Is it relevant? Who are you sending to, and what do you know about them? ✓ Internal vs. external ✓ B2B vs. B2C ✓ Demographics #KISSwebinar
  18. 18. Every email should have a purpose. What do you want subscribers to do once they receive your email? ✓ Register for a webinar ✓ Read an article How are you going to measure success? ✓ Open/click data ✓ Leads generated ✓ Conversions What do you want the subscriber to do? ✓ Is email the best way to communicate your message? #KISSwebinar
  19. 19. The email experience From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ??? #KISSwebinar
  20. 20. First impressions ma er From Name Subject Line Preheader Preview/Open Tap/Click Page/Site What is recognizable, trustworthy and relevant? Does the subscriber have a relationship with a person or the brand? ???
  21. 21. no-reply is a no-go From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  22. 22. Be on-brand and relevant From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ??? #KISSwebinar
  23. 23. Symbols in subject lines Can increase open rates. Use carefully to support your message rather than detract from value.
  24. 24. No such thing as a perfect subject line 1 Free is OK 2 Shorter=be er? 3 Relevance! 4 Useful + specific 5 Test, test, test h ps://litmus.com/blog/how-to-write-the-perfect-subject-line-infographic
  25. 25. Preheader = tertiary inbox content From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  26. 26. Preheader Best Practices Support your subject line with a creative, useful or helpful preheader. 1 Call to action 2 Reminder 3 Special message / value prop 4 Clickable/measurable #KISSwebinar
  27. 27. These are bad preheader examples Repetitive content, unhelpful, potentially negative brand impact
  28. 28. These are good preheader examples Helpful, smart, funny, engaging
  29. 29. Preheader text case study: Wedding Wire Pre-header text A/B Tests: 30%+ CTR Boost / courtesy @mparkerbyrd
  30. 30. Optimizing the “Envelope Fields” From Name
 ~25 characters Subject Line 
 ~35 characters Preheader
 ~85 characters
  31. 31. Don’t count on images showing up From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  32. 32. Convey your message without images From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  33. 33. Be aware, not afraid, of the fold From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  34. 34. Content and visual hierarchy ➡ Prioritize important information ➡ Prune extraneous & irrelevant content ➡ Use color, weight, size & placement for emphasis ➡ Bullets are your friends ➡ Use a mix of rational & emotional appeals ➡ Utilize background colors, lists & borders ➡ Use strong & clear calls-to-action
  35. 35. Create click opportunities From Name Subject Line Preheader ➡ Linked imagery ➡ Video ➡ Bu ons ➡ Charts ➡ Colored backgrounds ➡ Preheader text ➡ Forward & share Preview/Open Tap/Click Page/Site ???
  36. 36. Tell the subscriber what to do! From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ??? #KISSwebinar
  37. 37. What is the message? From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  38. 38. What should I do? From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  39. 39. What should I do? From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  40. 40. Call to action best practices 1 Bu ons! 2 Context 3 Active language 4 Size 5 Placement h ps://litmus.com/blog/designing-the-perfect-call-to-action
  41. 41. Bulletproof bu ons are visible when images aren’t #KISSwebinar
  42. 42. Don’t forget the landing page From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  43. 43. Is this a positive experience? From Name Subject Line Preheader Preview/Open Tap/Click Where’s the download? … add to cart? Page/Site ???
  44. 44. Don’t forget the text version 1 Create hierarchy with symbols 2 Avoid hard breaks 3 Put links on a new line 4 Tabs, spacing and CAPS to organize content 5 Convey imagery with text #KISSwebinar
  45. 45. Don’t forget the text version
  46. 46. Designing for purpose Email is the ideal environment for fast, easy and cheap testing BUT what works for one person (or one email) won’t necessarily work for another
  47. 47. Testing ideas Time of day Pre-Header Day of week Navigation Subject Lines Content Layout Creative look and feel Length of content Imagery Personalization Call to action Segmentation Be sure your test is repeatable. You need a hypothesis. #KISSwebinar
  48. 48. Some tests we’ve run… Subject lines • Specific vs. vague • Buzzy vs. straightforward ! Bu on language / call-to-action • Product vs. content • Additional bu ons (more click opportunities) ! Video thumbnail imagery • Person vs. product ! Content • Headline vs. no headline ! Bu on colors • Green vs. blue #KISSwebinar
  49. 49. Some tests we’ve run… Version A: Green bu on Version B: Blue bu on
  50. 50. Some tests we’ve run… no change Version A: Green bu on Version B: Blue bu on
  51. 51. Some tests we’ve run… Version A: Start testing Version B: Read our overview
  52. 52. Some tests we’ve run… 2x clicks Version A: Start testing Version B: Read our overview
  53. 53. Some tests we’ve run… Subject line A: Don’t forward this… ! Subject line B: The best way to share emails
  54. 54. Some tests we’ve run… Subject line A: Don’t forward this… ! Subject line B: The best way to share emails 54% more clicks
  55. 55. Testing can be simple . . . or complex.
  56. 56. Which test won? Design A Design B Design C
  57. 57. Which test won? Design C ➡ Outperformed Control CTR by 26% ➡ Outperformed Projected revenue of 2nd place by 4% #KISSwebinar
  58. 58. Which test won? Design A Design B Design C
  59. 59. Which test won? Design B ➡ Outperformed 2nd place by < 2% ➡ Outperformed control CTR by 26% ➡ Outperformed unsubscribe rate by 15.9% #KISSwebinar
  60. 60. The uniqueness of email goes beyond design . . .
  61. 61. HTML coding / rendering ➡ HTML for email is not HTML for the web ➡ Avoid CSS for positioning or layout ➡ Code like it’s 1999! ➡ Proper syntax is key ➡ Use HTML tables for layout ➡ Use ALT text • Specify widths for table elements • Images should be in their own table cell #KISSwebinar
  62. 62. HTML coding / rendering ➡ No JavaScript ➡ No Flash ➡ Limited support for HTML5 or CSS3 ➡ Use inline CSS instead of embedded • (Gmail doesn’t support embedded CSS) ➡ HTML forms (not supported everywhere) ➡ Background images (not supported in Outlook 2007+) ➡ Web-based email clients behave differently based on the browser (IE vs Firefox)
  63. 63. Rendering ➡ TEST TEST TEST ➡ Only comprehensive testing will ensure that your email appears the way you want it to in your subscriber’s inbox ➡ Subscribers view emails in many different environments: desktop email clients, web-based email clients and mobile clients. #KISSwebinar
  64. 64. Avoid this
  65. 65. -TAKEAWAYS - 1 Design for your subscribers 2 For every email, ask: What am I trying to say? How will subscribers take action? Where are they going next? 3 Institute a culture of testing
  66. 66. Questions? I (may) have answers.
  67. 67. Thanks! Thanks! justine@litmus.com / @meladorri

×