The document discusses responsive design as a method for optimizing content delivery across various devices, highlighting its growing relevance due to increasing mobile traffic and device fragmentation. It outlines the benefits, such as easier maintenance and improved user experience, along with challenges in implementing responsive design in advertising. Additionally, it emphasizes the need for adaptable ad serving systems to fully leverage the advantages of responsive design in marketing.

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. ©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. ©2013 eMarketer Inc.
Simply put, responsive design is…
…a device-agnostic solution for serving
content to devices of all types and sizes

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

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. ©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. ©2013 eMarketer Inc.
Device fragmentation is a problem for
publishers and marketers
Twitter – #eMwebinar

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. ©2013 eMarketer Inc.
But the number and types of screens is
quickly expanding

13. ©2013 eMarketer Inc.
Creating an optimal cross-screen
experience is a major challenge
Twitter – #eMwebinar

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

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. ©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. ©2013 eMarketer Inc.
Launching a website using responsive
design (the best-case scenario)
Town and Country Magazine
Twitter – #eMwebinar

22. ©2013 eMarketer Inc.
Merging desktop and mobile sites (not
always easy, but clear benefits exist)
Time Magazine

23. ©2013 eMarketer Inc.
Responsive in parts (a less risky way to
test the approach)
The Weather Company – Video
Separate site for mobile phones
m.weather.com

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

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

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

35. Adobe Experience Manager
Browsers & Apps

36. Adobe Experience Manager
Ideal experience for available bandwidth

37. © 2013 Adobe Systems Incorporated. All Rights Reserved.
Connect with us to learn more
adobe.com/go/aem
enterpriseADM@adobe.com
+1.800.309.9301
Follow us @AdobeWEM

38. ©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 webinars@emarketer.com