justine jordan | searchlove san diego, 'designed for success: optimizing the email experience

Designed for Success: Optimizing the Email Experience

JUSTINE JORDAN @meladorri @litmusapp

DISCLAIMERS

#SearchLove @meladorri


‘Best practices’ are like training wheels.

Test.

-@mparkerbyrd


@mparkerbyrd

@lozzytweets

@RodriguezCommaJ

@KevinGotBounce


………


email?

EMAIL IS NOTJPG

PPC SEO CPC ONE-PAGE WEBSITE


EMAIL IS NOT


EMAIL IS<make it rain>

<emotional/happy>


YES,

EMAIL IS


BUT ALSO,

TRUST BANK

CREDIT DEBIT

@BRENDAN

DIRECT

QUANTITATIVE

REAL-TIME#SearchLove @meladorri

EMAIL IS A1-to-1MEDIUM


EMAIL IS AuniqueMEDIUM


Email

!

<table>

<td>

<td>

px

style=“font-face”

bgcolor

padding

!

Web

!

<div>

<h1>

<p>

em

<style>

background-color

margin


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


FROM NAME SUBJECT LINE

PREHEADER OPEN TAP/CLICK PAGE/SITE

SUBSCRIBER EXPERIENCE




‣What is recognizable, trustworthy and

relevant?

‣Does the subscriber have a relationship

with a person or the brand?


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


https://litmus.com/blog/how-to-write-the-perfect-subject-line-infographic

✔

✔

✔

✘

✘



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




<div style="line-height:1px;font-size:1px;color:#FFFFFF;display:none;"> !Insert your magically appearing/disappearing preheader text here! !</div>




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



Future proof emails

for the Apple Watch


PREHEADER




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


http://bit.ly/styledALT

http://bit.ly/image-block

“Does your iPhone fold…?”




“Scrolling is easier than clicking.”




‣Minimize friction

‣Be clear and concise

‣Test buttons vs. text

‣Use active language

‣Consider size,

placement, color, and context







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>

http://bit.ly/bulletproof-buttons




… add to cart?


‣Create hierarchy with

symbols

‣ Avoid hard breaks

‣ Put links on a new line

‣ Tabs, spacing and CAPs to

organize

‣Convey imagery with text

DELIVERING


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

http://bit.ly/email-plan

‘WHERE’ HAS BECOME A COMPLICATED QUESTION.


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%


31% of marketers don’t know their

mobile email open rate

source: marketingsherpa.com


http://marketingsherpa.com

KNOW THY AUDIENCE


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


http://bit.ly/blue-links

-webkit-text-size-adjust: none;


image: webdesignerdepot.com

‣Body copy 16px+

‣Headlines: 22px+

‣Buttons: 44px by 44px

‣ White space: 10px+

‣ Tappable touch targets

http://webdesignerdepot.com

I LIKE…

BIG BUTTONS


‣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


https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic

Email is an application and occasionally a mobile browser


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

http://templates.mailchimp.com

litmus.com/community

http://litmus.com/community

reallygoodemails.com/

http://reallygoodemails.com/

campaignmonitor.com/resources

http://campaignmonitor.com/resources

responsiveemailresources.com

http://responsiveemailresources.com

https://github.com/rodriguezcommaj/salted

https://github.com/rodriguezcommaj/salted

litmus.com/scope

http://litmus.com/scope

[email protected] @meladorri

THANKS!

litmus.com/lp/searchlove

http://litmus.com/lp/searchlove