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.

eMarketer Webinar: Responsive Design—A Solution for Publishers, a Question for Marketers


Published on

Join eMarketer's Catherine Boyle as she discusses how responsive web design is addressing the challenge of device fragmentation by dynamically adjusting content and brand messages to fit the screen of any internet-enabled device.

Published in: Technology, Design

eMarketer Webinar: Responsive Design—A Solution for Publishers, a Question for Marketers

  1. 1. ©2013 eMarketer Inc. Responsive Design— A Solution for Publishers, a Question for Marketers Catherine Boyle Senior Analyst Sponsored by: J U L Y 2 5, 2 0 1 3
  2. 2. ©2013 eMarketer Inc. Key questions to address today: Why all the buzz? What is responsive design? Where and how is responsive design used? What are its benefits and challenges? How does response design affect display advertising? Twitter – #eMwebinar
  3. 3. ©2013 eMarketer Inc. Simply put, responsive design is… …a device-agnostic solution for serving content to devices of all types and sizes
  4. 4. ©2013 eMarketer Inc. With responsive design, devices are facets of a single content experience “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat [the devices] as facets of the same experience.” —Ethan Marcotte, web designer and developer credited with producing the roadmap for responsive design
  5. 5. ©2013 eMarketer Inc. Nielsen contends multiscreen viewing is the new norm among US screen users Multiscreen Total 133.8 168.5 172.8 169.2 106.7 Twitter – #eMwebinar
  6. 6. ©2013 eMarketer Inc. Web traffic is becoming increasingly mobile. In some industries, the share of traffic from smartphones and tablets has passed the 20% mark 22.1% 20.8%
  7. 7. ©2013 eMarketer Inc. Across the board, publishers are seeing mobile traffic increase “About 24% to 25% of our audience is on smartphones, and another 7% to 10% in any given month is on tablets.” —Grant Whitmore, vice president of digital for Hearst Magazines “Total smartphone and tablet traffic is now 28% of’s site unique visitors.” —Craig Ettinger, general manager of “In August 2011, 1.5% of our web audience was from tablet and phone browsers. Over the 2012 Christmas holidays and winter storm events, 15% of our traffic came from those browsers.” —Mike Finnerty, vice president of product for The Weather Company
  8. 8. ©2013 eMarketer Inc. 40% of US email messages are opened on mobile devices. Mobile’s share is projected to pass the 50% mark this year
  9. 9. ©2013 eMarketer Inc. The number of US smartphone users is expected to increase by 48% over the next 4 years. The US tablet-using population will increase by 45%
  10. 10. ©2013 eMarketer Inc. Device fragmentation is a problem for publishers and marketers Twitter – #eMwebinar
  11. 11. ©2013 eMarketer Inc. The majority of mobile devices used worldwide fall into five size categories Most Widely Used 70% of Android devices 74% of iOS devices 100% of Windows devices Source: Flurry Analytics, April 2, 2013
  12. 12. ©2013 eMarketer Inc. But the number and types of screens is quickly expanding
  13. 13. ©2013 eMarketer Inc. Creating an optimal cross-screen experience is a major challenge Twitter – #eMwebinar
  14. 14. ©2013 eMarketer Inc. Building and maintaining device- specific websites and email templates is unsustainable “I’m a web designer, not a miracle worker!”
  15. 15. ©2013 eMarketer Inc. Responsive design is a not a technology, it’s a design technique Responsive design uses one set of HTML for all platforms, which allows websites to have a single-URL framework. Fluid grids, fluid media and CSS3 media queries are used to automatically rearrange and resize content to fit the viewport of any device used to access the site. Twitter – #eMwebinar
  16. 16. ©2013 eMarketer Inc. Viewport breakpoints are set and when passed through, the layout rearranges Breakpoint 1 Breakpoint 2 Breakpoint 3 Breakpoint 4 Fluid in-between viewportviewportviewportviewport Fluid in-between Fluid in-between
  17. 17. ©2013 eMarketer Inc. Email marketers are leveraging responsive design to achieve scale “The average marketer is asking themselves, ‘How many templates do I have to design? How do I deliver them?’ Responsive design is really the only way to make that scale.” —Shawn Myers, vice president of marketing for StrongView (formerly StrongMail) “If a company is already into the 50% to 60% [mobile email-open range] they’re definitely retooling and going all in with responsive design.” —Melinda Krueger, senior marketing consultant for ExactTarget Twitter – #eMwebinar
  18. 18. ©2013 eMarketer Inc. Responsive email templates are more effective for some brands saw a 15% to 17% increase in open rates and a 21% to 24% increase in clickthrough rates
  19. 19. ©2013 eMarketer Inc. Responsive design is in a nascent state, but its popularity is growing Starbucks Disney Google (corporate) Microsoft The Weather Company ESPN Over the past two years several global brands and large-scale publishers have launched responsive websites or responsive pages, including: The Boston Globe AOL Time Hearst IDG
  20. 20. ©2013 eMarketer Inc. Aside from mobile traffic volume, other factors influencing the use of RD include: The launch of a new site or when contemplating a redesign of an existing one Hosting separate sites for desktop and mobile users Being heavily reliant on display ad revenue Responsive design presents different challenges in each case … Twitter – #eMwebinar
  21. 21. ©2013 eMarketer Inc. Launching a website using responsive design (the best-case scenario) Town and Country Magazine Twitter – #eMwebinar
  22. 22. ©2013 eMarketer Inc. Merging desktop and mobile sites (not always easy, but clear benefits exist) Time Magazine
  23. 23. ©2013 eMarketer Inc. Responsive in parts (a less risky way to test the approach) The Weather Company – Video Separate site for mobile phones
  24. 24. ©2013 eMarketer Inc. Key benefits cited by those using responsive design: One responsive site is easier to maintain than separate desktop and mobile sites or templates. Consolidated link equity leads to better organic search rankings. Search traffic is not split between and URLs. Social sharing of content is more user-friendly, as a responsive site shared on Facebook, Twitter or any other social site will render properly on desktop and on mobile devices. Twitter – #eMwebinar
  25. 25. ©2013 eMarketer Inc. Responsive websites: Key performance indicators are positive “The responsive sites are providing better experiences and KPIs than the mobile sites that are part of the rest of the [Hearst] network.” —Grant Whitmore, vice president of digital for Hearst Magazines “Non-desktop traffic to is up 50% more than [which does not have a responsive design framework yet].” —Jeff Moriarty, vice president of digital products for The Boston Globe “[After implementing RD] visitors increased across the board. The mobile bounce rate decreased by 26% and pages per visit from mobile users was up 23%.” —Craig Ettinger, general manager of
  26. 26. ©2013 eMarketer Inc. Factors to consider when implementing responsive design: Some older mobile browsers do not support CSS media queries, including earlier versions (two versions back) of the BlackBerry Browser, Chrome for Android, Firefox for Android and Opera Mini. The current versions of the major desktop and mobile browsers do support CSS3 media queries, as do each of their last four iterations. A default design—mobile or desktop—needs to be established. The direction taken has implications for site structure and performance. A mobile default (or “mobile first” approach) promises faster load times. Twitter – #eMwebinar
  27. 27. ©2013 eMarketer Inc. Data bloat is a common mistake made with responsive design The majority of responsive sites deliver as much data to mobile devices as they do to traditional computers. Load times can suffer as a result
  28. 28. ©2013 eMarketer Inc. For smartphone and tablet users, site load times rank as the most important factor for determining whether a mobile website is “good”
  29. 29. ©2013 eMarketer Inc. Serving display ads to a responsive site is a challenge “The ad server isn’t as good yet at handling responsive design approaches as it ought to be. The fundamental capabilities are there, they’re just not as accessible as we would like them to be.” —Marcel Gordon, product manager for Google Ad servers have not evolved far enough to work seamlessly with responsive sites.
  30. 30. ©2013 eMarketer Inc. Ad tags can be troublesome Because a responsive page is serving to a whole range of devices, the publisher has to think about when the transition between desktop and mobile tags will be. If, for example, the default version of a page has one ad slot but the developer has designated six breakpoints to trigger a layout change, that page might require six tags if a different ad size is required at each breakpoint. If a publisher wants to implement those [breakpoint] layout changes and modify the ad size at the same time, extra code needs to be written into the ad tag. “Smart tags” are emerging that will help reduce this complexity, but at this point workarounds are still required.
  31. 31. ©2013 eMarketer Inc. Publishers are attempting to establish 1-to-1 relationships for ads across screens “You might want to say, ‘OK, when the user is on my site from the web browser, then serve a regular IAB standard ad,’ and then when they’re on their tablet you serve an equivalent ad.” —Diaz Nesamoney, president and CEO of interactive video advertising platform Defining what “ad equivalence” means across screens is the challenge. Some publishers define it as ads that are similar in design and functionality on all screens. Others define it as ads with similar placement/viewability on all screens.
  32. 32. ©2013 eMarketer Inc. Is it time for responsive ads? Responsive ads change as the screen size changes. The size of the ad, as well as the content, interaction and call to action, can change based on the screen size. There isn’t a burning need for brand marketers to change to responsive ads, as publishers are implementing workarounds to ensure static ads work seamlessly. Because responsive ads change based on screen size only, marketers express concern that responsive ads fail to take viewers’ context into account. Twitter – #eMwebinar
  33. 33. ©2013 eMarketer Inc. Conclusions: 1. The proliferation of web-enabled devices creates a strong business case for RD. 2. On the whole, publishers that have launched responsive sites and email are pleased with their results. 3. Ad serving systems are not fully ready for responsive sites. However, ad servers are likely to evolve quickly to relieve the “workaround” burden. 4. Marketers worry responsive ads won’t provide contextual targeting. For now, advertisers prefer to stay with fixed ads and publishers seem happy to accommodate them. Twitter – #eMwebinar
  34. 34. Adobe Experience Manager Browsers & Apps
  35. 35. Adobe Experience Manager Ideal experience for available bandwidth
  36. 36. © 2013 Adobe Systems Incorporated. All Rights Reserved. Connect with us to learn more +1.800.309.9301 Follow us @AdobeWEM
  37. 37. ©2013 eMarketer Inc. Q&A Session Responsive Design— A Solution for Publishers, a Question for Marketers Sponsored by: Adobe You will receive an email tomorrow with a link to view the deck and webinar recording. Catherine Boyle Learn more about digital marketing with an eMarketer corporate subscription Around 200 eMarketer reports are published each year. Here are some recent reports you may be interested in: Responsive Design: A Solution for Publishers, a Question for Advertisers Ad Verification: Validating Brand Safety and Ensuring Quality Impressions Key Digital Trends for Midyear 2013: The Fragmentation of Mobile Multichannel Attribution: What Retailers Need to Know Mobile Display Ad Types: Move Over Banner Ads, You’ve Got Company To learn more: 800-405-0844 or