3 Strategies For Awesome Mobile-Optimized Emails
 

3 Strategies For Awesome Mobile-Optimized Emails

on

  • 9,920 views

1 The crazy growth of mobile, 2 Knowing your audience, 3 Your subscribers on mobile, 4 Strategies ...

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

Statistics

Views

Total Views
9,920
Views on SlideShare
8,571
Embed Views
1,349

Actions

Likes
50
Downloads
173
Comments
1

10 Embeds 1,349

http://www.lepetitgeek.com 1125
http://www.conseilsmarketing.com 167
https://twitter.com 22
http://www.paperblog.fr 18
http://www.google.com 9
http://laptopfacts.net 3
http://www.pinterest.com 2
http://admin.lemondeinformatique.fr 1
http://www.linkedin.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Confused with too many things to follow!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

3 Strategies For Awesome Mobile-Optimized Emails 3 Strategies For Awesome Mobile-Optimized Emails Presentation Transcript

  • 3 Strategies for Awesome Mobile-Optimized Emails January 30th 2014
  • Who Am I? Justine Jordan Marketing Director, Litmus
  • @meladorri @litmusapp #KISSwebinar Join us on Twi er
  • 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!
  • WATCH THIS WEBINAR RECORDING NOW
  • Got Screens? image credit: helpmyhelpdesk.com
  • 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
  • Looking back to 2011… #KISSwebinar Source: Litmus Email Analytics 15 30 45 60 Q 12011 Q 22011 Q 32011 Q 4 2011 Q 12012 Q 22012 Q 32012 Q 4 2012 Q 12013 Q 22013 Q 32013 Q 4 2013 Desktop Mobile Webmail 10% 50% 33%
  • 400% mobile opens have increased since 2011 #KISSwebinar
  • Top Email Clients ! #1 – iPhone #2 – Outlook #3 – Android #4 – iPad source: emailclientmarketshare.com
  • There’s a few options out there… LargeMediumSmall
  • The unifying characteristic?
 TOUCH.
  • 31% of marketers don’t know their mobile email open rate source: marketingsherpa.com
  • Your mileage may vary #KISSwebinar Litmus = 15%MapMyRun = 70%+
  • It’s as easy as 1, 2, 3… Copy, paste, send!
  • 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%
  • 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’
  • 3% reopen on another client 97% view in a single environment Mobile Triage Myth
  • The mobile email experience ??? From Name Subject Line Preheader Preview/Open Tap Page/Site #KISSwebinar
  • From and subject are front and center ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  • 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
  • ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name From and subject are front and center
  • ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name From and subject are front and center ➡ Second in the hierarchy ➡ Android wraps to the next line ➡ iPhone cuts off at ~35 characters
  • ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name Preheader = tertiary inbox content
  • Good vs. bad preheaders ✔ ✔ ✔ ✘ ✘ ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  • Each phone and app is different ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  • But be aware of the viewport ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name Long subject lines push content down in the viewport
  • #EmbraceTheScroll ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name
  • #EmbraceTheScroll ???Page/SiteTap/ClickPreview/OpenPreheaderSubject LineFrom Name Scrolling is a continuation. Clicking is a decision. ! Hundreds or thousands of decisions taken together add up to real friction. @bokardo
  • ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line I like big bu ons… From Name #KISSwebinar
  • Reduce friction
  • ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line Don’t forget the landing page From Name NO: interstitials horrible forms Flash
  • ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line Don’t forget the landing page From Name YES: Easy to use Finger friendly
  • ???Page/SiteTap/ClickPreview/OpenPreheaderSubject Line Consider the conversion path From Name ➡ 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?
  • LOG IN WITH GOOGLE Start Your Free KISSmetrics Trail
  • 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 • 320-500px ➡ Large text & bu ons ➡ Generous white space ➡ Clear calls to action ➡ Short, concise body copy
  • 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 ➡ Adapts to fit the screen ➡ Text wraps automatically
  • 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 a two-column design to a one-column design h ps://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
  • 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
  • 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.
  • Media queries aren’t bulletproof h p://stylecampaign.com/blog/2012/10/responsive-email-support/ 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' 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'
  • 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
  • Beware small font sizes -webkit-text-size-adjust: none;
  • Dial up the contrast Bright screen = dead battery
  • email mobile version web site Ditch the ‘mobile version’ Why the extra click?
  • 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
  • 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”
  • 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
  • What to know about: Android
  • What to know about: Windows Phone ➡ 0.17% market share ➡Mixed media query support ➡ Inconsistent font display ➡ Blocks images ➡ No ALT text
  • 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
  • 1 Know your audience 2 Design for ‘one thumb’ and 
 ‘one eyeball’ 3 Tap your way to success -TAKEAWAYS - 4 Rendering is tied to app, not device
  • Questions? I (may) have answers.
  • Thanks! Thanks! justine@litmus.com / @meladorri