mobile email and newsletters - relaunching your email products on mobile
DESCRIPTION
Why mobile matters for email, how to make existing emails look better on mobile, and how to design responsive mobile-first templates. (From industrydive.com)TRANSCRIPT
Relaunching on Mobile: Email and Newsletters
Eli DickinsonIndustry Dive
Eli Dickinson / Industry Dive / Twitter: @esd
About Industry DiveA mobile focused B2B media start-up based in Washington, DC
The only B2B company with 100% of its products designed
for mobile first
Eli Dickinson / Industry Dive / Twitter: @esd
Why Mobile?
Eli Dickinson / Industry Dive / Twitter: @esd
State of Mobile EmailMobile isn’t the future… it’s already here
• About half of all emails are read on a mobile device• Exact numbers vary based on audience and email type
Eli Dickinson / Industry Dive / Twitter: @esd
State of Mobile EmailTop 10 Email Clients – September 2013
• iPhone is the number one global email client.
Eli Dickinson / Industry Dive / Twitter: @esd
State of Mobile Email
"If you're an email marketer and not thinking about mobile, you may not be an email marketer for much longer."
- Bryson Meunier for Marketing LandChart from BlueHornet Email Marketing Report
Eli Dickinson / Industry Dive / Twitter: @esd
Options
1. Do nothing
2. Iterate on existing products
3. Relaunch with mobile-first responsive template
Eli Dickinson / Industry Dive / Twitter: @esd
First Step: Know Your Audience
• Talk to publishers, writers, editors, readers, sales team
• 31% of marketers don’t know how many people open their message on mobile devices
• Know and understand your email analytics
Know Your AudienceHere’s our data…
Eli Dickinson / Industry Dive / Twitter: @esd
• Some variation by industry.
• B2B generally lags B2C in mobile adoption
• But mobile is huge across the board.Industry Dive
email opens statistics
Eli Dickinson / Industry Dive / Twitter: @esd
Know Your AudienceHere’s our data…
• iPhone is huge
• Outlook really important
• Android only 5%
Eli Dickinson / Industry Dive / Twitter: @esd
Improving Existing Email Templates
• Design for a smaller screen– Get to the point faster. KISS– Use larger fonts– Slim down your fixed-width
emails. (Ideally under 550 pixels)
Eli Dickinson / Industry Dive / Twitter: @esd
Improving Existing Email Templates
• Design for fingers– Call to action should be large,
clear, and tappable– Avoid nav bars and links
grouped closely together
Eli Dickinson / Industry Dive / Twitter: @esd
Improving Existing Email Templates
• Technical “tricks” to improve mobile rendering.– Prevent partial downloads on iPhone– Stop autolinking of phone numbers and addresses
Eli Dickinson / Industry Dive / Twitter: @esd
Improving Existing TemplatesLet’s walk through an example
Looks fine in GMail
Eli Dickinson / Industry Dive / Twitter: @esd
Improving Existing TemplatesLet’s walk through an example
Not so great on iPhone
Eli Dickinson / Industry Dive / Twitter: @esd
Improving Existing TemplatesLet’s walk through an example
Simple changes to make it better:• Make large header image adaptive
so it scales to match screen size.• Increase base font size.• Larger and stronger call to action.• Cut text – get to the point faster.
Eli Dickinson / Industry Dive / Twitter: @esd
Improving Existing TemplatesLet’s walk through an example
Before
After
Eli Dickinson / Industry Dive / Twitter: @esd
Options
1. Do nothing
2. Iterate on existing products
3. Relaunch with mobile-first responsive template
Eli Dickinson / Industry Dive / Twitter: @esd
Responsive Email Design
• You still send the same message to everyone.
• Code within the email adjusts message styling based on the device viewing it.
• Can change fonts, images, or even hide certain elements.
What does it mean?
Eli Dickinson / Industry Dive / Twitter: @esd
Responsive Email Design
• These two screenshots are the same message viewed at different widths.
• Multi-column elements collapse to a single column on mobile
What does it mean?
Responsive Email Design
Eli Dickinson / Industry Dive / Twitter: @esd
Outlook 2013 iPhone 5
How it works:• Responsive containers and images
scale up or down automatically.• CSS media queries can be used to
specifically target design rules to certain devices.
• Outlook conditional comments can also be used to target content and styling specifically to desktop clients.
• Not all techniques supported on all devices.
The above responsive template is available in Modern HTML Email
Eli Dickinson / Industry Dive / Twitter: @esd
Responsive/Mobile Email Design ResourcesGive this slide to your designer
• Buy a copy of Modern HTML Email by Jason Rodriguez• Sign up with Litmus (or similar) email testing service• Check out Antwort, an open source responsive newsletter template.
Demonstrates some very advanced techniques.• Having trouble with Outlook? Google “conditional comments.”• Campaign Monitor’s guide to responsive email:
http://www.campaignmonitor.com/guides/mobile/• Litmus “inspiration” blog posts:
https://litmus.com/blog/category/inspiration • MailChimp template library:
http://templates.mailchimp.com/design/mobile-friendliness • Industry Dive blog
http://www.industrydive.com/blog/
Eli Dickinson / Industry Dive / Twitter: @esd
Think Beyond the InboxEmail is only one component of your media product
• Starts “zoomed out” with tiny text
• Way too many required fields• Too much text
Eli Dickinson / Industry Dive / Twitter: @esd
Think Beyond the InboxEmail is only one component of your media product
• Responsive landing page that looks nice on all size screens
• Fewer form fields• Option to fill out the form later
from desktop.
Eli DickinsonCo-Founder, Industry Dive
I promise to answer all tweets to @esd