NEDMA15: How to Optimize Email for all Inboxes in a Mobile World - Justine Jordan

@meladorri @litmusapp

How to Optimize Email For All Inboxes in a

Mobile World

JUSTINE JORDAN @meladorri @litmusapp

litmus.com/lp/nedma15


I HAVE SOME BAD NEWS

(Y)OUR EMAILS SUCK.






#thefear


MEANWHILE…

“…the following vehicle has been reported towed…”

<[email protected]>


YOUR CAR!

(This actually happened to @lozzzytweets )



MOBILE EMAIL REALLY SUCKS

email receipt requested from an ATM transaction!

L


LET’S

UNSUCK EMAIL,

SHALL WE?


DELIVERING EXPERIENCES


EMAIL IS NOT JPG

PPC SEO CPC ONE-PAGE WEBSITE


EMAIL IS NOT


DIRECT

QUANTITATIVE

REAL-TIME

EMAIL IS A personal

MEDIUM

EMAIL IS A 1-to-1 MEDIUM

EMAIL IS A 1-to-1 MEDIUM


THE CRAZY GROWTH OF MOBILE


THE CRAZY GROWTH OF MOBILE

MOBILE EMAIL +500% since 2011

@ryanmheap @degdigital


80% of subscribers delete emails

that look bad on their phones…

…and 30% unsubscribe

source: BlueHornet


31% of marketers don’t know their

mobile email open rate

source: marketingsherpa.com


KNOW YOUR AUDIENCE

70% read on mobile

15% read on mobile


You need an “any inbox, any device” email marketing strategy


CRUSTY Context Relevance

Useful SimpliciTY

EMAIL IS A unique MEDIUM


Email

HTML

CSS

Images

Text

Design

Links

Web

HTML

CSS

Images

Text

Design

Links

✔ ✔ ✔ ✔ ✔ ✔ ✔

Email and web are the same


Web

<div>

<h1>

<p>

em

<style>

background-color

margin

Email

<table>

<td>

<td>

px

style=“font-face”

bgcolor

padding

… just kidding

GO WITH THE flow


From name Subject line Preheader Open Tap/Click Page/Site

Inbox Email/Body Page/Site

Email user flow Subscriber experience




55

From name ~25 characters 25% of the inbox Subject line ~35 characters 25% of the inbox Preview text ~85 characters 50% of the inbox




56

TAP, NOT CLICK!


“Does your iPhone fold?”


#EmbraceTheScroll




59

FOLLOW THROUGH!


> wtfmobileweb.com

THINK INSIDE the inbox


75% of emails are

displayed with preview text

in the inbox


✔

✔

✔

✘

✘


bit.ly/preview-text

The Ultimate Guide


UN-SUCKING strategies FOR MOBILE


strategy #1

mobile first

aka agnostic, aware, scalable


Considers the mobile user a priority

•  One layout for all screen sizes

•  320-500px

•  Large text & buttons

•  Generous white space

•  Clear calls to action

•  Short, concise body copy


strategy #2

fluid


Email width changes to fit within the window it’s viewed in

Percentage-based

widths adapts to fit

the screen; text wraps

automatically


Shorter learning curve

Best for text-heavy emails


strategy #3

responsive


•  Resize content: make images fit,

make text larger

•  Hide content on mobile

•  Stack columns

•  Move a two-column design to a

one-column design

•  Learning curve; but plenty of

pre-tested templates exist

•  Mixed support for media queries

across mobile

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


•  More than a “line of code”

•  Set of conditional statements that enables specific styles

Ø  If the screen size is x, then display y

Ø  If the screen size is x, then increase headline size to y

Ø  If screen size is x, then show image at 100%

•  Detects screen size, not device type

Uses media queries to detect screen size and alter content accordingly


Responsive design results in a 15% increase in unique clicks for mobile users.

https://litmus.com/blog/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing


Rendering is inconsistent across devices and operating systems


Responsive design is not supported

everywhere.


Device ≠ email client


You can’t say “responsive email works on an iPhone.” When clients say “it looks like crap on my Android.” You should ask “what email app are you using?”


•  Automatically scales to fit

•  Responsive design support

•  Images on by default

•  Resizes fonts under 13px

iPhone Mail app


•  Enlarges fonts in a ‘modified view’

•  No responsive design support

•  Mail sorted into tabs that mirrors

desktop/browser experience

•  Images on automatically

Gmail app


‘modified’ ‘original’


•  No responsive design support

•  Displays a sender icon/image in the

inbox—sometimes

•  Emails bundled into categories

•  Images on automatically

Inbox by Gmail



•  Samsung Hell

•  Support for ALT text

•  Various screen sizes, OS and app

versions

•  Mixed support for media queries

•  Some auto-scale, some do not

Android Gmail


•  Sometimes responsive works

•  Inconsistent font display

•  Blocks images

•  No ALT text

Windows Phone


•  Support for responsive design

•  Blocks images; supports ALT text

•  Does not scale/auto-zoom

•  No separate app; email joins social,

SMS and voice in the “hub”

BlackBerry

TACTICS for less suckage


UGH

Body copy: 16px+

Headlines: 22px+

Buttons: 44px by 44px

White space: 40px+


I LIKE

BIG BUTTONS

… AND I CANNOT LIE


320px 375px 414px


iPhone 5 iPhone 6 iPhone 6 Plus

WATCH yourself


Apple Watch shows the plain text version.


CRUSTY Context Relevance

Useful SimpliciTY


No text version? No email.


Links are disabled. (no browser)


A personal device that favors personal messages. >> bit.ly/watch-email

EMAIL IS A personal

MEDIUM

BONUS tips


vs.


OS-specific content


bit.ly/gifs-email


bit.ly/bulletproof-buttons

Defensive design: Image Blocking







Guide to styled ALT text >> bit.ly/styledALT

Guide to image blocking >> bit.ly/image-block !

BONUS goodies

litmus.com/lp/2015-state-of-email-report

litmus.com/conference

RESPONSIVE EMAIL TEMPLATES bit.ly/slate-templates

LITMUS TESTING + ANALYTICS litmus.com/giftcard coupon code: NEDMA15

litmus.com/lp/nedma15

@meladorri

NEDMA15: How to Optimize Email for all Inboxes in a Mobile World - Justine Jordan

Marketing

litmusapp litmus

litmusapp web em

litmusapp direct quantitative

email receipt

unsuck email

mobile email open rate

mobile world

crazy growth of mobile