Multiscreen Email Design: Lessons from the Pros

783 views
693 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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
783
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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 open comes the click… which is now the tap
  • 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 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

    ×