E-mail • Direct Mail • Digital Marketing • Sales ToolsFunding Data • Creative Services

Mobile email: Strategies and how-tos

for the small screen

Mobile e-mail: Strategies and how-tos for the small screen

Welcome!

Mobile e-mail: Strategies and how-tos for the small screen

Sponsored by:

Learn more about Agile at www.agile-ed.com.

Justine Jordan

Director of Marketing, Litmus

Justine leads content marketing, customer

education and research initiatives for Litmus’

suite of email tracking and testing tools. Prior to

joining Litmus, Justine lead the creative services

team at ExactTarget and was responsible for

designing, building and managing email

campaigns for SMB through Fortune 500

customers. Read her rants and raves by

following @meladorri.

Presenter Introduction

Got screens?

Mobile Email: WhyMobile is big, but how big?

Email Opens: July 2013

Mobile: Smartphones (iPhone, Android) and tablets

Desktop:Installed email programs (Outlook, Apple Mail)

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

Desktop34%

Webmail22%

Mobile44%

Source: Litmus Email Analytics

Q1 2011

Q2 2011

Q3 2011

Q4 2011

Q1 2012

Q2 2012

Q3 2012

Q4 2012

Q1 2013

Q2 201320%

10%

20%

30%

40%

50%

60%

Desktop Webmail Mobile

Email Opens: 2011-now

44%33%

10%

Know Your Audience

Copy, paste& send

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

viewing on a mobile device

“

—Cara Olson, Digital Evolution Group

”

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

File it

70%

18%

18%

9%

8%

4%

BlueHornet Study: Consumer Views of Email Marketing

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?

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

Focus on ‘from name’ and subject line

Focus on ‘from name’ and subject line

From Name~25 characters

Subject Line ~35 characters

Preheader~85 characters

17

Preheaders = tertiary inbox content

Preheaders = tertiary inbox content

iPhone Windows Phone

Blackberry

iPhone:Scales to width;

320 x 460

Android:No scaling; dimensions

vary;top-left corner

displayed

Inconsistent rendering across devices and operating systems

22

Provide click/tap opportunities

What makes the email on the left different?

NO:crowded grids

NO:impossible form fields

24

YES:easy to navigate

YES:finger friendly

Strategies & ApproachesHow to tackle mobile email

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

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

ResponsiveDesign

Uses media queries to detect screen size and alter content accordingly

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

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

Taking ActionTry to avoid analysis paralysis

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

Email is an *application*

Email is an *application*

Device ≠ email client

Plan on data, not your gut

Your audience is the most important one

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

Responsive isn’t always the answer

1. Resources

2. Data

3. Company type

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

Mobile Email Design Principles“Best practices,” if you will…

Preheader tips

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

– Or else face auto-resizing

• Buttons: 44px by 44px• Space: 10px+

Dial up the contrast

Bright screens kill batteries

Lots of links create friction

Don’t give users a reason NOT to click by making text or other calls-to-action impossible to tap.

• Tappable touch targets• ‘Bulletproof’ buttons don’t rely on

an image• Left-hand side

Create touch targets

Buttons can be traditional text buttons or image-based touch targets that link back to content.

Test, test, test!

Mobile email testing with Litmus

ResultsTest and share for the common good!

• 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

ResourcesInfo + tools

Market Share Stats

http://emailclientmarketshare.com

Antwort: Responsive Layouts for Email

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

Zurb: Responsive

Email Templateshttp://www.zurb.com/

article/1119/create-emails-for-any-device-introducing-

*not compatible with Outlook 2007+

Responsive Email Tutorial

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

Campaign Monitor

RED Guidehttp://www.campaignmonitor.com/

guides/mobile/

Resourceslitmus.com/blog

stylecampaign.com/blog

campaignmonitor.com/blog

mailchimp.com/blog

emaildesignreview.com

mobileawesomeness.com

mediaqueri.es

Media Post Email Insider columns

A List Apart / A Book Apart

Ethan Marcotte

Luke Wroblewski

Twitter community

Get in touch

Justine Jordan@meladorri @litmusapphello@litmus.com