Mobile-friendly email: Trends and best practices

transcript

www.act-on.com | @ActOnSoftware | #ActOnSW

Mobile-friendly emailTrends and best practices

Join the @ActOnSoftware conversation on Twitter and discover what others are saying about us:

#ActOnSW

Welcome! Thanks for joining us today.

Janelle JohnsonDirector, DemandGen

Act-On Software@janelle_johnson

Justine JordanMarketing Director

Litmus@meladorri

Agenda

• Email Marketing Basics

• The Lay of the Land

• Email Best Practices

• Tips & Tricks for Mobile Emails

• Trends & The Future

Importance of Email Marketing

Leverage Email Marketing

• Consistency in messaging

• Planning and coordination

• Content is King

The Basics

1. Segment

2. Subject line

3. CTA / Landing Page

4. Test & Refine

5. Mobile -friendly

Some Stats: A Lay of the Land

Email Opens: January 2013

Desktop33%

Webmail25%

Mobile42%

Source: Litmus Email Analytics

Mobile: Smartphones (iPhone, Android) and tablets

Desktop:Installed email programs (Outlook, Apple Mail)

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

Change Over Last 12 Months

Jan FebMarch April May June July Aug Sept Oct Nov Dec

Jan220%

Opens in Each Environment

Webmail Desktop Mobile

Mobile opens have grown 138% in 18 months; 45% in last year

Source: Litmus Email Analytics

Mobile Market Share

iPhone56%

Android16%

iPad27%

Other1%

Mobile Email OpensSource: Litmus Email Analytics

Android

Blackberry

Microsoft

Symbian

Others

0% 10% 20% 30% 40% 50% 60% 70% 80%

69.70%

20.90%

53.40%

36.30%

Smartphone OS Share

US WorldwideSource: ComScore (US); Gartner (Worldwide)

Know Your Audience

31% of marketers don’t know their mobile email open rate!

What percentage of customers/prospects interact with your organization’s mobile email messages?

Back to Basics: Best Practices

Subscriber Experience

Subscribers view emails in stages, making

choices as they go.

Landing Page/SiteClick

Preview/Open

Preheader

Subject Line

From Name

Envelope Fields

From Name~25 characters

Subject Line ~35 characters

Preheader~85 characters

Preheader

• Support the subject line with a creative, useful or helpful preheader.• Call-to-action• Special offer• Reminder• Clickable/

measurable

Preview/Open

iPhone: 320 x 460

Android: Dimensions vary;

top-left corner displayed

Preview/Open

Emphasis on from name & subject line. Images often disabled.

iPhone Windows Phone Blackberry

• Tappable touch targets• Bulletproof buttons that

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

Landing Page/Site

Don’t forget the landing page!

Not these… But these!

Tips and Tricks for Mobile Emails

Consider Context

• You can’t predict where users open… most of the time.• Mobile app follow-ups• Travel alerts• Mobile coupons• Weekend sends

The Finger is the New Mouse

Design for tappable touch targets; not text links44 x 44px minimum

Touch Targets

Text Buttons Image “Buttons”

Increase Font Sizes

• Recommended minimums• Body copy: 14px• Headlines: 22px

• Body copy < 13px will be resized in iOS• CSS fix: “-webkit-text-size-adjust: none;”

Increase Font Sizes

Streamline

• Content comes first• Reduce clutter

• Navigation• Repeated links• Low priority

content/imagery• Clear and direct

copy/CTAs

Don’t Create Friction

Trends and the Future

Symbols in Subject Lines

Can increase open rates. Use carefully to support your message rather than detract from value

Mobile First/Aware/Scalable

• 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

Responsive Design

• Uses media queries or @media• Not a “line of code”, more like a conditional

statement that enables alternate 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 of the device being read on and enables alternate styles accordingly

• Not supported everywhere

Device Detection

Detects mobile device at time of open: deliver “deep link” directly to app store, specialized content, timers

Inspiration and Examples

Jetsetter: Aware

Vodafone: Responsive

Resources & Takeaways

Resources

stylecampaign.com/bloglitmus.com/blogcampaignmonitor.com/blogemaildesignreview.commobileawesomeness.commediaqueri.esMedia Post Email Insider columnsA List Apart / A Book ApartEthan Marcotte and Luke Wroblewski

Your Takeaways

• Know your audience!• Don’t forget about the basics

• From name• Subject line• Landing pages

• Quick wins:• Bigger text• Touch targets (big buttons)• Streamline content

• Explore different approaches; find what works best• Responsive design isn’t a silver bullet

• Justine Jordan• Marketing Director, Litmus• justine@litmus.com• @meladorri

• Janelle Johnson• Director, DemandGen, Act-On Software• janelle.johnson@act-on.net• @janelle_johnson

Mobile-friendly email: Trends and best practices

Technology