NEDMA15: How to Optimize Email for all Inboxes in a Mobile World - Justine Jordan
-
Upload
new-england-direct-marketing-association -
Category
Marketing
-
view
100 -
download
1
Transcript of NEDMA15: How to Optimize Email for all Inboxes in a Mobile World - Justine Jordan
@meladorri @litmusapp
80% of subscribers delete emails
that look bad on their phones…
…and 30% unsubscribe
source: BlueHornet
@meladorri @litmusapp
31% of marketers don’t know their
mobile email open rate
source: marketingsherpa.com
@meladorri @litmusapp
HTML
CSS
Images
Text
Design
Links
Web
HTML
CSS
Images
Text
Design
Links
✔ ✔ ✔ ✔ ✔ ✔ ✔
Email and web are the same
@meladorri @litmusapp
Web
<div>
<h1>
<p>
em
<style>
background-color
margin
<table>
<td>
<td>
px
style=“font-face”
bgcolor
padding
… just kidding
@meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
Email user flow Subscriber experience
@meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
55
From name ~25 characters 25% of the inbox Subject line ~35 characters 25% of the inbox Preview text ~85 characters 50% of the inbox
@meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
56
TAP, NOT CLICK!
@meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
59
FOLLOW THROUGH!
@meladorri @litmusapp
Considers the mobile user a priority
• One layout for all screen sizes
• 320-500px
• Large text & buttons
• Generous white space
• Clear calls to action
• Short, concise body copy
@meladorri @litmusapp
Email width changes to fit within the window it’s viewed in
Percentage-based
widths adapts to fit
the screen; text wraps
automatically
@meladorri @litmusapp
• Resize content: make images fit,
make text larger
• Hide content on mobile
• Stack columns
• Move a two-column design to a
one-column design
• Learning curve; but plenty of
pre-tested templates exist
• Mixed support for media queries
across mobile
https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
@meladorri @litmusapp
• More than a “line of code”
• Set of conditional statements 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
@meladorri @litmusapp
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
@meladorri @litmusapp
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?”
@meladorri @litmusapp
• Automatically scales to fit
• Responsive design support
• Images on by default
• Resizes fonts under 13px
iPhone Mail app
@meladorri @litmusapp
• Enlarges fonts in a ‘modified view’
• No responsive design support
• Mail sorted into tabs that mirrors
desktop/browser experience
• Images on automatically
Gmail app
@meladorri @litmusapp
• No responsive design support
• Displays a sender icon/image in the
inbox—sometimes
• Emails bundled into categories
• Images on automatically
Inbox by Gmail
@meladorri @litmusapp
• Samsung Hell
• Support for ALT text
• Various screen sizes, OS and app
versions
• Mixed support for media queries
• Some auto-scale, some do not
Android Gmail
@meladorri @litmusapp
• Sometimes responsive works
• Inconsistent font display
• Blocks images
• No ALT text
Windows Phone
@meladorri @litmusapp
• Support for responsive design
• Blocks images; supports ALT text
• Does not scale/auto-zoom
• No separate app; email joins social,
SMS and voice in the “hub”
BlackBerry
@meladorri @litmusapp
Defensive design: Image Blocking
Guide to styled ALT text >> bit.ly/styledALT
Guide to image blocking >> bit.ly/image-block !