Designing for (almost) every device
•
1 like•1,097 views
What is responsive email design and how can it improve results from your marketing campaigns? We look into where the demand for better mobile experiences has come from, what you should consider when taking a mobile-first approach to campaign planning and how to make your email designs deliver the goods on almost every display.
Recommended
Recommended
More Related Content
Similar to Designing for (almost) every device
Similar to Designing for (almost) every device (20)
More from Ros Hodgekiss
More from Ros Hodgekiss (7)
Recently uploaded
Recently uploaded (20)
Designing for (almost) every device
- 1. Designing for (Almost) Every Device Rosanne Hodgekiss, Campaign Monitor
- 4. Create experiences that are so consistent, they go unseen. NdV: Could drop “that”.NdV: Could drop “that”.
- 5. However, not so long ago...
- 7. NdV: Old-school idea of segregation, separating desktop and mobile. .mobi domains are a great example. NdV: Old-school idea of segregation, separating desktop and mobile. .mobi domains are a great example.
- 10. “Responsive web design is aimed to provide an optimal viewing experience across a wide range of devices (from desktop monitors to mobile phones)”
- 11. “Responsive email design is aimed to provide an optimal viewing experience across a wide range of devices (from desktop monitors to mobile phones)”
- 13. Why optimize your emails for mobile?
- 14. “Mobile browsing is expected to outpace desktop-based access within 3-5 years.” On the web: On the web:
- 15. On email:
- 16. On email:
- 17. So, there's been a push from...
- 18. “If you’re familiar with the use of (RWD)... you’ll be pleased to know that we’ll be using the same concepts and techniques here for email.” Designers... Designers...
- 19. “87% of C-level executives check the majority of their email via mobile.This means that both B2B and B2C marketers must make their emails mobile friendly if they want to succeed.” Marketers... Marketers...
- 20. Much easier to read and navigate mobile- optimized email. “Scrolling through a newsletter is less work than navigating a website to acquire the same information” “Scrolling through a newsletter is less work than navigating a website to acquire the same information” “Scrolling through a newsletter is less work than navigating a website to acquire the same information” Email recipients... Email recipients...
- 21. Results
- 22. • 40% of email opens from mobile devices • “Since updating for mobile... the email click-through rate is up 35%.” Case Study: Thrillist Case Study: Thrillist NdV: Swap out for better image?NdV: Swap out for better image?
- 23. So, you want to optimize your campaigns?
- 24. It’s not that hard!
- 28. ⅔ of these campaigns did not use responsive email techniques.
- 29. Planning a mobile- friendly campaign
- 30. 1.Know your audience & set benchmarks 2.Optimize your content 3.Take a mobile-first approach 4.Get wise to responsive techniques Planning... Planning...
- 31. 1.Know your audience & set benchmarks 2.Optimize your content 3.Take a mobile-first approach 4.Get wise to responsive techniques Planning... Planning... NdV: Fade the non-current bullet points?NdV: Fade the non-current bullet points?
- 35. 1.Know your audience & set benchmarks 2.Optimize your content 3.Take a mobile-first approach 4.Get wise to responsive techniques Planning... Planning...
- 36. Content... Content...“…the average time allocated to a newsletter was only 51 seconds...” “Short is too long for mobile. Ultra-short rules the day.” “Short is too long for mobile. Ultra-short rules the day.” “Short is too long for mobile. Ultra-short rules the day.”
- 37. Content... Content... “...it feels like there’s an emerging aesthetic that is very stripped back, focused on typography and blocks of simple content that can be easily moved...”
- 38. Content... Content... “Users don't look around much.They stay highly focused on the screen section that they're engaging with or that they assume contains the answer to their problem.”
- 41. • Always ask: • What is valuable to your subscribers? • How simple can you make your message? • How strong is your CTA? Content... Content...
- 42. 1.Know your audience & set benchmarks 2.Optimize your content 3.Take a mobile-first approach 4.Get wise to responsive techniques Planning... Planning...
- 43. “Assume now that you get only one shot at getting your email read, and it had better render correctly and deliver its message on any screen size.”
- 44. • Content • Speed • Navigation Mobile-first... Mobile-first...
- 45. • Content • Speed • Navigation Mobile-first... Mobile-first...
- 48. Single-column, all the way.
- 49. • Content • Speed • Navigation Mobile-first... Mobile-first...
- 50. A slow-loading newsletter is a dead newsletter.
- 51. • Content • Speed • Navigation Mobile-first... Mobile-first...
- 52. • Challenges: • Limited viewport dimensions (eg. phones) • Buttons, links and content are not as easy to use on touch screens as they are on other displays • Links can be ‘easy’ or ‘hard’ to reach, depending on placement Navigation... Navigation...
- 54. • Minimum touch target size is 7mm/26px (iOS: 44px recommended) • Minimum spacing between elements is 2mm/8px Navigation... Navigation... NdV: 44px is the recommended touch target size on iOS. If you want a reference, search for iOS Human Interface Guidelines. NdV: 44px is the recommended touch target size on iOS. If you want a reference, search for iOS Human Interface Guidelines.
- 55. Designs that are effective in mobile email clients tend do great in desktop and webmail clients, too.
- 56. 1.Know your audience & set benchmarks 2.Optimize your content 3.Take a mobile-first approach 4.Get wise to responsive techniques Planning... Planning...
- 57. “The media query is the ringmaster of responsive design. It lets us establish the rules of the game and gives us what we need most: control. ”
- 58. • Used to adapt and optimize email content to suit different displays, devices • Added like an additional CSS stylesheet to the <head> Media queries... Media queries...
- 60. • Can be used to create bespoke email experiences, with: • Shifting layout widths • Optimized elements • Conditional content Media queries... Media queries...
- 63. • Aren’t the only way. • The ‘fluid’ approach is also popular. Media queries... Media queries...
- 65. <body> ... <div>Coda 2 is here...</div> ... </body> </body> </body> </body> </body> NdV: Not sure I understand this example. More context on the slide? NdV: Not sure I understand this example. More context on the slide?
- 66. • Aren’t always supported by email clients Media queries... Media queries...
- 67. Media queries... Media queries... Default Email Clients Media Query Support Amazon Kindle Fire HD Yes Android 2.1 Eclair No Android 2.2+ Yes Apple iOS Yes BlackBerry OS 5 No BlackBerry OS 6+ Yes BlackBerry Playbook Yes Microsoft Windows Mobile 6.1 No Microsoft Windows Phone 7 No Microsoft Windows Phone 7.5 Yes Microsoft Windows Phone 8 No Microsoft Surface No 3rd-Party Email Clients Microsoft Outlook Exchange 3rd party app (Android) No Gmail mobile app (all platforms) No Yahoo! Mail mobile app (all platforms) No NdV: Colorize the rows in red/green to make the split more clear. NdV: Colorize the rows in red/green to make the split more clear.
- 68. Media queries... Media queries... Default Email Clients Media Query Support Amazon Kindle Fire HD Yes Android 2.1 Eclair No Android 2.2+ Yes Apple iOS Yes BlackBerry OS 5 No BlackBerry OS 6+ Yes BlackBerry Playbook Yes Microsoft Windows Mobile 6.1 No Microsoft Windows Phone 7 No Microsoft Windows Phone 7.5 Yes Microsoft Windows Phone 8 No Microsoft Surface No 3rd-Party Email Clients Microsoft Outlook Exchange 3rd party app (Android) No Gmail mobile app (all platforms) No Yahoo! Mail mobile app (all platforms) No
- 69. You don't need to be a codernaut to optimize your campaigns for mobile.
- 70. There’s nothing wrong with creating a mobile-ready template using a builder, then adding your own flair to it. NdV: “a mobile-ready [template] builder”? Also, “adding” => “add”. NdV: “a mobile-ready [template] builder”? Also, “adding” => “add”.
- 75. • Template builders by: • Campaign Monitor • Mailchimp • Also, responsive templates from: • Zurb • ThemeForest (Envato) Off the shelf... Off the shelf...
- 76. • The responsive / mobile-friendly email movement is still in its early days To wrap up... To wrap up...
- 77. • Mobile optimization is a win for everyone - it takes planning, but not much more work To wrap up... To wrap up...
- 78. • Welcome to the black art of mobile email! To wrap up... To wrap up...
Editor's Notes
- - Welcome
- Ros Hodgekiss: Community Manager, writer on the Campaign Monitor blog - Pens guides, including the Guide to Responsive Email Design, Guide to CSS in email, Smashing Magazine contributor
- - Embedded in this 'black art' for close to 9 years now, including managing email marketing operations for CBS Interactive’s direct marketing division - Struggles with Outlook. Every day.
- My love is email design and creating experiences that are so consistent with subscribers assumptions when it comes to branding, navigation etc, that they go unseen. This is my goal and why I am excited by responsive email design and creating mobile-friendly email newsletters in general.
- - 1997 - First ‘microbrowser’ shipped with AT&T phones - 2000 - First mobile touch screen came about (Motorola) - 2001 - First monochromatic display, following year the first color display (Nokia) - From there, a lot of devices emerged, each with their own idea of what ‘mobile web’ was all about. - Solutions like HDML/WAP made it possible for content creators to build sites that could be navigated on Nokias and Motorolas et al - HTML email did not exist beyond desktop and webmail clients. - Nokia had a stranglehold on the market http://en.wikipedia.org/wiki/Mobile_browser http://www.hongkiat.com/blog/evolution-of-m obile-phones/
- - Alongside hardware advances, better mobile browsers like Opera Mini - For designers and marketers, ‘mobile-optimization’ generally involved creating separate mobile sites (eg. http://mobile.msn.com ) - hard, very unsexy - Old-school idea of separating desktop and mobile web content, eg. .mobi sites - Consumers were generally limited to browsing these mobile sites, due to navigational difficulties with regular web content - High cost of data was a problem ( http://en.wikipedia.o rg/wiki/Mobile_Web ) - Email was still p lain-text or nothing
- On the web... - During this time, a lot of content was trying too hard to squeeze into small spaces. Convincing people to visit your web presence on a device was futile if you didn’t have a separate mobile site. - Techniques for 'adapting' content to to a variety of conditions, like screen resolution, dimensions etc. were first proposed in 1994 ( http://en.wikipedia.org/wiki/Media_queries ). - However, wasn’t until 1999 that first drafts for formally implementing CSS3 properties (ie. responsive email code) were released (http://en.wikipedia.org/wiki/Cascading_Sty le_Sheets#CSS_3) - Support for responsive techniques slow ly emerged on both mobile and desktop browsers
- On email... - Email-enabled mobile devices entered the market (Nokia in 1996, BlackBerry in 1999). Plain-text only. - Mobile HTML email clients began to appear on PDAs, in step with developments on the mobile and desktop web. But emails were largely ‘dumbed down’ - 2007 - iPhone shook up the smartphone market, combining both phone + PDA features and making HTML email, 3G data and WiFi connectivity ‘must-haves’ - Blackberry did not introduce HTML email support until OS 4.5 in Jan, 2008 ( http://www.labnol.org/gadgets/phones/download-blackberry-os-45-software-upgrade-html-email-microsoft-office/2200/ )
- - In the years that followed, the web was finding its feet - Skip forward to 2010, Ethan Marcotte coins the term in 'Responsive Design', A List Apart - A new design discipline was born - That said, Internet Explorer didn’t provide responsive technique support until May, 2011 (IE9) http://alistapart.com/article/responsive-web-design Intro: Designing for almost every device History of the responsive email movement Case for optimising campaigns Planning campaigns with a mobile mindset Along the way, examples of good campaigns
- - Email community found that techniques for adapting content for optimal viewing could be applied equally to our craft - We published our first article on responsive design in April, 2010 (Dave Greiner) http://www.campaignmonitor.com/blog/post/3116/what-you-can-learn-from-panics-email-marketing/
- Responsive content example - email newsletter from REI. Left, desktop and webmail view. Right, mobile version. Not two separate campaigns (even if that was possible). Photo credit: http://blog.lyris.com/us/email-inspiration-six-great-responsive-email-designs/
- The two-version thing aside, why optimize? Mobile is not going to go away. In fact, mobile email client usage is growing, in step with, or even faster than mobile web usage.
- " Mobile browsing is expected to outpace desktop-based access within three to five years . " - Ethan Marcotte, 2010 - Happened mid-2012 in China ( http://www.bbc. co.uk/news/technology-18900778 ) - Set to happ en in the US by 2014 ( http://www.smartinsights.com/mobile-marketing/mobile-marketi ng-analytics/mobile-marketing-statistics/ )
- We found mobile email usage overtook both desktop and webmail in May, 2012 Comscore independently reported in 1 year (Nov, ’09 - ’10): -7% Visitors to Web-based email sites declined +36% Visitors accessing email on mobile devices increased http://www.comscore.com/Insights/Press_Releases/2011/1/Web-based_Email_Shows_Signs_of_Decline_in_the_U.S._While_Mobile_Email_Usage_on_the_Rise
- - iOS Mail is now the most popular email client, ~36% recordable opens amongst our customers (Sept, 2012)
- “Designers who want to apply the same techniques (and flexibility) that they enjoy on the web, to email” h ttp://www.campaignmonitor.com/guides/mobile/design/
- Marketers who see the rapid growth of mobile as an opportunity to connect to their most valuable customers http://www.campaignmonitor.com/blog/post/3856/is-responsive-email-design-really-worth-it
- Email recipients who want to read their emails on any screen 'Mobile Email Newsletters ', Jakob Nielsen's Alertbox, October 22, 2012" http://www.campaignmonitor.com/blog/post/3856/is-responsive-email-design-really-worth-it https://twitter.com/colingreig/status/304972092057743360
- - Rapid growth in mobile email readership (now 40%) - Since optimizing their newsletters for mobile, Thrillist have seen an uptick in clickthroughs http://www.mediapost.com/publications/article/192519/thrillist-makes-newsletter-mobile-friendly.html# axzz2KeAU5jPn
- - Mobile optimization involves both design and technical decisions. - Even if you aren’t a coder, you can take a mobile-first approach to campaign planning - Lets look at some mobile-friendly campaigns.
- VPC (narrow width): http://www.campaignmonitor.com/gallery/entry/3875/volunteer-park-cafe
- Chef Anahita (large type): http://www.campaignmonitor.com/gallery/entry/3592/chef-anahita
- Panic software (responsive techniques): http://gallery.campaignmonitor.com/ViewEmail/y/96C5CD5C7CABE7BA/
- - ⅔ of these campaigns did not specifically use responsive email code - but 3/3 were designed with mobile in mind. - Don't think that lots of code and hacks are necessarily needed to create a mobile-friendly campaign We’ll be looking at the techniques for creating effective designs, media queries or no.
- ... is 80% good design and content curation.
- Hands up! - What % are using mobile devices to view your campaigns? Which devices are they using? - Email client usage reports can be found on pretty much every platform.
- - If you haven't looked already, it will likely be a bit of a shock to you. - Litmus: 15% on mobile - Outlook, Apple Mail and Gmail are top 3 - Our newsletter - 20.5% of subscribers using iOS devices, 1.5% on Android - Panic (above, our customer) - 38% - Is there a case for optimizing newsletters for all 3 accounts - yes. - How about you?
- - Create benchmarks - what's your average open, click, conversion % now? - Necessary to make measurable improvements in your design
- Most important step in planning process
- - mobile users are fickle, have short attention spans - Make content scannable - keep it ultra-short - iPhone and Android users spend less time on sites, view fewer pages and bounce more than regular web users "…the average time allocated to a newsletter after opening it was only 51 seconds. “Reading” is not even the right word, since participants fully read only 19% of newsletters. The predominant user behavior was scanning. Often, users didn’t even scan the entire newsletter: 35% of the time, participants only skimmed a small part of the newsletter or glanced at the content." http://www.nngroup.com/articles/email-newsletters-inbox-congestion/ http://www.webperformancetoday.com/2012/01/20/interesting-new-findi ngs-about-page-views-time-on-site-and-bounce-rate-across-browsers-and-platforms/ "We've known for 14 years that it's best to be concise when writin g for the Web. Mobile simply reinforces this point and stretches it to the limit. Short is too long for mobile. Ultra-short rules the day."- http://www.nngroup.com/articles/defer-secondary-content-for-mobile/Also: http://www.campaignmonitor.com/blog/post/3766/what-email-designers-can-learn-from-the-responsive-webhttp://www.campaignmonitor.com/blog/post/ 3541/designing-ultra-short-emails-for-mobile-using-progressive-disc losure/
- - Like the web, we should look at using type and text to convey the message - Type survives image-blocking, keeps load times to a minimum, degrades well. Looking at a string of recent releases from individuals, startups and agency clients it feels like there’s an emerging aesthetic that is very stripped back, focused on typography and blocks of simple content that can be easily moved... - " The responsive web will be 99.9% typography ", WelcomeBrand.co.uk ( http://www.welcomebrand.co.uk/thoughts/the- responsive-web-will-be-99-9-typography/ )
- - Create content with selective attention in mind - Make links and calls-to-action immediately obvious (and use type!) "Users don't look around much. They often stay highly focused on the screen section that they're engaging with or that they assume contains the answer to their problem."( http://www.campaignmonitor.com/blog/post/3808/tackling-selective-attention-and-tunnel-vision-in-email-design )
- vTalk - concise message, minimalist aesthetic
- Swellcast - strong CTAs as text, beautiful imagery http://www.campaignmonitor.com/gallery/entry/3914/swellcast
- You should always ask yourself these questions. Having good content is the most important contributor to the success of an email campaign
- Develop a mobile mindset
- In other words, assume now that you get only one shot at getting your email read, and it had better render correctly and deliver its message on any screen size. - Loren McDonald http://www.silverpop.com/blogs/email-marketing/mobile-email-strategy.html
- We’ve covered the design best practice. However, with responsive techniques, you can adapt content specifically for conditions, like display size and resolution.
- Optimizing with responsive techniques allow you to: - remove visual clutter (ie. hide what you don’t need) http://mailtools.dispatchwire.com/t/r-35B56F744355BEC8 - Adjust layouts and elements to fit into small viewports - also...
- - Make text more readable - Create bespoke experiences for mobile Pictured: Campaign Monitor newsletter (with responsive techniques applied right)
- - Challenge: With mobile networks is that you cannot rely on fast download speeds. - ‘Data-hogs’ like large images will result in a newsletter being trashed. http://www.webperformancetoday.com/2012/01/20/interesting-new-findings-about-page-views-time-on-site-and-bounce-rate-across-browsers-and-platforms/
- 1. Viewport dimensions that are often on the small side (ie. phones)2. Buttons, links and content that are not as easy to use on touch screens as they are on other displays 3. Easy vs. hard link placement http://www.campaignmonitor.com/blog/post/3917/mobile-touch-ergonomics-links-in-email-newsletters
- one handed—49%cradled—36%two handed—15% Green - easy zone Red - hard zone http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
- Windows Phone UI Design and Interaction Guide - http://go.microsoft.com/?linkid=9713252 “ Touc h Target Sizes ” http://www.lukew.com/ff /entry.asp?1085
- http://www.campaignmonitor.com/blog/post/3766/what-email-designers-can-learn-from-the-responsive-web
- - Finally, we’re going to move on to media queries. “ The media query is the ringmaster of responsive design. It lets us establish the rules of the game and gives us what we need most: control. ” - http://24ways.org/2012/redesigning-the-media-query/
- Provide control over positioning of content, like in earlier REI example.
- http://mobile.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/
- http://mailtools.dispatchwire.com/t/r-35B56F744355BEC8
- - However, media queries aren’t the be-all and end-all - They do rely on the designer having criteria in mind, ie. fixed viewport dimensions - Many designers prefer a hybrid approach, or no media queries at all
- - Panic software use a hybrid approach, to create newsletters that stretch to the viewport width http://gallery.campaignmonitor.com/ViewEmail/y/96C5CD5C7CABE7BA/
- - Use div as a container for all content - Div expands with the width of the viewport (show example)
- Variable support amongst email clients http://www.campaignmonitor.com/guides/mobile/ http://stylecampaign.com/blog
- Shifting landscape, with Windows picking up, then dropping support
- You don't need to be a codernaut to optimize your campaigns for mobile. T here are off-the-shelf services to help you build mobile-ready campaigns.
- Designers & agencies are accustomed to using templates
- Campaign Monitor’s template builder and free templates (with responsive code built-in) were used to create the following newsletters....
- Sass Design: http://www.campaignmonitor.com/gallery/entry/3793/sass-design
- Eyetoons: http://www.campaignmonitor.com/gallery/entry/3889/eyetoons
- Techsured: http://www.campaignmonitor.com/gallery/entry/3943/techsured
- Campaign Monitor template builder: http://campaignmonitor.com/templates Mailchimp template builder: http://mailchimp.com/features/ Zurb's responsive templates: http://w ww.zurb.com/playground/responsive-email-templates
- - The responsive email movement is still in its early days- Hope to see more email clients supporting responsive techniques
- Question time!