Designed for Success: Optimizing the Email Experience
description
Transcript of Designed for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email Experience
JUSTINE JORDAN @meladorri @litmusapp
DISCLAIMERS
#SearchLove @meladorri
#SearchLove @meladorri
‘Best practices’ are like training wheels.
Test.
-@mparkerbyrd
#SearchLove @meladorri
@mparkerbyrd
@lozzytweets
@RodriguezCommaJ
@KevinGotBounce
#SearchLove @meladorri
#SearchLove @meladorri
#SearchLove @meladorri
#SearchLove @meladorri
………
#SearchLove @meladorri
email?
EMAIL IS NOTJPG
PPC SEO CPC ONE-PAGE WEBSITE
#SearchLove @meladorri
EMAIL IS NOT
#SearchLove @meladorri
#SearchLove @meladorri
EMAIL IS<make it rain>
<emotional/happy>
#SearchLove @meladorri
YES,
EMAIL IS
#SearchLove @meladorri
BUT ALSO,
TRUST BANK
CREDIT DEBIT
@BRENDAN
DIRECT
QUANTITATIVE
REAL-TIME#SearchLove @meladorri
EMAIL IS A1-to-1MEDIUM
#SearchLove @meladorri
EMAIL IS AuniqueMEDIUM
#SearchLove @meladorri
!
<table>
<td>
<td>
px
style=“font-face”
bgcolor
padding
!
Web
!
<div>
<h1>
<p>
em
<style>
background-color
margin
#SearchLove @meladorri
Use this
!
#ffffff
bgcolor
individual properties
width=“100”
style=“…”
align=“left”
!
Not this
!
#fff or rgb
background-color
shorthand
width:100px
<style>
text-align:left
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
SUBSCRIBER EXPERIENCE
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
‣What is recognizable, trustworthy and
relevant?
‣Does the subscriber have a relationship
with a person or the brand?
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
1 Free is OK
2 Shorter=better?
3 Relevance!
4 Useful + specific
5 Test, test, test
https://litmus.com/blog/how-to-write-the-perfect-subject-line-infographic
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
✔
✔
✔
✘
✘
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
Pre-header text A/B Tests: 30%+ CTR Boost
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
<div style="line-height:1px;font-size:1px;color:#FFFFFF;display:none;"> !Insert your magically appearing/disappearing preheader text here! !</div>
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
75% of emails are displayed with preview text
~25 characters
25% of the inbox
!
!
~35 characters
25% of the inbox
!
!
~85 characters
50% of the inbox
FROM NAME
SUBJECT LINE
PREHEADER
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
Future proof emails
for the Apple Watch
FROM NAME SUBJECT LINE
PREHEADER
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
Guide to styled ALT text: http://bit.ly/styledALT Guide to image blocking: http://bit.ly/image-block
<img alt="Litmus" width="200" height="50" style=“font-family: Arial; color: #ffffff; font-size:20px" border="0">
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
“Does your iPhone fold…?”
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
“Scrolling is easier than clicking.”
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
‣Minimize friction
‣Be clear and concise
‣Test buttons vs. text
‣Use active language
‣Consider size,
placement, color, and context
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
h"p://bit.ly/bulletproof-‐bu"ons
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#cccccc" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="https://litmus.com/” style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none;">Litmus</a> </td> </tr> </table>
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
#SearchLove @meladorri
FROM NAME SUBJECT LINE
PREHEADER OPEN TAP/CLICK PAGE/SITE
… add to cart?
#SearchLove @meladorri
‣Create hierarchy with
symbols
‣ Avoid hard breaks
‣ Put links on a new line
‣ Tabs, spacing and CAPs to
organize
‣Convey imagery with text
DELIVERING
#SearchLove @meladorri
EXPERIENCES
‣Register for a webinar
‣Read an article
‣Buy something
WHAT
‣Triggered vs. mass
‣Drip or automation
‣Behavioral-based
‣Day and time
WHEN
‣Mobile / tablet
‣Web browser / webmail
‣Desktop / at work
WHERE
‣Brand awareness
‣Content marketing
‣ Influence behavior
‣Drive purchases
WHY
‣Opens
‣Clicks
‣Conversions
HOW
‣ Internal vs. external
‣B2B vs. B2C
‣Demographics
‣Know your audience!
WHO
EXECUTIVE SUMMARYHow would you explain this campaign in an elevator ride to your CEO?FIVE W’SEvery email should have a purpose and a clearly stated goal.• WHO are you sending to?• WHAT do you want them to do?• WHEN is it appropriate to send the message?• WHERE will the recipient read it?• WHY are you sending this message?• HOW are you going to measure success?
MESSAGING STRATEGYWhat content should be included in the email? Be as detailed as possible, including:• From name• From address• Subject line• Preheader text• Headline(s)• Subhead(s)• Copy points• Call to action• Graphics/images
SEGMENTATION STRATEGYIndicate what data fields or customer attributes will be used for segmentation or dynamic content.TESTING STRATEGYOutline all components of testing, the test hypothesis, and how it will be analyzed.
• What are you trying to learn or optimize? Be sure the test is repeatable.
• What elements will be tested (creative, subject line, time of day, day of week, etc.)?
• How will you structure your test and what criteria will be used to identify success?
ex. 50/50, 10/10/80; most opens, clicks or conversions?
PLAN YOUR NEXT GREAT EMAIL
HELPING MAKE GREAT EMAILS
bit.ly/email-plan
‘WHERE’ HAS BECOME A COMPLICATED QUESTION.
#SearchLove @meladorri
MOBILE EMAIL +400% since 2011
@ryanmheap @degdigital
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
Delete it
Unsubscribe
View on computer
Don't know
Read anyway
0 25 50 75 100
If you get a mobile email that doesn’t look good, what do you do?
80.3%30.2%
13.5%
3.8%
6.3%
+68%+15%
#SearchLove @meladorri
31% of marketers don’t know their
mobile email open rate
source: marketingsherpa.com
#SearchLove @meladorri
KNOW THY AUDIENCE
#SearchLove @meladorri
Copy, paste, send!
.appleBody a { color:#ffffff; text-decoration: none; } !!!<tr> <td align="center" style="padding: 10px 0 0 0; font-size: 13px; line-height: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; "> Get away <span class="appleBody">Thurs-Sun</span> ! </td> </tr> !
Blue links in iOS: http://bit.ly/blue-links
#SearchLove @meladorri
-webkit-text-size-adjust: none;
#SearchLove @meladorri
image: webdesignerdepot.com
‣Body copy 16px+
‣Headlines: 22px+
‣Buttons: 44px by 44px
‣ White space: 10px+
‣ Tappable touch targets
I LIKE…
BIG BUTTONS
#SearchLove @meladorri
#SearchLove @meladorri
‣More than a “line of code”
‣Set of conditional statement that enables specific styles
‣Detects screen size, not device type
‣Not supported in every mobile email app
RESPONSIVE EMAIL!!1!
https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
#SearchLove @meladorri
#SearchLove @meladorri
Email is an application and occasionally a mobile browser
#SearchLove @meladorri
#SearchLove @meladorri
#SearchLove @meladorri
Version A: Green bu!on Version B: Blue bu!on
CTA COLOR TEST
Version A: Green bu!on Version B: Blue bu!on
CTA COLOR TEST
no change
Version A: Start testing Version B: Read our overview
CTA TEXT TEST
Version A: Start testing Version B: Read our overview
CTA TEXT TEST
2x clicks
+30% clicks
CATEGORY TEST
Thanks, Email! :)
Pageviews
Twitter mentions
templates.mailchimp.com
litmus.com/community
reallygoodemails.com/
campaignmonitor.com/resources
responsiveemailresources.com
https://github.com/rodriguezcommaj/salted
litmus.com/scope