![Page 1: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/1.jpg)
E-mail • Direct Mail • Digital Marketing • Sales ToolsFunding Data • Creative Services
Mobile email: Strategies and how-tos
for the small screen
![Page 2: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/2.jpg)
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.
![Page 3: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/3.jpg)
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
![Page 4: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/4.jpg)
Got screens?
![Page 5: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/5.jpg)
Mobile Email: WhyMobile is big, but how big?
![Page 6: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/6.jpg)
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
![Page 7: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/7.jpg)
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%
![Page 8: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/8.jpg)
Know Your Audience
Copy, paste& send
![Page 9: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/9.jpg)
some of our major retail brands are seeing 60% of their subscribers
viewing on a mobile device
“
—Cara Olson, Digital Evolution Group
”
![Page 10: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/10.jpg)
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
![Page 11: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/11.jpg)
The unifying characteristic?
TOUCH.
![Page 12: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/12.jpg)
Experience MattersIt’s more than just metrics
![Page 13: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/13.jpg)
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?
![Page 14: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/14.jpg)
Mobile Triage Myth
3% reopen on another
client
97% view in a single
environment
![Page 15: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/15.jpg)
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
![Page 16: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/16.jpg)
Focus on ‘from name’ and subject line
![Page 17: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/17.jpg)
Focus on ‘from name’ and subject line
From Name~25 characters
Subject Line ~35 characters
Preheader~85 characters
17
![Page 18: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/18.jpg)
Preheaders = tertiary inbox content
![Page 19: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/19.jpg)
Preheaders = tertiary inbox content
![Page 20: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/20.jpg)
iPhone Windows Phone
Blackberry
![Page 21: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/21.jpg)
iPhone:Scales to width;
320 x 460
Android:No scaling; dimensions
vary;top-left corner
displayed
Inconsistent rendering across devices and operating systems
![Page 22: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/22.jpg)
22
Provide click/tap opportunities
What makes the email on the left different?
![Page 23: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/23.jpg)
NO:crowded grids
NO:impossible form fields
![Page 24: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/24.jpg)
24
YES:easy to navigate
YES:finger friendly
![Page 25: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/25.jpg)
Strategies & ApproachesHow to tackle mobile email
![Page 26: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/26.jpg)
As with most things with email, there’s not a one-size-fits-all approach
(sorry to disappoint you)
![Page 27: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/27.jpg)
Mobile First
Considers the mobile user as a priority
|-------------------460px -------------------|
|---------------------600px ---------------------|
![Page 28: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/28.jpg)
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
![Page 29: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/29.jpg)
Fluid
Email width changes to fit within the window
|--------------------------------------------------------1166px---------------------------------------------------|
|-----------------------------525px --------------------------|
![Page 30: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/30.jpg)
Fluid layout
• Percentage-based widths
• Adapts to fill the screen it’s viewed on; text wraps automatically
![Page 31: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/31.jpg)
ResponsiveDesign
Uses media queries to detect screen size and alter content accordingly
|-----------320px ------------||---------------------------------------600px------------------------------------------|
![Page 32: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/32.jpg)
![Page 33: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/33.jpg)
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
![Page 34: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/34.jpg)
Taking ActionTry to avoid analysis paralysis
![Page 35: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/35.jpg)
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
![Page 36: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/36.jpg)
Email is an *application*
![Page 37: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/37.jpg)
Email is an *application*
Device ≠ email client
![Page 38: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/38.jpg)
Plan on data, not your gut
Your audience is the most important one
Brand/Industry A: 55% Brand/Industry B: 18%
![Page 39: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/39.jpg)
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
![Page 40: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/40.jpg)
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
![Page 41: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/41.jpg)
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”
![Page 42: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/42.jpg)
Windows Phone Observations
• Mixed media query support• Does weird things to fonts• Blocks images; no ALT text• No one has them!
![Page 43: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/43.jpg)
iPhone Observations
• Automatically scales messages to fit the screen
• Excellent support for CSS3 and media queries
• Images on by default• Resizes fonts under 13px
![Page 44: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/44.jpg)
Mobile Email Design Principles“Best practices,” if you will…
![Page 45: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/45.jpg)
Preheader tips
• Support the subject line with a creative, useful or helpful preheader.– Call-to-action– Special offer– Reminder– Clickable/measurable– NOT “having trouble…?”
![Page 46: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/46.jpg)
Bigger is Better
• Body copy: 16px+• Headlines: 22px+
– Or else face auto-resizing
• Buttons: 44px by 44px• Space: 10px+
![Page 47: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/47.jpg)
![Page 48: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/48.jpg)
Dial up the contrast
Bright screens kill batteries
![Page 49: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/49.jpg)
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.
![Page 50: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/50.jpg)
• 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.
![Page 51: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/51.jpg)
Test, test, test!
![Page 52: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/52.jpg)
![Page 53: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/53.jpg)
Mobile email testing with Litmus
![Page 54: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/54.jpg)
ResultsTest and share for the common good!
![Page 55: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/55.jpg)
• 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
![Page 56: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/56.jpg)
ResourcesInfo + tools
![Page 57: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/57.jpg)
![Page 58: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/58.jpg)
Market Share Stats
http://emailclientmarketshare.com
![Page 59: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/59.jpg)
Antwort: Responsive Layouts for Email
http://internations.github.io/antwort/
![Page 60: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/60.jpg)
Zurb: Responsive
Email Templateshttp://www.zurb.com/
article/1119/create-emails-for-any-device-introducing-
*not compatible with Outlook 2007+
![Page 61: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/61.jpg)
Responsive Email Tutorial
http://www.netmagazine.com/tutorials/build-responsive-emails
![Page 62: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/62.jpg)
Campaign Monitor
RED Guidehttp://www.campaignmonitor.com/
guides/mobile/
![Page 63: Mobile email: strategies and how-tos for the small screen](https://reader038.vdocuments.us/reader038/viewer/2022110318/55d4f454bb61ebe66b8b472a/html5/thumbnails/63.jpg)
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