strategies, tactics and design tips for mobile email success
TRANSCRIPT
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