mobile email and newsletters - relaunching your email products on mobile

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

eli@industrydive.comwww.industrydive.com

I promise to answer all tweets to @esd