How to Optimize Email for All Inboxes in a Mobile World

@meladorri @litmusapp
How to Optimize Email
For All Inboxes in a
Mobile World

JUSTINE JORDAN
litmus.com/lp/marketingunited

#thefear

“…the following vehicle has been reported towed…”

(This actually happened to @lozzzytweets )

email receipt
requested
from an ATM
transaction!

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

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

From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
Email user ﬂow
Subscriber experience

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

59
TAP, NOT CLICK!

“Does your iPhone fold?”

#EmbraceTheScroll

62
FOLLOW THROUGH!

> wtfmobileweb.com

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 ﬁrst
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
ﬂuid

Email width
changes to ﬁt
within the window
it’s viewed in
Percentage-based
widths adapts to ﬁt
the screen; text wraps
automatically

Shorter learning curve
Best for text-heavy emails

strategy #3
responsive

•  Resize content: make images ﬁt,
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 speciﬁc 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 ﬁt
•  Responsive design support
•  Images on by default
•  Resizes fonts under 13px
iPhone Mail app

•  Enlarges fonts in a ‘modiﬁed view’
•  No responsive design support
•  Mail sorted into tabs that mirrors
desktop/browser experience
•  Images on automatically
Gmail app

‘modiﬁed’ ‘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

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

Apple Watch
shows the plain
text version.

No text
version?
No email.

Links are
disabled.
(no browser)

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

OS-speciﬁc
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
!

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

RESPONSIVE EMAIL TEMPLATES
bit.ly/slate-templates

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

litmus.com/lp/marketingunited
@meladorri

How to Optimize Email for All Inboxes in a Mobile World

More Related Content

What's hot

Viewers also liked

Similar to How to Optimize Email for All Inboxes in a Mobile World

More from Litmus

Recently uploaded

How to Optimize Email for All Inboxes in a Mobile World