NEDMA14: Fat Fingers and Small Screens - Justine Jordan

Optimizing Email for Multiscreen Delight May 14, 2014

Fat Fingers and Small Screens

Who Am I?

Justine Jordan Wearer of Many Hats, Litmus

litmus.com/lp/nedma

Sample HTML, slides, templates, frameworks, and other goodies.

@meladorri @litmusapp #NEDMA14

1 The crazy growth of mobile

We’ll cover…

2 Knowing your audience

3 Your subscribers on mobile

#NEDMA14

4 Strategies + best practices

Got Screens? image credit: helpmyhelpdesk.com

Mobile is big, but how big?

Mobile: Smartphones (iPhone, Android) and tablets Desktop: Installed email programs (Outlook, Apple Mail) Webmail: Email accessed through a web browser (Gmail, Hotmail, Yahoo!)

Source: Litmus Email Analytics

25% Webmail 48%

Mobile

27% Desktop

#NEDMA14

Looking back to 2011…

Source: Litmus Email Analytics

0%

10%

20%

30%

40%

50%

60%

70%

Desktop Webmail Mobile

10%

33%

50%

#NEDMA14

400%

mobile opens have increased

since 2011

#NEDMA14

There’s a few options out there…

Large Medium Small

The unifying characteristic?

TOUCH.

#NEDMA14

31% of marketers don’t know their

mobile email open rate

source: marketingsherpa.com

#NEDMA14

Users do not always conform to averages

< 15% read on mobile 70%+ read on mobile

#NEDMA14

It’s as easy as copy, paste, send

How does a poorly designed email affect your perception of the

brand?

If you get a mobile email that doesn’t look good, what do you do?

BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013

80.30%

30.20%

13.50%

3.80%

6.30%

Delete it

Unsubscribe

View on computer

Don't know

Read anyway

+68%

+15%

75% ‘negative’

One chance to make an impression

51% Slightly negative

25% Neutral

24% Strongly negative

#NEDMA14

Their experiences o!en suck.


great app great site not-so-great email

great site not-so-great email


email receipt requested from an ATM transaction!

The mobile experience is different than the desktop experience

Conversion

Page/Site

Click/Tap

Preview/Open

Preheader

Subject Line

From Name

The Subscriber Experience

#NEDMA14

From and subject are front and center

??? Page/Site Tap/Click Preview/Open Preheader Subject Line From Name



•  Large and bold = top hierarchy in the mobile inbox

•  Cuts off a"er ~25 characters





•  Second in the hierarchy

•  Android wraps to the next line

•  iPhone cuts off at ~35 characters


Preheader = tertiary inbox content

Good vs. bad preheaders

✔

✔

✔

✘

✘


Each phone and app is different


#NEDMA14

Each phone and app is different


#NEDMA14

#EmbraceTheScroll


Scrolling is easier than clicking. Scrolling is a continuation. Clicking is a decision. Hundreds or thousands of decisions taken together add up to real friction.

@bokardo

#NEDMA14

??? Page/Site Tap/Click Preview/Open Preheader Subject Line

I like big bu#ons…

From Name


Don’t forget the landing page

From Name

NO: interstitials horrible forms Flash

#NEDMA14


Optimize the conversion path

From Name

YES: Easy to use Finger friendly

#NEDMA14


Optimize the conversion path

From Name

#NEDMA14

•  What is your goal?

•  Can the CTA be achieved on mobile?

•  Is it tappable?

•  How many clicks/taps/actions are required?

•  Is the landing page optimized? Should it be?

strategy #1

mobile first

aka agnostic, aware, scalable

Strategy #1: Mobile first

Considers the mobile user a priority •  One layout for all screen sizes •  320-500px •  Large text & bu#ons •  Generous white space •  Clear calls to action •  Short, concise body copy

#NEDMA14

Strategy #1: Mobile first

strategy #2

fluid

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

#NEDMA14

Strategy #2: Fluid

Shorter learning curve Best for text-heavy emails

strategy #3

responsive

Strategy #3: Responsive

•  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

#NEDMA14


•  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

h#ps://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic


Email is a unique medium with unique considerations

Click is now tap

The finger is the new mouse

#NEDMA14

Your users have fat fingers (we all do)

image: webdesignerdepot.com #NEDMA14

Bigger is be#er

•  Body copy: 16px+

•  Headlines: 22px+

•  Bu#ons: 44px by 44px

•  Space: 10px+

•  Tappable touch

targets

#NEDMA14

Blue links on iOS

•  24% market share

•  Automatically scales to fit

•  Excellent support for media queries

•  Images on by default

•  Resizes fonts under 13px

What to know: iPhone

#NEDMA14

What to know: BlackBerry

•  0.097% market share

•  Media query support

•  Blocks images; supports ALT text

•  Does not scale/auto-zoom

•  No separate app; email joins social,

SMS and voice in the “hub”

#NEDMA14

What to know: Windows Phone

•  0.163% market share

•  Mixed media query support

•  Inconsistent font display

•  Blocks images •  CTAs require 2 clicks for image-based

emails

•  No ALT text

#NEDMA14

What to know: Android

•  9% market share

•  Support for ALT text

•  Various screen sizes, OS and app

versions

•  Mixed support for media queries

•  Some auto-scale, some do not

#NEDMA14

What to know: Tablets

•  iPad: 12% market share •  Touch screen considerations

apply, but with more screen real estate

•  Consider tablet-specific media queries for unique audiences

•  68% of US owners use tablets while watching TV

•  Conversion rates are typically higher for tablets than smartphones

#NEDMA14

Wide variety of ways to access email

Device ≠ email client


Device ≠ email client

Email is an applica&on

Rendering is inconsistent across devices and operating systems


Testing is crucial

#NEDMA14

Testing is crucial

#NEDMA14

1 Know your audience & consider the mobile users’ needs

2

3

Tap your way to success

-TAKEAWAYS -

4 Rendering is tied to app, not device

Responsive is not impossible, but it’s not a silver bullet, either

litmus.com/community

litmus.com/conference

litmus.com/lp/nedma

14-DAY TRIAL

LITMUS.COM/GIFTCARD

HELLO

Thanks!

Thanks!