3 Strategies for Awesome
Mobile-Optimized Emails
January 30th 2014
Who Am I?

Justine Jordan
Marketing Director, Litmus
Join us on Twi er

@meladorri @litmusapp
#KISSwebinar
We’ll cover…

1

The crazy growth of mobile

2

Knowing your audience

3

Your subscribers on mobile

4

Strategies + best...
Got Screens?
image credit: helpmyhelpdesk.com
Mobile is big, but how big?

Mobile:
Smartphones (iPhone, Android)
and tablets

Webmail
20%

!

Mobile
Desktop

51%

29%

...
Looking back to 2011…
Desktop

Mobile

Webmail

50%

60

45

30

13
20
Q

4

01
3
32

22
Q

Q

01
3

3
Q

12

01

12
20
4
...
mobile opens have increased

400%
since 2011

#KISSwebinar
Top Email Clients
!

#1 – iPhone
#2 – Outlook
#3 – Android
#4 – iPad
source: emailclientmarketshare.com
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.

If you get a mobile email that
doesn’t look good, what do you do?
+15%

Delete ...
You get ONE chance to make an impression.

How does

Strongly Negative

Neutral

24%

25%

a poorly
designed email
affect y...
Mobile Triage Myth

3%
reopen on
another
client

97%
view in a single
environment
The mobile email experience

From Name
Subject Line
Preheader
Preview/Open
Tap
Page/Site
???
#KISSwebinar
From and subject are front and center
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
From and subject are front and center
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

➡ Large and ...
From and subject are front and center
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
From and subject are front and center
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???

➡ Secon...
Preheader = tertiary inbox content
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
Good vs. bad preheaders
From Name

✘
✘

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

✔
✔
✔

???
Each phone and app is different
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
But be aware of the viewport
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

Long subject lines
pu...
#EmbraceTheScroll
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???
#EmbraceTheScroll
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

Scrolling is a continuation.
Cli...
I like big bu ons…
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???

#KISSwebinar
Reduce friction
Don’t forget the landing page
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

???

Page/Site

NO:
interstitia...
Don’t forget the landing page
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???

YES:
Easy to us...
Consider the conversion path
From Name

Subject Line

Preheader

Preview/Open

Tap/Click

Page/Site

???

➡ What is your g...
strategy #1

mobile first
!
aka agnostic, aware, scalable
Strategy #1: Mobile first

Considers the mobile user a priority
➡ One layout for all screen sizes
➡ Single column design
• ...
Strategy #1: Mobile first
strategy #2

fluid
Strategy #2: Fluid

Email width 

changes to fit 

within the window 

it’s viewed in

!

➡ Percentage-based widths
➡ Adapt...
Strategy #2: Fluid

!

➡ Shorter learning curve
➡ Best for text-heavy emails
strategy #3

responsive
Strategy #3: Responsive
Strategy #3: Responsive

➡ Resize content: make
images fit, make text
larger
➡ Hide content on mobile
➡Stack columns
➡ move...
Strategy #3: Responsive

Uses media queries to detect screen size and alter
content accordingly
➡ More than a “line of cod...
Responsive emails in Outlook

<table class="fullWidth" width=“620">!
!
<tr>!
!
!
<td>!
!
!
!
<table width="50%" align=“lef...
Media queries aren’t bulletproof

iPhone'native'

yes'

Yahoo!'mobile'apps'

no'

iPad'native'

yes'

Windows'Mobile'7'

n...
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 be er

➡ Body copy: 16px+
➡ Headlines: 22px+
➡ Bu ons: 44px by 44px
➡ Space: 10px+
➡ Tappable touch targets

#KI...
Beware small font sizes

-webkit-text-size-adjust: none;

#KISSwebinar
Dial up the contrast

Bright screen = dead battery
Ditch the ‘mobile version’

Why the extra click?

email

mobile version

web site
What to know about: iPhone

➡ 26% market share
➡ Automatically scales messages 

to fit the screen
➡ Excellent support for ...
What to know about: BlackBerry

➡ 0.1% market share
➡ Media query support
➡ Blocks images
➡ Supports styled ALT text
➡ Doe...
What to know about: Android

➡ 12% market share
➡ Blocks images by default
➡ Supports ALT text
➡ Mixed support for media q...
What to know about: Android
What to know about: Windows Phone

➡ 0.17% market share
➡Mixed media query support
➡ Inconsistent font display
➡ Blocks im...
Device ≠ email client
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 is crucial

#KISSwebinar
Testing is crucial

#KISSwebinar
Resources!

lit.ms/KISSresources
www.responsiveemailresources.com
14-DAY TRIAL

KISSMOBILE
LITMUS.COM/GIFTCARD
-TAKEAWAYS -

1

Know your audience

2

Design for ‘one thumb’ and 

‘one eyeball’

3

Tap your way to success

4

Renderi...
Questions?
I (may) have answers.
Thanks!

Thanks!
justine@litmus.com / @meladorri
Upcoming SlideShare
Loading in …5
×

3 Strategies for Awesome Mobile-Optimized Emails

5,394 views

Published on

In a world where 50% of emails are opened on a mobile device and 80% of consumers delete emails that look bad on smartphones, it’s crucial to account for fat fingers and small screens. While responsive email can close the gap, it’s not a silver bullet.

This presentation covers:
-How to find out who is opening your emails on mobile
-Implications of various screen sizes and operating systems
-Common pitfalls, easy wins and the secret to getting responsive email working in email clients such as Outlook

Presented on Thursday, January 30th, 2014

Published in: Marketing, Technology

3 Strategies for Awesome Mobile-Optimized Emails

  1. 1. 3 Strategies for Awesome Mobile-Optimized Emails January 30th 2014
  2. 2. Who Am I? Justine Jordan Marketing Director, Litmus
  3. 3. Join us on Twi er @meladorri @litmusapp #KISSwebinar
  4. 4. We’ll cover… 1 The crazy growth of mobile 2 Knowing your audience 3 Your subscribers on mobile 4 Strategies + best practices 5 Examples! #KISSwebinar
  5. 5. Got Screens? image credit: helpmyhelpdesk.com
  6. 6. Mobile is big, but how big? Mobile: Smartphones (iPhone, Android) and tablets Webmail 20% ! Mobile Desktop 51% 29% Desktop: Installed email programs (Outlook, Apple Mail) ! Webmail: Email accessed through a web browser (Gmail, Hotmail, Yahoo!) Source: Litmus Email Analytics #KISSwebinar
  7. 7. Looking back to 2011… Desktop Mobile Webmail 50% 60 45 30 13 20 Q 4 01 3 32 22 Q Q 01 3 3 Q 12 01 12 20 4 Q 01 2 32 Q Q 22 2 Q 12 01 11 20 4 Q 32 Q 22 Q Q 12 01 1 01 1 10% 01 1 15 01 2 33% Source: Litmus Email Analytics #KISSwebinar
  8. 8. mobile opens have increased 400% since 2011 #KISSwebinar
  9. 9. Top Email Clients ! #1 – iPhone #2 – Outlook #3 – Android #4 – iPad source: emailclientmarketshare.com
  10. 10. There’s a few options out there… Small Medium Large
  11. 11. The unifying characteristic?
 TOUCH.
  12. 12. 31% of marketers don’t know their mobile email open rate source: marketingsherpa.com
  13. 13. Your mileage may vary MapMyRun = 70%+ Litmus = 15% #KISSwebinar
  14. 14. It’s as easy as 1, 2, 3… Copy, paste, send!
  15. 15. You get ONE chance to make an impression. If you get a mobile email that doesn’t look good, what do you do? +15% Delete it +68% Unsubscribe 80.3% 30.2% 13.5% View on computer 3.8% Don't know 10% 6.3% Read anyway 0 25 50 75 Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013 100
  16. 16. You get ONE chance to make an impression. How does Strongly Negative Neutral 24% 25% a poorly designed email affect your perception 75% ‘negative’ of the brand? Slightly Negative 51% Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
  17. 17. Mobile Triage Myth 3% reopen on another client 97% view in a single environment
  18. 18. The mobile email experience From Name Subject Line Preheader Preview/Open Tap Page/Site ??? #KISSwebinar
  19. 19. From and subject are front and center From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  20. 20. From and subject are front and center From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ➡ Large and bold = 
 top hierarchy in 
 the mobile inbox ➡ Cuts off a er ~25 characters ???
  21. 21. From and subject are front and center From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  22. 22. From and subject are front and center From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ??? ➡ Second in the hierarchy ➡ Android wraps to the next line ➡ iPhone cuts off at ~35 characters
  23. 23. Preheader = tertiary inbox content From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  24. 24. Good vs. bad preheaders From Name ✘ ✘ Subject Line Preheader Preview/Open Tap/Click Page/Site ✔ ✔ ✔ ???
  25. 25. Each phone and app is different From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  26. 26. But be aware of the viewport From Name Subject Line Preheader Preview/Open Tap/Click Page/Site Long subject lines push content down in the viewport ???
  27. 27. #EmbraceTheScroll From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ???
  28. 28. #EmbraceTheScroll From Name Subject Line Preheader Preview/Open Tap/Click Page/Site Scrolling is a continuation. Clicking is a decision. ! Hundreds or thousands of decisions taken together add up to real friction. @bokardo ???
  29. 29. I like big bu ons… From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ??? #KISSwebinar
  30. 30. Reduce friction
  31. 31. Don’t forget the landing page From Name Subject Line Preheader Preview/Open Tap/Click ??? Page/Site NO: interstitials horrible forms Flash #KISSwebinar
  32. 32. Don’t forget the landing page From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ??? YES: Easy to use Finger friendly #KISSwebinar
  33. 33. Consider the conversion path From Name Subject Line Preheader Preview/Open Tap/Click Page/Site ??? ➡ What is your goal? ➡ Can the CTA be achieved on mobile? ➡ Is it tappable? ➡ How many clicks/taps/actions are required? ➡ Is the landing page optimized? Should it be? #KISSwebinar
  34. 34. strategy #1 mobile first ! aka agnostic, aware, scalable
  35. 35. 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
  36. 36. Strategy #1: Mobile first
  37. 37. strategy #2 fluid
  38. 38. 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
  39. 39. Strategy #2: Fluid ! ➡ Shorter learning curve ➡ Best for text-heavy emails
  40. 40. strategy #3 responsive
  41. 41. Strategy #3: Responsive
  42. 42. 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
  43. 43. Strategy #3: Responsive Uses media queries to detect screen size and alter content accordingly ➡ 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
  44. 44. Responsive emails in Outlook <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> ➡ Use tables and 
 the “align” property ➡ Don’t rely on floats Remember: media queries aren’t intended to be viewed on a desktop— they’re intended for a smartphone or tablet.
  45. 45. Media queries aren’t bulletproof iPhone'native' yes' Yahoo!'mobile'apps' no' iPad'native' yes' Windows'Mobile'7' no' Android'2.1'native' no' Windows'Mobile'7.5' yes' Android'2.2'native' yes' Windows'Mobile'8' no' Android'2.3'native' yes' BlackBerry'OS'6' yes' Android'4.x'native' yes' BlackBerry'OS'7' yes' Gmail'mobile'apps' no' BlackBerry'Z10' yes' Mailbox'iOS'app' yes' Kindle'Fire'native' yes' h p://stylecampaign.com/blog/2012/10/responsive-email-support/
  46. 46. Email is a unique medium with unique considerations
  47. 47. Click is now tap The finger is the new mouse
  48. 48. Your fingers are fat image: webdesignerdepot.com
  49. 49. Bigger is be er ➡ Body copy: 16px+ ➡ Headlines: 22px+ ➡ Bu ons: 44px by 44px ➡ Space: 10px+ ➡ Tappable touch targets #KISSwebinar
  50. 50. Beware small font sizes -webkit-text-size-adjust: none; #KISSwebinar
  51. 51. Dial up the contrast Bright screen = dead battery
  52. 52. Ditch the ‘mobile version’ Why the extra click? email mobile version web site
  53. 53. 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 #KISSwebinar
  54. 54. 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” #KISSwebinar
  55. 55. 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 #KISSwebinar
  56. 56. What to know about: Android
  57. 57. What to know about: Windows Phone ➡ 0.17% market share ➡Mixed media query support ➡ Inconsistent font display ➡ Blocks images ➡ No ALT text #KISSwebinar
  58. 58. Device ≠ email client
  59. 59. Device ≠ email client Email is an application and occasionally a mobile browser
  60. 60. Wide variety of ways to access email Rendering is inconsistent across devices and operating systems
  61. 61. Testing is crucial #KISSwebinar
  62. 62. Testing is crucial #KISSwebinar
  63. 63. Resources! lit.ms/KISSresources www.responsiveemailresources.com
  64. 64. 14-DAY TRIAL KISSMOBILE LITMUS.COM/GIFTCARD
  65. 65. -TAKEAWAYS - 1 Know your audience 2 Design for ‘one thumb’ and 
 ‘one eyeball’ 3 Tap your way to success 4 Rendering is tied to app, not device
  66. 66. Questions? I (may) have answers.
  67. 67. Thanks! Thanks! justine@litmus.com / @meladorri

×