Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Multiscreen Email Design: Lessons from the Pros

978 views

Published on

Recently it seems as if mobile email has become the new hot topic among digital marketers. Much of this conversation centers around the on-screen experience: What's the best way to design an email so it renders well and drives opens, clicks and most importantly conversions and other desired goals on the tiny screen of a smartphone, mid-sized tablet and larger monitor on a laptop or desktop PC? While certainly important questions to ask, this is only one aspect of an effective mobile and multiscreen email marketing strategy. Before you make over the email message itself, you must first work out many other aspects of your multiscreen strategy.

In this Webinar, Loren McDonald will assemble a team of some of the smartest thinkers in the mobile/multiscreen email marketing design arena. Together they will tackle some of the toughest questions and offer real-life advice for getting multiscreen email right.

Among the specific topics will include the following:

Learning the implications of each major screen size and device
Determining what devices your subscriber base is using and how and where they are converting
Discussing the different types of design approaches, such as responsive and scalable, and which is the best fit based on your resources and expertise
Creating a consistent user experience across email and Web/landing pages
Examples and key best practices
Communicating with your designer and programmer
Testing, learning, optimization and measurement/analysis
Future trends and predictions - where is it all going

  • Be the first to comment

Multiscreen Email Design: Lessons from the Pros

  1. 1. #spopwebinarMultiscreen Email Design:Lessons from the ProsWebinar will start at 2 minutes afterthe hour
  2. 2. Before We Get Started• Dial in via phone or select “call using your computer”• Tweet with us: #spopwebinar• Chat your questions to the host• Presentation will be emailed to you next week #spopwebinar
  3. 3. Today’s ModeratorLoren McDonaldVP, Industry RelationsSilverpoplmcdonald@silverpop.com@LorenMcDonald #spopwebinar 3
  4. 4. Context for today’s Webinar#spopwebinar
  5. 5. Mobile adoption by users is off-the- charts …#spopwebinar
  6. 6. Mobiledesign#1hottesttopic …andquestionwe hear.
  7. 7. But manymarketersare lookingfor anautomagicsolution?
  8. 8. … andoftenjumpingstraighttotactics…
  9. 9. …importantto take astep back …look at thebiggerpicture.
  10. 10. … andthen divein …
  11. 11. 2 additional thoughts#spopwebinar
  12. 12. 1. Multiscreen (not mobile) > Screensize-apalooza
  13. 13. 2. More than just “design” – “context”
  14. 14. What You Can Expect to Takeaway Today How to analyze your subscriber base Better understanding of the email design challenges Understanding of the “design options” A framework for tackling “multiscreen design” Tips and generally accepted best practices #spopwebinar
  15. 15. Today’s PresentersBrian Sisolak Justine JordanSenior Strategist Marketing DirectorTrilogy Interactive Litmusbrians@trilogyinteractive.com justine@litmus.com@bsisolak @litmusapp #spopwebinar 15
  16. 16. Agenda Multiscreen Challenge Strategies & Q&A Approaches#spopwebinar Framework / Universal Next Steps Principles 16
  17. 17. The Multiscreen Challenge#spopwebinar 17
  18. 18. Email Opens: January 2013 Mobile: Smartphones (iPhone, Android) and tablets Desktop Mobile 33% Desktop: 42% Installed email programs (Outlook, Apple Mail) Webmail Webmail: 25% Email accessed through a web browser (Gmail, Hotmail, Yahoo!) Source: Litmus Email Analytics 18
  19. 19. 12-Month Change Webmail Desktop Mobile 42%50% 38%45%40%35%30%25% 33%20% Opens in Each Environment 19
  20. 20. Massive Mobile Growth+366% +138% since #spop11 last 18 months +45% last 12 months 20
  21. 21. Mobile Market Share Other Smartphone OS Share 1% 0.4% Others 1.7% Symbian 0.6% 1.2% iPad Microsoft 2.9% 27% 3.0% Blackberry 6.4% 3.5% iPhone 56% iOS 20.9% 36.3% Android 53.4% 16% Android 69.7% 0% 20% 40% 60% 80% Mobile Email Opens US Worldwide Source: Litmus Email Analytics Sources: ComScore (US); Gartner (Worldwide) 21
  22. 22. Know Your Audience What percentage of customers/prospects interact with your organization’s mobile email messages? • 31% of marketers don’t know their mobile email open rate • 33% don’t know their mobile click rate 22
  23. 23. Screensize-apalooza Excite 13 Nexus 7 8.5” wide iPad Mini 7.3” wide Galaxy Note II 5.3” wide iPhone BB Bold 3.2” wide2.3” wide 2.6” wide Small Medium Large 23
  24. 24. Android Screen Sizes & Densities ldpi mdpi hdpi xhdpi small 1.7% 1% normal 0.4% 11% 50.1% 25.1% large 0.1% 2.4% 3.6% xlarge 4.6%Source: http://developer.android.com/about/dashboards/index.html 24
  25. 25. The unifying characteristic?TOUCH. 25
  26. 26. From Name No matter the screen size… Subject Line Subscribers view emails in Preheader stages, making choices as they go.Preview/OpenSwipe/Click/Tap Landing Page/Site
  27. 27. From and Subject Matter More than EverFrom Name~25 charactersSubject Line~35 charactersPreheader~85 characters 27
  28. 28. Preheaders Are Tertiary Inbox Content 28
  29. 29. Preheaders Are Tertiary Inbox Content
  30. 30. Inconsistentrenderingacross devicesand operating Android: iPhone:systems No scaling; Scales to width; dimensions vary; 320 x 460 top-left corner displayed
  31. 31. Click is Now Tap Old mouse New mouse 31
  32. 32. NO:interstitialboxesNO:impossibleform fields 32
  33. 33. YES:easy tonavigateYES:finger friendly 33
  34. 34. iPhone Windows Phone Blackberry 34
  35. 35. Strategies & Approaches#spopwebinar 35
  36. 36. As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)
  37. 37. Mobile 64% higher CTR Segment and A/B test mobile-optimized version to frequent mobile openers Best For Getting started and testing the waters 37
  38. 38. Agnostic/Scalable/Aware• One layout for all screen sizes• Single column design Best For – 320-500px• Large text & buttons When you’re ready for• Generous white space change, but don’t• Clear calls to action have tons of• Short, concise body copy resources 39
  39. 39. Fluid Design/Layout• Use percentages for widths• Adapts to fill the screen it’s Best For viewed on; text wraps automatically• Most effective for simple Lots of text and layouts just a few images; automated campaigns 41
  40. 40. Responsive Design• Uses media queries or @media• Not a “line of code”, more like a conditional statement that enables alternate styles – If the screen size is x, then display y – If the screen size is x, then increase headline size to y – If screen size is x, then show image at 100%• Detects screen size of the device being read on and enables alternate styles accordingly 43
  41. 41. Responsive design is not universallysupported. Notable detractors:• Android Gmail• Windows Phone Best For Heavy mobile audiences; travel alerts; mobile app; tech companiesSource: http://stylecampaign.com/blog/2012/10/responsive-email-support/
  42. 42. Device TargetingDevice-specificcontent servedat time of openRelies onimagesenabled Source: Moveable Ink
  43. 43. Best For Link to specific appstore, localization, timers 46
  44. 44. Your idealsolution maybe acombination:Scalable +ResponsiveText + DeviceTargeting?
  45. 45. Universal Principles#spopwebinar 48
  46. 46. Scannable Singular calls to action Larger fonts Single columns Bullet-proof / large CTA buttonsDesign for touch …
  47. 47. • Support the subject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?” 50
  48. 48. Big Buttons & Text• Body copy: 14px+• Headlines: 22px+• Buttons: 44px by 44px 51
  49. 49. 52
  50. 50. • Optimize the left-hand side for Android. • Pertinent information • Call-to-action • Linkshttp://stylecampaign.com/blog/2012/08/android-grid-of-grim/ 53
  51. 51. • Tappable touch targets• Bulletproof buttons that don’t rely on an image• Left-hand side 55
  52. 52. TEST!
  53. 53. Framework / Next Steps#spopwebinar 57
  54. 54. Your Goals 58
  55. 55. How Do Your Users Consume Your Messages?#spopwebinar 59
  56. 56. So much email… 60
  57. 57. Tackle the Problem 1366x768 320x480 1280x800 1920x1200 1024x768 1280x720 1440x900 1280x768 1280x1024 1152x864 1920x1080 1093x614 768x1024 1024x600 1680x1050 800x600
  58. 58. Tackle the Problem#spopwebinar
  59. 59. Quirks & Unknowns table[class=callout] { width: 50% !important; max-width: 50% !important; height: auto !important; padding: 0 0 3% 3%; } display: none;#spopwebinar
  60. 60. Test – Measure – Optimize vs.#spopwebinar
  61. 61. Don’t be afraid to jump in
  62. 62. ebook willbe emailedto you nextweek#spopwebinar
  63. 63. Q & A / Contact InformationBrian Sisolak Justine Jordan Loren McDonaldSenior Strategist Marketing Director VP, Industry RelationsTrilogy Interactive Litmus Silverpopbrians@trilogyinteractive.com justine@litmus.com lmcdonald@silverpop.com@bsisolak @litmusapp @LorenMcDonald #spopwebinar 67
  64. 64. Interested In Learning More? silverpop.com silverpop.com/marketing-resources www.slideshare.net/silverpop Twitter.com/silverpop Facebook.com/silverpop#spopwebinar

×