SlideShare a Scribd company logo
1 of 25
Download to read offline
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 products designed
for mobile first

Eli Dickinson / Industry Dive / Twitter: @esd
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
• Exact numbers vary based on audience and email type
Eli Dickinson / Industry Dive / Twitter: @esd
State of Mobile Email
Top 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 Land
Chart 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

Eli Dickinson / Industry Dive / Twitter: @esd
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
Know Your Audience
Here’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 Templates
Let’s walk through an example

Looks fine in GMail

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

Not so great on iPhone

Eli Dickinson / Industry Dive / Twitter: @esd
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
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 / Industry Dive / Twitter: @esd
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
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
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
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
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
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
Eli Dickinson
Co-Founder, Industry Dive
eli@industrydive.com
www.industrydive.com

I promise to answer all tweets to @esd

More Related Content

Recently uploaded

Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Joseph Skibbie
 
Converting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROConverting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROVWO
 
Imposter Syndrome in Marketing & Why You're Not Alone
Imposter Syndrome in Marketing & Why You're Not AloneImposter Syndrome in Marketing & Why You're Not Alone
Imposter Syndrome in Marketing & Why You're Not AloneHerd
 
Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Nedko Nedkov
 
A_B Testing Personalized Meditation Recommendations.pdf
A_B Testing Personalized Meditation Recommendations.pdfA_B Testing Personalized Meditation Recommendations.pdf
A_B Testing Personalized Meditation Recommendations.pdfVWO
 
The 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.groupThe 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.groupLivewire
 
Harnessing Social Media for Marketing Growth
Harnessing Social Media for Marketing GrowthHarnessing Social Media for Marketing Growth
Harnessing Social Media for Marketing Growthabinashdm2014
 
Dhanuka Agritech Limited - Sales and Marketing Intern
Dhanuka Agritech Limited - Sales and Marketing InternDhanuka Agritech Limited - Sales and Marketing Intern
Dhanuka Agritech Limited - Sales and Marketing Internrisabhpandeyconnect
 
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptxToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptxivanrazine1
 
Run more experiments with fewer resources
Run more experiments with fewer resourcesRun more experiments with fewer resources
Run more experiments with fewer resourcesVWO
 
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling ResearchIce Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling ResearchTINT Marketing
 
Friends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxFriends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxNavah Hopkins
 
Digital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services PreviewDigital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services PreviewDigital Gravity
 
Crafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesCrafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesVWO
 
Cricket Playbook for Growth Marketers: Adjust x Glance report
Cricket Playbook for Growth Marketers: Adjust x Glance reportCricket Playbook for Growth Marketers: Adjust x Glance report
Cricket Playbook for Growth Marketers: Adjust x Glance reportSocial Samosa
 
Amazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptxAmazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptxWill Haire
 
SVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdfSVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdfvikrs213
 
Elevate Your Design Skills: Enroll in Pune's Premier UI/UX Design Course
Elevate Your Design Skills: Enroll in Pune's Premier UI/UX Design CourseElevate Your Design Skills: Enroll in Pune's Premier UI/UX Design Course
Elevate Your Design Skills: Enroll in Pune's Premier UI/UX Design Courseamirshaikhv21realtyp
 
Top 15 Emerging Technologies for the Modern World
Top 15 Emerging Technologies for the Modern WorldTop 15 Emerging Technologies for the Modern World
Top 15 Emerging Technologies for the Modern WorldD Cloud Solutions
 
Unifying feature management with experiments - Server Side Webinar (1).pdf
Unifying feature management with experiments - Server Side Webinar (1).pdfUnifying feature management with experiments - Server Side Webinar (1).pdf
Unifying feature management with experiments - Server Side Webinar (1).pdfVWO
 

Recently uploaded (20)

Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!Marketing Team of 1, A Framework To Win!
Marketing Team of 1, A Framework To Win!
 
Converting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CROConverting with Comedy: Research Parallels for CRO
Converting with Comedy: Research Parallels for CRO
 
Imposter Syndrome in Marketing & Why You're Not Alone
Imposter Syndrome in Marketing & Why You're Not AloneImposter Syndrome in Marketing & Why You're Not Alone
Imposter Syndrome in Marketing & Why You're Not Alone
 
Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024Podvertise.fm - Founder.University - Pitch Deck 2024
Podvertise.fm - Founder.University - Pitch Deck 2024
 
A_B Testing Personalized Meditation Recommendations.pdf
A_B Testing Personalized Meditation Recommendations.pdfA_B Testing Personalized Meditation Recommendations.pdf
A_B Testing Personalized Meditation Recommendations.pdf
 
The 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.groupThe 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.group
 
Harnessing Social Media for Marketing Growth
Harnessing Social Media for Marketing GrowthHarnessing Social Media for Marketing Growth
Harnessing Social Media for Marketing Growth
 
Dhanuka Agritech Limited - Sales and Marketing Intern
Dhanuka Agritech Limited - Sales and Marketing InternDhanuka Agritech Limited - Sales and Marketing Intern
Dhanuka Agritech Limited - Sales and Marketing Intern
 
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptxToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
ToShare_UG 13_03_24_Full_BelgianTrailblazerCommunity.pptx
 
Run more experiments with fewer resources
Run more experiments with fewer resourcesRun more experiments with fewer resources
Run more experiments with fewer resources
 
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling ResearchIce Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
 
Friends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptxFriends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptx
 
Digital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services PreviewDigital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services Preview
 
Crafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing PagesCrafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing Pages
 
Cricket Playbook for Growth Marketers: Adjust x Glance report
Cricket Playbook for Growth Marketers: Adjust x Glance reportCricket Playbook for Growth Marketers: Adjust x Glance report
Cricket Playbook for Growth Marketers: Adjust x Glance report
 
Amazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptxAmazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptx
 
SVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdfSVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdf
 
Elevate Your Design Skills: Enroll in Pune's Premier UI/UX Design Course
Elevate Your Design Skills: Enroll in Pune's Premier UI/UX Design CourseElevate Your Design Skills: Enroll in Pune's Premier UI/UX Design Course
Elevate Your Design Skills: Enroll in Pune's Premier UI/UX Design Course
 
Top 15 Emerging Technologies for the Modern World
Top 15 Emerging Technologies for the Modern WorldTop 15 Emerging Technologies for the Modern World
Top 15 Emerging Technologies for the Modern World
 
Unifying feature management with experiments - Server Side Webinar (1).pdf
Unifying feature management with experiments - Server Side Webinar (1).pdfUnifying feature management with experiments - Server Side Webinar (1).pdf
Unifying feature management with experiments - Server Side Webinar (1).pdf
 

Mobile Email and Newsletters - Relaunching your Email Products on Mobile

  • 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

Editor's Notes

  1. Two years oldMobile-focused, but have a range of digital productsReach seven verticalsForemerly with FierceMarkets
  2. more smartphones sold than PCsMore smartphones than toothbrushes
  3. This chart from LitmusAbout half – 48%Experian says 50% mobile, Movable Ink says 62%
  4. Q: How many are confident your email renders correctly on mobile?
  5. 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)
  6. Nothing isn’t an option – your email product is already mobileRelaunch is best optionIterate may be easy in the short term
  7. No excuse for not knowing your email analytics numbersMobile open rate should be a KPI
  8. 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%
  9. Breakdown of a recent campaignAndroid is small…Blackberry almost nonexistent. Is supporting those people worth it?We’ll come back to that later.
  10. 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”
  11. See Blog post on CSS buttonItl also works with no images, so better for desktop
  12. Some of the simplest things you can do, don’t touch design at allAnother: use Retina imagesAll these are on industrydive blog
  13. Smaller header prevents iPhone “zoom out”Larger text just easier to readBetter CTA is just a good idea
  14. OK, not the best mobile email, but I guarantee you will get more clicks with second
  15. Relaunch: upfront design commitment, but pays for itself.
  16. 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
  17. --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
  18. 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?
  19. Outlook can be difficult – conditional comments nice trickTemplates from MailChimp can be adapted for any email provider
  20. Your mobile email campaign is a failure if it links to pages that don’t really work on mobile.
  21. This is a landing page we designed for our clients to use