1 The crazy growth of mobile, 2 Knowing your audience, 3 Your subscribers on mobile, 4 Strategies
Mobile is big, but how big?
Looking back to 2011…
mobile opens have increased 400% since 2011 #KISSwebinar
Top Email Clients! #1 – iPhone #2 – Outlook #3 – Android #4
There’s a few options out there… Small Medium Large
The unifying characteristic? TOUCH.
31% of marketers don’t know their mobile email open rate source: marketingsherpa.com
Your mileage may vary MapMyRun = 70%+ Litmus = 15% #KISSwebinar
It’s as easy as 1, 2, 3… Copy, paste, send!
You get ONE chance to make an impression.
Mobile Triage Myth 3% reopen on another client 97% view in a single environment
The mobile email experience
From and subject are front and center
Preheader = tertiary inbox content
Good vs. bad preheaders
Each phone and app is different
But be aware of the viewport
#EmbraceTheScroll
I like big buttons…
Reduce friction
Don’t forget the landing page
Consider the conversion path
Strategy #1: Mobile first Considers the mobile user a priority
Strategy #2: Fluid Email width changes to fit within the window it’s viewed in !
Strategy #3: Responsive Uses media queries to detect screen size and alter content accordingly
Responsive emails in Outlook
Media queries aren’t bulletproof
Email is a unique medium with unique considerations
Click is now tap The finger is the new mouse
Your fingers are fat image: webdesignerdepot.com
Bigger is better
Beware small font sizes
Dial up the contrast Bright screen = dead battery
Ditch the ‘mobile version’ Why the extra click?
What to know about: Android
What to know about: Windows Phone
Device ≠ email client Email is an application and occasionally a mobile browser
Wide variety of ways to access email Rendering is inconsistent across devices and operating systems
Testing
4. 1 The crazy growth of mobile
We’ll cover…
2 Knowing your audience
3 Your subscribers on mobile
#KISSwebinar
4 Strategies + best practices
5 Examples!
7. Mobile is big, but how big?
#KISSwebinar
Webmail
20%
Desktop
29%
Mobile
51%
Mobile:
Smartphones (iPhone, Android)
and tablets
!
Desktop:
Installed email programs
(Outlook, Apple Mail)
!
Webmail:
Email accessed through a web
browser (Gmail, Hotmail, Yahoo!)
Source: Litmus Email Analytics
16. You get ONE chance to make an impression.
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
10%
Delete it
Unsubscribe
View on computer
Don't know
Read anyway
0 25 50 75 100
If you get a mobile email that
doesn’t look good, what do you do?
80.3%
30.2%
13.5%
3.8%
6.3%
+68%
+15%
17. Strongly Negative
24%
Slightly Negative
51%
Neutral
25%
You get ONE chance to make an impression.
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
How does
a poorly
designed email
affect your
perception
of the brand?
75%
‘negative’
19. The mobile email experience
???
From Name
Subject Line
Preheader
Preview/Open
Tap
Page/Site
#KISSwebinar
20. From and subject are front and center
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
21. From and subject are front and center
???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
➡ Large and bold =
top hierarchy in
the mobile inbox
➡ Cuts off a er ~25
characters
37. Strategy #1: Mobile first
Considers the mobile user a priority
➡ One layout for all screen sizes
➡ Single column design
• 320-500px
➡ Large text & bu ons
➡ Generous white space
➡ Clear calls to action
➡ Short, concise body copy
40. Strategy #2: Fluid
Email width
changes to fit
within the window
it’s viewed in
!
➡ Percentage-based widths
➡ Adapts to fit the screen
➡ Text wraps automatically
44. Strategy #3: Responsive
➡ Resize content: make
images fit, make text
larger
➡ Hide content on mobile
➡Stack columns
➡ move a two-column
design to a one-column
design
h ps://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
45. Strategy #3: Responsive
➡ 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
Uses media queries to detect screen size and alter
content accordingly
46. Responsive emails in Outlook
➡ Use tables and
the “align” property
➡ Don’t rely on floats
<table class="fullWidth" width=“620">!
! <tr>!
! ! <td>!
! ! ! <table width="50%" align=“left”>!
! ! ! ! <tr>!
! ! ! ! ! <td>Left Column</td>!
! ! ! ! </tr>!
! ! ! </table>!
! ! ! <table width="50%" align=“right">!
! ! ! ! <tr>!
! ! ! ! ! <td>Right Column</td>!
! ! ! ! </tr>!
! ! ! </table>!
! ! </td> !
! </tr>!
</table>
Remember: media queries aren’t intended to be viewed on a desktop—
they’re intended for a smartphone or tablet.
55. What to know about: iPhone
➡ 26% market share
➡ Automatically scales messages
to fit the screen
➡ Excellent support for CSS3
and media queries
➡ Images on by default
➡ Resizes fonts under 13px
56. What to know about: BlackBerry
➡ 0.1% market share
➡ 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”
57. What to know about: Android
➡ 12% market share
➡ Blocks images by default
➡ Supports ALT text
➡ Mixed support for media queries
➡ Various screen sizes and
sometimes automatic scaling
➡ Primary content focus on le -
hand side