Successfully reported this slideshow.
Relaunching on Mobile:
Email and Newsletters
Eli Dickinson
Industry Dive
About Industry Dive
A mobile focused B2B media start-up based in Washington, DC

The only B2B company with
100% of its pro...
Why Mobile?

Eli Dickinson / Industry Dive / Twitter: @esd
State of Mobile Email
Mobile isn’t the future… it’s already here

• About half of all emails are read on a mobile device
•...
State of Mobile Email
Top 10 Email Clients – September 2013

• iPhone is the number one global email client.

Eli Dickinso...
State of Mobile Email

"If you're an email marketer and not thinking about mobile, you may
not be an email marketer for mu...
Options

1. Do nothing
2. Iterate on existing products

 3. Relaunch with mobile-first responsive template

Eli Dickinson...
First Step: Know Your Audience

• Talk to publishers, writers, editors, readers, sales
team
• 31% of marketers don’t know ...
Know Your Audience
Here’s our data…

• Some variation by
industry.
• B2B generally lags B2C
in mobile adoption

Industry D...
Know Your Audience
Here’s our data…

• iPhone is huge
• Outlook really
important
• Android only 5%

Eli Dickinson / Indust...
Improving Existing Email Templates

• Design for a smaller screen
– Get to the point faster. KISS
– Use larger fonts
– Sli...
Improving Existing Email Templates

• Design for fingers
– Call to action should be
large, clear, and tappable
– Avoid nav...
Improving Existing Email Templates

• Technical “tricks” to improve mobile rendering.
– Prevent partial downloads on iPhon...
Improving Existing Templates
Let’s walk through an example

Looks fine in GMail

Eli Dickinson / Industry Dive / Twitter: ...
Improving Existing Templates
Let’s walk through an example

Not so great on iPhone

Eli Dickinson / Industry Dive / Twitte...
Improving Existing Templates
Let’s walk through an example

Simple changes to make it better:
• Make large header image ad...
Improving Existing Templates
Let’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 / ...
Responsive Email Design
What does it mean?

• You still send the same
message to everyone.

• Code within the email
adjust...
Responsive Email Design
What does it mean?

• These two screenshots are
the same message viewed
at different widths.
• Mul...
Responsive Email Design

Outlook 2013

iPhone 5

How it works:
• Responsive containers and images
scale up or down automat...
Responsive/Mobile Email Design Resources
Give this slide to your designer

• Buy a copy of Modern HTML Email by Jason Rodr...
Think Beyond the Inbox
Email is only one component of your media product

• Starts “zoomed out” with tiny
text
• Way too m...
Think Beyond the Inbox
Email is only one component of your media product

• Responsive landing page that
looks nice on all...
Eli Dickinson
Co-Founder, Industry Dive
eli@industrydive.com
www.industrydive.com

I promise to answer all tweets to @esd
Upcoming SlideShare
Loading in …5
×

Mobile Email and Newsletters - Relaunching your Email Products on Mobile

393 views

Published on

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)

Published in: Marketing, Technology, Business
  • Be the first to comment

  • Be the first to like this

Mobile Email and Newsletters - Relaunching your Email Products on Mobile

  1. 1. Relaunching on Mobile: Email and Newsletters Eli Dickinson Industry Dive
  2. 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. 3. Why Mobile? Eli Dickinson / Industry Dive / Twitter: @esd
  4. 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. 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. 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. 7. Options 1. Do nothing 2. Iterate on existing products  3. Relaunch with mobile-first responsive template Eli Dickinson / Industry Dive / Twitter: @esd
  8. 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. 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. 10. Know Your Audience Here’s our data… • iPhone is huge • Outlook really important • Android only 5% Eli Dickinson / Industry Dive / Twitter: @esd
  11. 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. 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. 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. 14. Improving Existing Templates Let’s walk through an example Looks fine in GMail Eli Dickinson / Industry Dive / Twitter: @esd
  15. 15. Improving Existing Templates Let’s walk through an example Not so great on iPhone Eli Dickinson / Industry Dive / Twitter: @esd
  16. 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. 17. Improving Existing Templates Let’s walk through an example Before After Eli Dickinson / Industry Dive / Twitter: @esd
  18. 18. Options 1. Do nothing 2. Iterate on existing products 3. Relaunch with mobile-first responsive template Eli Dickinson / Industry Dive / Twitter: @esd
  19. 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. 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. 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. 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. 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. 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. 25. Eli Dickinson Co-Founder, Industry Dive eli@industrydive.com www.industrydive.com I promise to answer all tweets to @esd

×