Your standard metrics
The missing metrics
Don’t spend 90% of development time to satisfy 10% of users. Know your audience. Choose your battles. emailclientmarketshare.com
Mobile Email +500% since 2011
Looking back to 2011…
Mobile has seen crazy growth
Webmail Average Retailer 10% 30% 60% What does your data say?
Litmus 32% 57% 11% Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Desktop-Heavy Apple Mail Lotus Notes Thunderbird
Rendering in Outlook
Animated GIFs and Outlook 2007+ Outlook 2007+ shows the 1st frame Other programs
Be sure the first frame communicates your message (and isn’t blank)
We can easily target Microsoft Outlook… Outlook 2000-2003 Outlook 2007-2013 Outlook conditional statements lt = less than a specific version gt = greater than a specific version lte = less than or equal to a specific version gte = greater than or equal to a specific version
Outlook conditional statements
Apple Mail + Outlook for Mac Apple Mail and Outlook 2011 / 2016 use WebKit as a rendering engine. WebKit has amazing CSS support and enables progressive enhancement in email.
WebKit Targeting Media Query @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ }
WebKit supports HTML5 video in email (except for iOS 8)
Litmus 32% 57% 11% Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Webmail Gmail Yahoo AOL Outlook.com Office 365 Chrome, Firefox, Safari, Internet Explorer
Gmail Rendering
Gmail strips out all classes and id’s in CSS. This is the reason we need to inline all CSS for email.
Mobile Desktop Webmail Average Retailer 10% 30% 60% What does your data say? Mobile-Heavy iPhone Android Tablets Gmail mobile app Inbox by Gmail
iOS Rendering
Email apps for the iPhone and iPad use WebKit as a rendering engine. WebKit has amazing CSS support and enables progressive enhancement in email.
Mobile First Fluid Responsive 3 strategies for approaching mobile: 1 2 3
You can’t say “responsive email works on an iPhone.” When clients say “it looks like crap on my Android.” You should ask “what email app are you using
Device ≠ App support
25. We can easily target Microso Outlook…
#KISSwebinar
Outlook 2000-2003
Outlook 2007-2013
<!--[if (IE)]>
/* Insert HTML or CSS here */
<![endif]—>
<!—[if mso]>
/* Insert HTML or CSS here */
<![endif]—>
26. Outlook conditional statements
#KISSwebinar
lt = less than a specific version
gt = greater than a specific version
lte = less than or equal to a specific version
gte = greater than or equal to a specific version
31. Apple Mail + Outlook for Mac
#KISSwebinar
Apple Mail and Outlook 2011 / 2016 use
WebKit as a rendering engine.
WebKit has amazing CSS support and
enables progressive enhancement in email.
32. WebKit Targeting Media Query
#KISSwebinar
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Insert CSS here */
}
35. Gmail Rendering
#KISSwebinar
Gmail strips out all classes and id’s in
CSS. This is the reason we need to inline
all CSS for email.
https://putsmail.com/inliner
http://templates.mailchimp.com/resources/inline-css/
http://inliner.cm/
36. best case scenario: some lost forma ing
Gmail strips CSS from the <head> of emails
#KISSwebinar
37. worst case scenario: whoa
Gmail strips CSS from the <head> of emails
#KISSwebinar
39. Blue borders with <a> and <img>
#KISSwebinar
<a href="http://litmus.com"><img src="http://litmus.com/
image.jpg" width="450" height="216" border="0"></a>
42. iOS Rendering
#KISSwebinar
Email apps for the iPhone and iPad use
WebKit as a rendering engine.
WebKit has amazing CSS support and
enables progressive enhancement in email.
44. You can’t say “responsive
email works on an iPhone.”
When clients say “it looks
like crap on my Android.”
You should ask “what
email app are you using?”
#KISSwebinar
Device ≠ App support
45. Yahoo! (iOS + Android) yes
Mailbox (iOS) no
Gmail (iOS + Android) no
Inbox by Gmail (iOS + Android) no
BlackBerry Z10 yes
Windows Phone 7 no
Windows Phone 7.5 yes
Windows Phone 8 sometimes
#KISSwebinar
Media query support in mobile email apps
iPhone / iPad: Email app yes
Android 2.1: Email app no
Android 2.2: Email app yes
Android 2.3: Email app yes
Android 4.0, 4.1, 4.2: Email app yes
Android 4.3, 4.4: Email app sometimes
Kindle Fire yes
http://stylecampaign.com/blog/2012/10/responsive-email-support/
46. LOG IN WITH GOOGLE
Start Your Free KISSmetrics Trial
48. 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
51. 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 #KISSwebinar
55. 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
https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
56. 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
#KISSwebinar
61. Blue links on iOS
https://litmus.com/blog/update-banning-blue-links-on-ios-devices #KISSwebinar
62. #KISSwebinar
Impact of responsive email on click rates
https://litmus.com/blog/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing
63. Impact of responsive email on click rates
#KISSwebinar
Responsive design results in a
15% increase in unique clicks
for mobile users.
https://litmus.com/blog/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing
64. Open Click SRLs
Control Email 5.1% 5.0% 30
Responsive Email 4.4%% 11.5% 58
Difference -13.7% 130% 93.3%
Act-On Case Study
68. AOL yes
Gmail no
Outlook.com sometimes
Yahoo! yes
Mobile email apps sometimes
Apple Mail no
Lotus Notes yes
Outlook 2000-2003 yes
Outlook 2007/2010/2013 yes
Outlook for Mac yes
Thunderbird no
Does image blocking happen in…
https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking
69. Guide to styled ALT text: h p://bit.ly/styledALT
Guide to image blocking: h p://bit.ly/image-block
<img alt="Litmus" width="200"
height="50" style=“font-family: Arial;
color: #ffffff; font-size:20px"
border="0">
#KISSwebinar
Styled ALT text
83. WebKit Targeting Media Query
#KISSwebinar
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Insert CSS here */
}
h ps://litmus.com/blog/a-bulletproof-guide-to-using-html5-and-css3-in-email