Multiscreen mobile email design strategy silverpop

3,074 views

Published on

Webinar held on February 26, 2013 discussing the challenges of designing emails in a mobile and multiscreen world; outlines the different design approaches; shares tips/best practices. Webinar features Justine Jordan of Litmus; Brian Sisolak of Trilogy Interactive and Loren McDonald, Silverpop

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,074
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
93
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • No longer are we accessing the internet through a nice big desktop screenLaptops.. Netbooks are all growingAnd more are coming – ipad.. tablets.. And then there is mobile..
  • Support the subject line with a creative, useful or helpful preheader (NOT “having trouble…?”)Call-to-actionSpecial offerReminderClickable/measurable
  • After the from/subject/preheader, you get the open.The preview pane still counts, but has a different form factor
  • After the from/subject/preheader, you get the open.The preview pane still counts, but has a different form factor
  • After the open comes the click… which is now the tap
  • Really long subject lines can enhance… or distract.
  • Really long subject lines can enhance… or distract.
  • Segment list into likely mobile and likely desktopSend each segment email optimized for that environmentGood for people that are consistent, bad for those that aren’t (you can’t predict where someone will open)Advantages: Your recipients will receive the email version that is optimized for the screen they use most often. Neither email design nor layout is a compromise. Each is ideal for its screen size and should lead to higher engagement and conversion rates. Disadvantages: You must create two optimized versions of each message – in other words, it’s the multipart text/HTML versions issue all over again.
  • Advantages: You create a “one and done” template for your email that you can send to all subscribers without needing complicated coding to make sure it renders correctly on different screen sizes as well as in portrait (vertical) and landscape mode on phones and tablets. “We found that a screen-agnostic approach did not depend on technology to render the correct version,” says Brian Brown of ideapark, a Silverpop agency partner. “We also found the code base was a little lighter, and the workflow was simplified.” Disadvantages: Focusing on simple and big can make complex emails with multiple elements more challenging. It also sacrifices functionality, such as two-column layouts. As scalable layouts are fixed-width — be itskinny or not — they work well for iOS since content is automatically scaled to the screen width, but are not optimal for other platforms like Android.
  • Fairly easy to implementFew rendering issuesVery small and very large screens can be hard to read
  • Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone. Responsive design also allows you to show or hide blocks of copy in different versions of the email. Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer. Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.
  • Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone. Responsive design also allows you to show or hide blocks of copy in different versions of the email. Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer. Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.
  • Silverpop brings the expertise and experience to support your marketing needs. We are the only digital marketing technology provider that brings together email marketing, marketing automation and social sharing, including location-based marketing.Silverpop serves over 1,400 clients across a variety of industries, geographies and business sizes. We have been in marketing technology for over 12 years, this brings you a partner with the financial and operational stability to support your business, it brings you a partner with a depth of experience and with a highly scalable infrastructure. Silverpop is a global company, we have over 400 employees worldwide. Our US headquarters is in Atlanta. We also have offices in London and Frankfurt and do business in Asia Pacific through a reseller.
  • Also available at silverpop.com/marketing-resources is more information about future webinars, recordings from previous webinars, You can also access slides from Silverpop presentations on social media and countless other topics at slideshare.net/silverpop. You can also find us on Twitter and Facebook.
  • Multiscreen mobile email design strategy silverpop

    1. 1. #spopwebinarMultiscreen Email Design:Lessons from the Pros
    2. 2. Today’s ModeratorLoren McDonaldVP, Industry RelationsSilverpoplmcdonald@silverpop.com@LorenMcDonald #spopwebinar 2
    3. 3. Context for today’s Webinar#spopwebinar
    4. 4. Mobile adoption by users is off-the- charts …#spopwebinar
    5. 5. Mobiledesign#1hottesttopic …andquestionwe hear.
    6. 6. But manymarketersare lookingfor anautomagicsolution?
    7. 7. … andoftenjumpingstraighttotactics…
    8. 8. …importantto take astep back …look at thebiggerpicture.
    9. 9. … andthen divein …
    10. 10. 2 additional thoughts#spopwebinar
    11. 11. 1. Multiscreen (not mobile) > Screensize-apalooza
    12. 12. 2. More than just “design” – “context”
    13. 13. 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
    14. 14. Today’s PresentersBrian Sisolak Justine JordanSenior Strategist Marketing DirectorTrilogy Interactive Litmusbrians@trilogyinteractive.com justine@litmus.com@bsisolak @litmusapp #spopwebinar 14
    15. 15. Agenda Multiscreen Challenge Strategies & Q&A Approaches#spopwebinar Framework / Universal Next Steps Principles 15
    16. 16. The Multiscreen Challenge#spopwebinar 16
    17. 17. 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 17
    18. 18. 12-Month Change Webmail Desktop Mobile 42%50% 38%45%40%35%30%25% 33%20% Opens in Each Environment 18
    19. 19. Massive Mobile Growth+366% +138% since #spop11 last 18 months +45% last 12 months 19
    20. 20. 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) 20
    21. 21. 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 21
    22. 22. 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 22
    23. 23. 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 23
    24. 24. The unifying characteristic?TOUCH. 24
    25. 25. 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
    26. 26. From and Subject Matter More than EverFrom Name~25 charactersSubject Line~35 charactersPreheader~85 characters 26
    27. 27. Preheaders Are Tertiary Inbox Content 27
    28. 28. Preheaders Are Tertiary Inbox Content
    29. 29. Inconsistentrenderingacross devicesand operatingsystems(see next slidefor comments)
    30. 30. Inconsistentrenderingacross devicesand operatingsystems Android: iPhone:(slide 2 – with No scaling; Scales to width;build) 320 x 460 dimensions vary; 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. iPhone Windows Phone Blackberry 35
    36. 36. Strategies & Approaches#spopwebinar 36
    37. 37. As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)
    38. 38. Mobile 64% higher CTR Segment and A/B test mobile-optimized version to frequent mobile openers Best For Getting started and testing the waters 38
    39. 39. Agnostic/Scalable/Aware• One layout for all screen sizes• Single column design Best For – 320-500px• Large text & buttons When you’re• Generous white space ready for change,• Clear calls to action but don’t have tons of resources• Short, concise body copy 40
    40. 40. 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 42
    41. 41. 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 44
    42. 42. 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/
    43. 43. Device TargetingDevice-specificcontent servedat time of openRelies onimagesenabled Source: Moveable Ink
    44. 44. Best For Link to specific appstore, localization, timers 47
    45. 45. Your idealsolution maybe acombination:Scalable +ResponsiveText + DeviceTargeting?
    46. 46. Universal Principles#spopwebinar 49
    47. 47. Scannable Singular calls to action Larger fonts Single columns Bullet-proof / large CTA buttonsDesign for touch …
    48. 48. • Support the subject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?” 51
    49. 49. Big Buttons & Text• Body copy: 14px+• Headlines: 22px+• Buttons: 44px by 44px 52
    50. 50. 53
    51. 51. • Optimize the left-hand side for Android. • Pertinent information • Call-to-action • Linkshttp://stylecampaign.com/blog/2012/08/android-grid-of-grim/ 54
    52. 52. • Tappable touch targets• Bulletproof buttons that don’t rely on an image• Left-hand side 56
    53. 53. TEST!
    54. 54. Framework / Next Steps#spopwebinar 58
    55. 55. Your Goals 59
    56. 56. How Do Your Users Consume Your Messages?#spopwebinar 60
    57. 57. So much email… 61
    58. 58. Tackle the Problem 1366x768 320x480 1280x800 1920x1200 1024x768 1280x720 1440x900 1280x768 1280x1024 1152x864 1920x1080 1093x614 768x1024 1024x600 1680x1050 800x600
    59. 59. Tackle the Problem#spopwebinar
    60. 60. Quirks & Unknowns table[class=callout] { width: 50% !important; max-width: 50% !important; height: auto !important; padding: 0 0 3% 3%; } display: none;#spopwebinar
    61. 61. Test – Measure – Optimize vs.#spopwebinar
    62. 62. Don’t be afraid to jump in
    63. 63. Download ebook:http://www.silverpop.com/marketing-resources/white-papers/download/multiscreen-email-design-strategy.html
    64. 64. 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 68
    65. 65. Interested In Learning More? silverpop.com silverpop.com/marketing-resources www.slideshare.net/silverpop Twitter.com/silverpop Facebook.com/silverpop#spopwebinar

    ×