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)
2. About Industry Dive
A 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
4. State of Mobile Email
Mobile 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
5. State of Mobile Email
Top 10 Email Clients – September 2013
• iPhone is the number one global email client.
Eli Dickinson / Industry Dive / Twitter: @esd
6. 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 Land
Chart from BlueHornet Email Marketing Report
Eli Dickinson / Industry Dive / Twitter: @esd
7. Options
1. Do nothing
2. Iterate on existing products
3. Relaunch with mobile-first responsive template
Eli Dickinson / Industry Dive / Twitter: @esd
8. 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
Eli Dickinson / Industry Dive / Twitter: @esd
9. Know Your Audience
Here’s our data…
• Some variation by
industry.
• B2B generally lags B2C
in mobile adoption
Industry Dive
email opens statistics
• But mobile is huge
across the board.
Eli Dickinson / Industry Dive / Twitter: @esd
10. Know Your Audience
Here’s our data…
• iPhone is huge
• Outlook really
important
• Android only 5%
Eli Dickinson / Industry Dive / Twitter: @esd
11. 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
12. 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
13. 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
16. Improving Existing Templates
Let’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
18. Options
1. Do nothing
2. Iterate on existing products
3. Relaunch with mobile-first responsive template
Eli Dickinson / Industry Dive / Twitter: @esd
19. Responsive Email Design
What does it mean?
• 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.
Eli Dickinson / Industry Dive / Twitter: @esd
20. Responsive Email Design
What does it mean?
• These two screenshots are
the same message viewed
at different widths.
• Multi-column elements
collapse to a single column
on mobile
Eli Dickinson / Industry Dive / Twitter: @esd
21. Responsive Email Design
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
22. Responsive/Mobile Email Design Resources
Give 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
23. Think Beyond the Inbox
Email 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
24. Think Beyond the Inbox
Email 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 Dickinson / Industry Dive / Twitter: @esd
Two years oldMobile-focused, but have a range of digital productsReach seven verticalsForemerly with FierceMarkets
more smartphones sold than PCsMore smartphones than toothbrushes
This chart from LitmusAbout half – 48%Experian says 50% mobile, Movable Ink says 62%
Q: How many are confident your email renders correctly on mobile?
This number should scare you.Also note 2nd choice optionTriage mythMobile is critical to successful email campaignsMost senior executives consider a mobile device their primary communications tool. (Forbes)58% of marketers see Mobile affecting their email program in the next 12 months. (MarketingSherpa)
Nothing isn’t an option – your email product is already mobileRelaunch is best optionIterate may be easy in the short term
No excuse for not knowing your email analytics numbersMobile open rate should be a KPI
Caveats: iPhone one of very few programs to auto-load images by default, so it is overrepresented in open rate statistics.If you’re content is unreadable on mobile, after a while that will affect your mobile open rates.Anecdotally, consumer retail is over 60%
Breakdown of a recent campaignAndroid is small…Blackberry almost nonexistent. Is supporting those people worth it?We’ll come back to that later.
Strip away unneeded text and images– especially from the header. But don’t force jump to web.Screen width technical thing, but leads to email looking “zoomed out”
See Blog post on CSS buttonItl also works with no images, so better for desktop
Some of the simplest things you can do, don’t touch design at allAnother: use Retina imagesAll these are on industrydive blog
Smaller header prevents iPhone “zoom out”Larger text just easier to readBetter CTA is just a good idea
OK, not the best mobile email, but I guarantee you will get more clicks with second
Relaunch: upfront design commitment, but pays for itself.
One message that looks different depending on the device viewing it.Common in web design. But technical challenges have held back wide adoption on email
--To be clear: this is one message that renders differently on different devices.--Layout actually changes.--Hard to built, but only have to build box once
Pretty nerdy -- Won’t dig in too muchReally hard to support all devices. Focus on your top.Luckily iPhone has great CSS support.----- Meeting Notes (10/22/13 22:56) -----Q: how many personally design?
Outlook can be difficult – conditional comments nice trickTemplates from MailChimp can be adapted for any email provider
Your mobile email campaign is a failure if it links to pages that don’t really work on mobile.
This is a landing page we designed for our clients to use