Mobile Email and Newsletters - Relaunching your Email Products on Mobile
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile Email and Newsletters - Relaunching your Email Products on Mobile

  • 252 views
Uploaded 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)

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)

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
252
On Slideshare
252
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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

Transcript

  • 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