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)

1. Relaunching on Mobile:
Email and Newsletters
Eli Dickinson
Industry Dive

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

3. Why Mobile?
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

14. Improving Existing Templates
Let’s walk through an example
Looks fine in GMail
Eli Dickinson / Industry Dive / Twitter: @esd

15. Improving Existing Templates
Let’s walk through an example
Not so great on iPhone
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

17. Improving Existing Templates
Let’s walk through an example
Before
After
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

25. Eli Dickinson
Co-Founder, Industry Dive
eli@industrydive.com
www.industrydive.com
I promise to answer all tweets to @esd