![Quirks & Unknowns
table[class=callout] {
width: 50% !important;
max-width: 50% !important;
height: auto !important;
padding: 0 0 3% 3%;
}
display: none;
#spopwebinar](https://image.slidesharecdn.com/multiscreen-webinar-final-130305114157-phpapp02/75/Multiscreen-Email-Design-Lessons-from-the-Pros-63-2048.jpg)
Uploaded byLitmus
Multiscreen Email Design: Lessons from the Pros
The webinar discusses the importance of multiscreen email design, particularly in light of significant mobile adoption by users. Topics include analyzing subscriber bases, understanding email design challenges, and various design options, along with best practices for optimizing emails for different screen sizes. Presenters emphasize that there is no one-size-fits-all approach and recommend scalable, responsive designs to enhance user engagement.
More Related Content
Similar to Multiscreen Email Design: Lessons from the Pros
![Mobile-Friendly Email: Trends and Best Practices [Webinar with ActOn Software]](https://cdn.slidesharecdn.com/ss_thumbnails/mobilefriendlyemail-trendsandbestpractices-130304135339-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Multiscreen Email Design: Lessons from the Pros
- 1. #spopwebinar Multiscreen Email Design: Lessonsfrom the Pros Webinar will start at 2 minutes after the hour
- 2. Before We GetStarted • 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. Today’s Moderator Loren McDonald VP,Industry Relations Silverpop lmcdonald@silverpop.com @LorenMcDonald #spopwebinar 3
- 4. Context for today’s Webinar #spopwebinar
- 5. Mobile adoption byusers is off-the- charts … #spopwebinar
- 6.
- 7. But many marketers are looking foran automagic solution?
- 8.
- 9. …important to take a stepback … look at the bigger picture.
- 10.
- 11.
- 12. 1. Multiscreen (notmobile) > Screensize-apalooza
- 13. 2. More thanjust “design” – “context”
- 14. What You CanExpect 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. Today’s Presenters Brian Sisolak Justine Jordan Senior Strategist Marketing Director Trilogy Interactive Litmus brians@trilogyinteractive.com justine@litmus.com @bsisolak @litmusapp #spopwebinar 15
- 16. Agenda Multiscreen Challenge Strategies & Q&A Approaches #spopwebinar Framework / Universal Next Steps Principles 16
- 17.
- 18. Email Opens: January2013 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. 12-Month Change Webmail Desktop Mobile 42% 50% 38% 45% 40% 35% 30% 25% 33% 20% Opens in Each Environment 19
- 20. Massive Mobile Growth +366% +138% since #spop11 last 18 months +45% last 12 months 20
- 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. 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. 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” wide 2.3” wide 2.6” wide Small Medium Large 23
- 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.
- 26. From Name No matter the screen size… Subject Line Subscribers view emails in Preheader stages, making choices as they go. Preview/Open Swipe/Click/Tap Landing Page/Site
- 27. From and SubjectMatter More than Ever From Name ~25 characters Subject Line ~35 characters Preheader ~85 characters 27
- 28. Preheaders Are TertiaryInbox Content 28
- 29. Preheaders Are TertiaryInbox Content
- 30. Inconsistent rendering across devices and operating Android: iPhone: systems No scaling; Scales to width; dimensions vary; 320 x 460 top-left corner displayed
- 31. Click is NowTap Old mouse New mouse 31
- 32.
- 33.
- 34. iPhone Windows Phone Blackberry 34
- 35.
- 36. As with most thingswith email, there’s not a one-size- fits-all approach (sorry to disappoint you)
- 37. Mobile 64% higherCTR Segment and A/B test mobile- optimized version to frequent mobile openers Best For Getting started and testing the waters 37
- 39. Agnostic/Scalable/Aware • One layoutfor 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
- 41. Fluid Design/Layout • Usepercentages 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
- 43. Responsive Design • Usesmedia 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
- 44. Responsive design isnot universally supported. Notable detractors: • Android Gmail • Windows Phone Best For Heavy mobile audiences; travel alerts; mobile app; tech companies Source: http://stylecampaign.com/blog/2012/10/responsive-email-support/
- 45. Device Targeting Device-specific content served attime of open Relies on images enabled Source: Moveable Ink
- 46. Best For Link to specific app store, localization, timers 46
- 47. Your ideal solution may bea combination: Scalable + Responsive Text + Device Targeting?
- 48.
- 49. Scannable Singularcalls to action Larger fonts Single columns Bullet-proof / large CTA buttons Design for touch …
- 50. • Support thesubject line with a creative, useful or helpful preheader. – Call-to-action – Special offer – Reminder – Clickable/measurable – NOT “having trouble…?” 50
- 51. Big Buttons &Text • Body copy: 14px+ • Headlines: 22px+ • Buttons: 44px by 44px 51
- 52.
- 53. • Optimize theleft-hand side for Android. • Pertinent information • Call-to-action • Links http://stylecampaign.com/blog/2012/08/android-grid-of-grim/ 53
- 55. • Tappable touchtargets • Bulletproof buttons that don’t rely on an image • Left-hand side 55
- 56.
- 57. Framework / NextSteps #spopwebinar 57
- 58. Your Goals 58
- 59. How Do YourUsers Consume Your Messages? #spopwebinar 59
- 60.
- 61. Tackle the Problem 1366x768 320x480 1280x800 1920x1200 1024x768 1280x720 1440x900 1280x768 1280x1024 1152x864 1920x1080 1093x614 768x1024 1024x600 1680x1050 800x600
- 62.
- 63. Quirks & Unknowns table[class=callout] { width: 50% !important; max-width: 50% !important; height: auto !important; padding: 0 0 3% 3%; } display: none; #spopwebinar
- 64. Test – Measure– Optimize vs. #spopwebinar
- 65. Don’t be afraidto jump in
- 66. ebook will be emailed toyou next week #spopwebinar
- 67. Q & A/ Contact Information Brian Sisolak Justine Jordan Loren McDonald Senior Strategist Marketing Director VP, Industry Relations Trilogy Interactive Litmus Silverpop brians@trilogyinteractive.com justine@litmus.com lmcdonald@silverpop.com @bsisolak @litmusapp @LorenMcDonald #spopwebinar 67
- 69. Interested In LearningMore? silverpop.com silverpop.com/marketing-resources www.slideshare.net/silverpop Twitter.com/silverpop Facebook.com/silverpop #spopwebinar
Editor's Notes
- #13 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..
- #29 Support the subject line with a creative, useful or helpful preheader (NOT “having trouble…?”)Call-to-actionSpecial offerReminderClickable/measurable
- #31 After the from/subject/preheader, you get the open.The preview pane still counts, but has a different form factor
- #32 After the open comes the click… which is now the tap
- #35 Really long subject lines can enhance… or distract.
- #38 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.
- #39 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.
- #41 Fairly easy to implementFew rendering issuesVery small and very large screens can be hard to read
- #43 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.
- #44 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.
- #69 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.
- #70 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.