strategies, tactics and design tips for mobile email success

Strategies, Tactics + Design Tips for Mobile Email Success

Justine JordanContent, research, marketing@meladorri @litmusapp

Quick Introduction

Justine has 7+ years of experience writing, designing and coding emails. Previously with ExactTarget.

Litmus lets you preview/QA emails before you send and provides detailed post-send analytics.

Mobile Email: WhyMobile is big, but how big?

Email Opens: August 2013

Mobile: Smartphones (iPhone, Android) and tablets

Desktop:Installed email programs (Outlook, Apple Mail)

Webmail:Email accessed through a web browser (Gmail, Hotmail, Yahoo!)

Desk-top

32%

Webmail21%

Mo-bile47%

Source: Litmus Email Analytics

Q1 2011Q2 2011

Q3 2011Q4 2011

Q1 2012Q2 2012

Q3 2012Q4 2012

Q1 2013Q2 20132

0%

10%

20%

30%

40%

50%

60%

Desktop Webmail Mobile

45%

33%

10%

Email Opens: 2011-now

Source: Litmus Email Analytics

Q1 2011Q2 2011

Q3 2011Q4 2011

Q1 2012Q2 2012

Q3 2012Q4 2012

Q1 2013Q2 20132

0%

10%

20%

30%

40%

50%

60%

Desktop Webmail Mobile

45%

33%

10%

Email Opens: 2011-now

Source: Litmus Email Analytics

+350%

some of our major retail brands are seeing 60% of their subscribers

viewing on a mobile device

—Cara Olson, DEG

“

”

Brand/Industry A: 55% Brand/Industry B: 18%

Plan on data, not your gut

Know Your Audience

Copy, paste& send

Small Medium Large

iPhone2.3” wide

Galaxy Note II3.2” wide

Nexus 77.3” wide

BB Bold2.6” wide

iPad Mini5.3” wide

Excite 138.5” wide

Screensize-apalooza

The unifying characteristic?

TOUCH.

Experience MattersIt’s more than just metrics

One Chance to Make an Impression

Delete it

Unsubscribe

View on computer

Don't know

Read anyway

80.30%

30.20%

13.50%

3.80%

6.30%

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

Neutral24.60%

Slightly Negative51.30%

Strongly Negative24.10%

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?

+15%

+68%

Mobile Triage Myth

3% reopen on another

client

97% view in a single

environment

Consider the experience

• The mobile experience is different than the desktop experience

• Landing pages are part of that experience

????

Page/Site

Tap

Preview/Open

Preheader

Subject Line

From Name

From name and subject line are front and center

Focus on ‘from name’ and subject line

From Name~25 characters

Subject Line ~35 characters

Preheader~85 characters

17

Preheaders Are Tertiary Inbox Content

iPhone Windows Phone

Blackberry

iPhone Windows Phone

Blackberry

Inconsistent rendering across devices and operating systems

iPhone:Scales to width;

320 x 460

Android:No scaling; dimensions

vary;top-left corner

displayed

Inconsistent rendering across devices and operating systems

15% two handed

49% one handed

36% cradled

http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

67% used right thumb on the screen33% used left thumb on the screen

Provide click/tap opportunities

Prioritize and focus

• Identify the top 3-5 activities– Purchase?– Download?– Registration?– Social?

NO:interstitial boxes

NO:impossible form fields

YES:easy to navigate

YES:finger friendly

Mobile Design Principlesaka ‘best practices’

Preheader Practices• Support the subject line with a

creative, useful or helpful preheader.– Call-to-action– Special offer– Reminder– Clickable/measurable– NOT “having trouble…?”

Bigger is Better• Body copy: 16px+• Headlines: 22px+• Buttons: 44px by 44px• Space: 10px+

• Tappable touch targets• Bulletproof buttons that

don’t rely on an image• Left-hand side

Say no to link clusters and yes to white space

Device targeting can display app/OS specific content

Dial up the contrast

Bright screens kill batteries

Test, test, test!

Strategies & Approacheshow-to

As with most things with email, there’s not a one-size-fits-all approach

(sorry to disappoint you)

Mobile First

Considers the mobile user as a priority

|-------------------460px -------------------|

|---------------------600px ---------------------|

Mobile First / Friendly

• One layout for all screen sizes

• Single column design– 320-500px

• Large text & buttons • Generous white space• Clear calls to action • Short, concise body copy

Agnostic / Aware / Scalable

Pros• Prioritizes important data,

content, actions• Easier execution• No reliance on media query

support• Good rendering in apps and

native clients

Cons• Desktop can suffer• Less real estate• Can get long• Fixed width can be

less than ideal for Android

Mobile First / Friendly

BEST FOR: Ready for change, testing the waters, or resource strapped

Fluid

Email width changes to fit within the window

|--------------------------------------------------------1166px---------------------------------------------------|

|-----------------------------525px --------------------------|

Fluid layout

• Percentage-based widths

• Adapts to fill the screen it’s viewed on; text wraps automatically

Fluid layout

BEST FOR: Simple layouts, automated emails, mostly text/few images

Pros• Simple execution• No learning curve or reliance on

media queries

Cons• Fewer design choices• Very narrow or very wide

emails can get awkward and hard to read

ResponsiveDesign

Uses media queries to detect screen size and alter content accordingly

|-----------320px ------------||--------------------------------------------700px------------------------------------------|

Responsive Design

• More than a “line of code”• Set of conditional statement 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

Pros• Restyle, resize or reorder

elements• Ability to hide/show desktop or

mobile specific images/content• Customized calls to action• Seamless experience across a

range of screen sizes

Cons• Coding learning curve• Forces tough choices• Increased production

and QA time

Responsive Design

BEST FOR: Growing mobile audiences, travel alerts, tech companies

Email is an *application*

Device ≠ email client

Email is an *application*

iPhone native yes

iPad native yes

Android 2.1 native

no

Android 2.2 native

yes

Android 2.3 native

yes

Android 4.x native

yes

Gmail mobile apps

no

Mailbox iOS app yes

@media support

http://stylecampaign.com/blog/2012/10/responsive-email-support/

Yahoo! mobile apps

no

Windows Mobile 7

no

Windows Mobile 7.5

yes

Windows Mobile 8

no

BlackBerry OS 6 yes

BlackBerry OS 7 yes

BlackBerry Z10 yes

Kindle Fire native yes

• Rewards Network: CTR increased by more than 25% • Deckers: 10% increase in CTR; 9% increase in mobile

opens• Crocs: 7.66% lift in CTOR; 15.63% lift in iPhone ‘read’

engagement; 8.82% lift in mobile ‘read’ engagement • SavvyMom: 3x lift in CTOR. 12% of those who opened

on mobile clicked vs. 6% who opened on desktop

More coming all the time: litmus.com/blog

Responsive Results

Responsive isn’t always the answer

1. Resources2. Data3. Company type4. User expectations

Company A

1. Resources: coders, designers, writer

2. Data: 55% mobile

3. Company type: Tech

4. User expectations: B2B Tech audience

ResponsiveCompany B

1. Resources: marketing manager, intern

2. Data: 18% mobile

3. Company type: Non-Profit/Education

4. User expectations: low sophistication

Aware

Android Observations

• Blocks images by default; supports ALT text

• Two apps with opposing support for media queries

• Primary content focus on left-hand side

• Various screen sizes and sometimes automatic scaling

Blackberry Observations

• Media query support• Blocks images; supports styled

ALT text• Does not scale/auto-zoom• No separate app; email joins

social, SMS and voice in the “hub”

Windows Phone Observations

• Mixed media query support• Does weird things to fonts• Blocks images; no ALT text• No one has them!

iPhone Observations

• Automatically scales messages to fit the screen

• Excellent support for CSS3 and media queries

• Images on by default• Resizes fonts under 13px

Resourcesinfo + tools

http://stylecampaign.com/blog/2013/03/responsive-email-design-red/

Style CampaignRED Webinar

Market Share Stats

http://emailclientmarketshare.com

www.litmus.com/blog

Infographics, webinars, articles

Antwort: Responsive Layouts for Email

http://internations.github.io/antwort/

Responsive Email Patterns

http://briangraves.github.io/ResponsiveEmailPatterns/

Responsive Email Tutorial

http://www.netmagazine.com/tutorials/build-responsive-emails

Campaign Monitor

RED Guide

http://www.campaignmonitor.com/guides/mobile/

Resources

stylecampaign.com/blogcampaignmonitor.com/blogmailchimp.com/blogemaildesignreview.commobileawesomeness.commediaqueri.es

Media Post Email Insider columnsA List Apart / A Book ApartEthan MarcotteLuke WroblewskiTwitter community

https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources

THANKS!

@meladorrijustine@litmus.co

m

questions?