Mobile Email and Newsletters - Relaunching your Email Products on Mobile

360 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
360
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

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
  • 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

    ×