email design: how to optimize for all environments …...email design: how to optimize for all...
TRANSCRIPT
![Page 1: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/1.jpg)
Email Design: How to optimize for all environments in a mobile worldJustine Jordan, Marketing Director, Litmus
![Page 2: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/2.jpg)
Session Speaker
Justine JordanMarketing DirectorLitmus
I’m an email builder, designer, marketer, teacher and all-around opinionated person. Approaching eight years in email!
@meladorri
![Page 3: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/3.jpg)
• How can you create mobile-friendly emails?• Best practices, examples and tips
![Page 4: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/4.jpg)
Got screens?image credit: helpmyhelpdesk.com
![Page 5: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/5.jpg)
Mobile is big, but how big?
Mobile: Smartphones (iPhone, Android) and tablets
Desktop:Installed email programs (Outlook, Apple Mail)
Webmail:Email accessed through a Web browser (Gmail, Hotmail, Yahoo)
24%Webmail
49%Mobile27%
Desktop
Source: Litmus Email Analytics; 306 million worldwide opens
![Page 6: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/6.jpg)
Desktop, Webmail, Mobile: 2011 - Now
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
Q1 2011
Q2 2011
Q3 2011
Q4 2011
Q1 2012
Q2 2012
Q3 2012
Q4 2012
Q1 2013
Q2 2013
Q3 2013
Q4 2013
Desktop
Webmail
Mobile
Source: Litmus Email Analytics
![Page 7: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/7.jpg)
Desktop, Webmail, Mobile: 2011 - Now
0%
10%
20%
30%
40%
50%
60%
70%
Desktop
Webmail
Mobile
10%
33%
50%
Source: Litmus Email Analytics
![Page 8: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/8.jpg)
Top email clients
#1 iPhone 24%
#2 Outlook 13%
#3 iPad 12%
#4 Android 12%
source: emailclientmarketshare.com
![Page 9: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/9.jpg)
Top email clients
source: emailclientmarketshare.com
#1 iPhone 24%
#2 Outlook 13%
#3 iPad 12%
#4 Android 12%
![Page 10: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/10.jpg)
Screensize-apalooza
Small Medium Large
iPhone2.3” wide
Galaxy Note3.2” wide
Nexus 77.3” wide
BlackBerry2.6” wide
iPad Mini5.3” wide
Excite 138.5” wide
![Page 11: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/11.jpg)
The unifying characteristic?
TOUCH.
![Page 12: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/12.jpg)
Experience matters.It’s more than just metrics.
![Page 13: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/13.jpg)
One chance to make an impressionHow 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?
BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
80.30%
30.20%
13.50%
3.80%
6.30%
Delete it
Unsubscribe
View on computer
Don't know
Read anyway
+68%
+15% 75%negative
Slightly Negative
51%
Strongly Negative24%
Neutral25%
![Page 14: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/14.jpg)
The mobile experience is different than the desktop experience
Conversion
Page
Tap
Open
Preheader
Subject Line
From Name
The Subscriber Experience
![Page 15: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/15.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
![Page 16: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/16.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
![Page 17: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/17.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
![Page 18: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/18.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
✘ ✔
✘ ✔
✔
![Page 19: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/19.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
iPhone:Scales to width;
320 x 460
Android:Dimensions vary;scaling in some apps; top-left
corner displayed
![Page 20: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/20.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
Scrolling is easier than clicking.
Scrolling is a continuation.Clicking is a decision.
Hundreds or thousands of decisions taken together add up to real friction.
@bokardo
![Page 21: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/21.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
The finger is the new mouse.
“Click” is now “tap”
Image: webdesignerdepot.com
![Page 22: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/22.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
Is the conversion path optimized for mobile?
Is the landing page tappable?
![Page 23: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/23.jpg)
From Name
Subject Line Preheader Open Tap Page Conversion
Is the conversion path optimized for mobile?
Is the landing page tappable?
![Page 24: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/24.jpg)
Making Touch-Friendly EmailsPrinciples and best practices
![Page 25: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/25.jpg)
Bigger is better
• Body copy: 16px+• Headlines: 22px+• Buttons: 44px by 44px• Space: 10px+• Tappable touch targets
![Page 26: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/26.jpg)
Less is more
• Analyze each section of your email and messaging
• Prioritize goals and actions• Look at historical performance
for clues on what to cut• Aim for 2 to 4 sentences at 16px
![Page 27: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/27.jpg)
Increase Contrast
Bright screens kill batteries
![Page 28: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/28.jpg)
Responsive Design / Media Queries
• 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 29: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/29.jpg)
BlackBerry: What to know
• 0.097% market share• Media query support• Blocks images; supports styled ALT text• Does not scale or auto-zoom• No separate app; email joins social, SMS
and voice in the “hub”
![Page 30: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/30.jpg)
Windows Phone: What to know
• 0.163% market share• Mixed media query support• Inconsistent font display• Blocks images
– CTAs require 2 clicks for image-based emails
• No ALT text
![Page 31: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/31.jpg)
Android: What to know
• 12% market share• Supports ALT text• Various screen sizes, OS versions and app versions• Mixed support for media queries• Some auto-scale, some do not• Image blocking sometimes a factor• Primary content focus on left-hand side
![Page 32: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/32.jpg)
iPhone: What to know• 24% market share• Automatically scales messages to fit the screen• Excellent support for CSS3 and media queries• Images on by default• Auto-links addresses, dates, phone numbers• Resizes fonts under 13px
![Page 33: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/33.jpg)
Device ≠ email client
Email is an application
![Page 34: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/34.jpg)
Inspiration and ExamplesMobile-friendly emails in the wild
![Page 35: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/35.jpg)
Example 1
![Page 36: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/36.jpg)
Example 1
![Page 37: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/37.jpg)
![Page 38: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/38.jpg)
Responsive Version:24% boost in CTR
![Page 39: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/39.jpg)
![Page 40: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/40.jpg)
Mobile open rates on the rise
![Page 41: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/41.jpg)
![Page 42: Email Design: How to optimize for all environments …...Email Design: How to optimize for all environments in a mobile world Justine Jordan, Marketing Director, Litmus Session Speaker](https://reader034.vdocument.in/reader034/viewer/2022050203/5f57048ba8600420a36bdc5c/html5/thumbnails/42.jpg)
First responsive email = highest traffic ever!Mobile traffic exceeded previous week