Top Banner
©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
38

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

Sep 12, 2014

Download

Technology

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: eMarketer Webinar: Responsive Design—A Solution for Publishers, a Question for Marketers

©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

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

©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

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

©2013 eMarketer Inc.

Simply put, responsive design is…

…a device-agnostic solution for serving content to devices of all types and sizes

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

©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

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

©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

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

©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%

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

©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 Time.com’s site unique visitors.” —Craig Ettinger, general manager of Time.com

“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

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

©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

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

©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%

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

©2013 eMarketer Inc.

Device fragmentation is a problem for publishers and marketers

Twitter – #eMwebinar

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

©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

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

©2013 eMarketer Inc.

But the number and types of screens is quickly expanding

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

©2013 eMarketer Inc.

Creating an optimal cross-screen experience is a major challenge

Twitter – #eMwebinar

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

©2013 eMarketer Inc.

Building and maintaining device-specific websites and email templates is unsustainable

“I’m a web designer,

not a miracle worker!”

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

©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

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

©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

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

©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

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

©2013 eMarketer Inc.

Responsive email templates are more effective for some brands

Careerbuilder.com saw a 15% to 17% increase in open rates and a 21% to 24% increase in clickthrough rates

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

©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

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

©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

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

©2013 eMarketer Inc.

Launching a website using responsive design (the best-case scenario)

Town and Country Magazine

Twitter – #eMwebinar

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

©2013 eMarketer Inc.

Merging desktop and mobile sites (not always easy, but clear benefits exist)

Time Magazine

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

©2013 eMarketer Inc.

Responsive in parts (a less risky way to test the approach)

The Weather Company – VideoSeparate site for mobile phones

m.weather.com

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

©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 m.dot and www.com 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

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

©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 Bostonglobe.com is up 50% more than Boston.com [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 Time.com

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

©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

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

©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

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

©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”

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

©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.

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

©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.

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

©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.

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

©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

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

©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

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

Adobe Experience Manager

Browsers & Apps

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

Adobe Experience Manager

Ideal experience for available bandwidth

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

© 2013 Adobe Systems Incorporated. All Rights Reserved.

Connect with us to learn more

adobe .com/go /aem

ente rpr iseADM@ado be .c om

+1 .800 .309 .9301

Fo l low us @AdobeWEM

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

©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: www.emarketer.com/products

800-405-0844 or [email protected]