responsive-web-design-and-advertising_e-book

About ResponsiveAds
ResponsiveAds, Inc. is the publishing and advertising industries’ first responsive web advertisingfocused
company, built from the ground up to best serve new challenges in multi-screen design
and monetization. Its innovative, patent-pending technology STRETCH gives publishers and
brands a solution to the mobile advertising problem as a one-ad-creative, one-ad-tag solution to
seamlessly scale, save costs and enable transmedia storytelling that maximizes cross-screen
attribution (from desktop to tablet and mobile). ResponsiveAds is offering a suite of products and
professional services targeting multi-screen advertising for revenue acceleration across all screens.
It is working with industry groups such as the IAB (Interactive Advertising Bureau) to develop
these new industry ad format standards. The company is comprised of mobile and online
advertising technology experts passionately looking to solve the problems of convergence and
monetization of media. Visit us at www.responsiveads.com and on our Facebook, Twitter,
Google+ and blog pages. Join the conversation now using Twitter hashtag
#responsivenowandhow.
Legal Disclosure
ResponsiveAds and ResponsiveAds logos and images are trademarks of ResponsiveAds, Inc., in
the United States and other countries. Third-party trademarks and third-party information
mentioned as source are the property of their respective owners. The use of the word partner or
indication of third parties does not imply a partnership relationship between ResponsiveAds and
any other company in this document.
3

Table of Contents
GLOSSARY ................................................................................................................................................................................. 6
INTRODUCTION ....................................................................................................................................................................... 8
RESPONSIVE DESIGN: CAPITALIZING THE MOBILE WEB....................................................................................... 12
HOW TO GET THERE: RESPONSIVE DESIGN .............................................................................................................................. 13
HOW IT WORKS ........................................................................................................................................................................ 13
MOBILE FIRST .......................................................................................................................................................................... 14
Cost vs. Native Apps ........................................................................................................................................................... 16
Future-Friendly .................................................................................................................................................................. 17
RESPONSIVE DESIGN CHALLENGES .......................................................................................................................................... 17
MOBILE FIRST OR MOBILE TOO? ............................................................................................................................................. 17
TECHNOLOGY .......................................................................................................................................................................... 18
EMPLOYEES ............................................................................................................................................................................. 19
HAVING THEIR SAY: EXPERTS WEIGH IN ON RESPONSIVE DESIGN ................................................................... 20
FOCUS ON PERFORMANCE ........................................................................................................................................................ 20
BLOG MORE ............................................................................................................................................................................. 20
PROTOTYPE, PROTOTYPE, PROTOTYPE ..................................................................................................................................... 21
USE FRAMEWORKS AND PLUGINS WISELY............................................................................................................................... 21
FOCUS ON CONTENT ................................................................................................................................................................ 22
EXPERTS’ FINAL REMARKS ...................................................................................................................................................... 22
RESPONSIVE ADVERTISING: MONETIZATION ACROSS SCREENS ........................................................................ 24
WHERE TO START? THE NEW OPPORTUNITY VS. RETROFITTING ............................................................................................. 24
SELLING BUNDLES VS. MEDIATED AD NETWORK FILLS .......................................................................................................... 25
NATIVE ADVERTISING ............................................................................................................................................................. 26
STREAMLINING AD SALES ....................................................................................................................................................... 26
A CULTURAL CHANGE ............................................................................................................................................................. 27
HOW DOES IT FIT? THE PUBLISHER’S RESPONSIVE AD DILEMMA ........................................................................................... 27
THE RESPONSIVE ADVERTISING SOLUTIONS ............................................................................................................. 28
PRE-RESPONSIVE WEB DESIGN (THE RISE OF THE SEPARATE CHANNEL) ................................................................................ 28
DIFFERENT PUBLISHERS ENGAGING RESPONSIVE WEB DESIGN .............................................................................................. 30
SWAP: RETROFITTING (SOLUTIONS 1, 2, 3) ......................................................................................................................... 31
Solution 1: SWAP Framework (Responsive Ad Framework Technology or RAFT) ....................................................... 31
Solution 2: SWAP Incorporated in the Third-Party Ad Tag or Network Tag ................................................................. 33
Solution 3: SWAP Incorporated in the First-Party Ad Tag (Ad Servers) ....................................................................... 35
STRETCH: HTML5 CLOUD-HOSTED RESPONSIVE AD CREATIVE SOLUTION ..................................................................... 36
Solution 4: The Responsive Ad Creative (One Creative That Works Everywhere) ............................................................. 36
FLOW-LINES ........................................................................................................................................................................ 40
STRETCH Ad Flow-Line Types................................................................................................................................... 42
A. Fit to Ad Slot ............................................................................................................................................................................ 43
B. Responsive Flow Type ............................................................................................................................................................. 44
C. Custom ...................................................................................................................................................................................... 45
4

PUBLISHER COLLABORATIVE PROCESS TOGETHER WITH AGENCIES ........................................................................................ 45
Collaboration with SWAP-Type Solutions ...................................................................................................................... 45
Collaborating with STRETCH-Type Solutions ............................................................................................................... 46
STRETCH EXAMPLES (LOCAL PUBLISHERS) ........................................................................................................... 47
BUNDLED FOR SELLING ABOVE THE FOLD ............................................................................................................................... 47
Times-Herald ...................................................................................................................................................................... 47
Bryan Broadcasting — Radio Station Peace 107.7 ............................................................................................................ 48
DESIGNING FOR BEAUTY (SIMPLE ADS THAT FIT INTO THE SITE DESIGN) ............................................................................... 48
Edible Vineyard .................................................................................................................................................................. 48
The Buzz Book ..................................................................................................................................................................... 49
RICH MEDIA PUSHDOWN LEADERBOARDS ............................................................................................................................... 49
21Jump Street (Sony Pictures) ............................................................................................................................................ 49
SKINS AND BACKDROP AD TYPES ............................................................................................................................................ 50
UpTweet and ZYR Vodka .................................................................................................................................................... 50
THE OPPORTUNITY .............................................................................................................................................................. 51
5

Glossary
Ad server: A web server dedicated to the delivery of advertisements. This specialization enables tracking
and management of advertising-related metrics. In most cases there are dedicated ad servers for publishers
and agencies. Publisher ad servers are sometimes called first-party ad servers, and agency ad servers used to
package third-party tags.
Ad mediation: Defines a process through which different ads or third-party tags are delivered or rotated to
have the most relevant ad delivered to its target location. Many ad networks run ads that are delivered in
this fashion.
Attribution or attribution model: In advertising, this model allows marketers to look at the campaign of
ads that contribute to a sale or conversion over an extended period of time. Instead of the traditional method
of crediting a sale or conversion to the last ad clicked or viewed, an attribution model attributes credit to
each ad or “touch point” within the sales funnel.
Breakpoint: A term used in Responsive Web Design to define where the site breaks via viewport size.
CP[ ]: Cost-per-item is a metric for measuring advertising and a common method for defining different
values of an ad campaign, such as:
CPM: A way to measure advertising by impression — cost-per-thousand (mille) impressions;
CPC: cost-per-click;
CPL: cost-per-lead; or
CPA: cost-per-action or acquisition.
CTR: The click-through rate or measure of effectiveness of an ad impression.
DSP: Demand Side Platform, or platform where agencies or brands look for supply (publisher inventory or
network inventory) to fill their demand.
eCPM: The effective cost-per-one thousand impressions — when media is not necessarily sold as a CPM,
but rather measured by the total number of impressions earned via CPA, CPC, CPL to give an effective
value of that CPM of the campaign.
Flow-line: A set of rules associated with the Responsive Creative that defines the way a Responsive Ad
Creative changes its size and shape for different screen sizes or device types.
First-party ad tag: Also referred to as “publisher ad tag,” a first-party ad tag is software code that
comes from the primary ad server (for publishers) that is placed into the code of the website. This ad tag
calls the ad server for third-party tags or creatives for the purpose of displaying an advertisement. Different
ad server companies have different architectures for first-party ad tags. They can be JavaScript tags with or
without an iFrame for the ad placement. Before Responsive Web Design, they were defined separately for
mobile, tablet and desktop in web and native applications.
6

Network ad tag: A snippet of code a publisher puts on the website to serve advertisements sourced from a
network – for example, Google AdSense. The publisher does not need to operate an ad server to run the ads
on the site.
ResponsiveAd Creative: STRETCH and SWAP.
Third-party ad server: Independent outsourced companies that specialize in managing, maintaining,
serving, tracking and analyzing the results of online ad campaigns. They deliver targeted advertising
tailored to consumers' provided or predicted characteristics or preferences. A third-party ad server can also
be considered the advertiser’s ad server.
Third-party ad tag: Also referred to as “ad tag,” a third-party ad tag is software code that an advertiser
provides to a publisher or ad network that calls the advertiser’s ad server (third-party ad server) for the
purpose of displaying an advertisement.
Uber tag: An expression used to describe a first-party tag that can automatically pull up all types of ads in
various shapes and sizes.
7

Introduction
As more and more people are consuming content (e.g. news) on devices with different screen sizes
– from smartphones to tablets to desktops to TVs – publishers cannot afford to not embrace
Responsive Web Design and implement Responsive Advertising solutions now. In short,
responsive design (more on pages 12-19) provides an
optimal website experience for readers no matter the
device. But don’t take our word for it that crossscreen
news consumption is skyrocketing. Listen to
the Pew Research Center, eMarketer and Mary
Meeker.
from both.
Pew Report: Multi-Screen
Gaining Momentum
A 2012 report by the Pew Research Center’s Project
for Excellence in Journalism shows that 60 percent of
tablet owners would rather get their news on the
mobile web, 23 percent through native apps and 16
percent from both. The report also reveals that 61
percent of smartphone owners read the news through
a browser, 28 percent via native apps and 11 percent
In addition, the study found that the release of new devices and formats is leading news consumers
to read content on multiple screens – and in print. It concluded that 54 percent of tablet news users
also read news on a smartphone; 77 percent check out news on a desktop or laptop; 50 percent also
read in print; and 25 percent read the news on all platforms. When it comes to smartphone news
users, 47 percent also read the news in print, 75 percent consume news on a laptop or desktop
computer, and 28 percent also view news on tablets.
The Pew report also established that mobile news consumers who use both smartphones and
tablets are more engaged.
Additionally, figures from the report show that 82 percent who use both types of devices are more
likely to read longer articles, compared to 62 percent who only view the news via tablet. The
numbers reveal that dual-device mobile news users are more likely to pay for online news content.
When it comes to advertising on mobile devices, 49 percent of tablet news users and 50 percent of
smartphone news users “sometimes or often” notice ads on their mobile devices. Additionally,
8

about 15 percent of mobile news consumers click on ads while reading the news, and 7 percent
purchase a product after clicking through.
News consumption on laptops and desktops is sometimes still preferable, according to the report.
Forty-one percent of mobile users would rather use a traditional computer for reading the news, 25
percent prefer tablets, then print, then smartphones.
“This is a shift from the very early adopters surveyed in 2011 who showed strong passion for their
new devices, and it may speak to both the broadening population and a natural settling down as the
‘newness’ factor wears off,” says an analysis of the report on Pew’s website.
eMarketer Report: Native Advertising Helps Grow Mobile Ad Spending
A report released by eMarketer in
December 2012 shows that spending
on display, search and message-based
ads is growing much quicker than
previously anticipated due, in part, to
the rise of native advertising.
Native advertising (such as sponsored
content) usually blends in with other
website content and is more relevant
based on data such as demographics.
(See much more on Page 26).
According to eMarketer, mobile ad
spending was predicted to increase 180
percent to more than $4 billion in
2012. This is dramatically higher than
eMarketer’s September 2012 analysis
that predicted 80 percent growth to
$2.61 billion. eMarketer is also forecasting that mobile ad spending in the United States will reach
$7.19 billion in 2013 and $21 billion by 2016. It’s worth noting that revenue from mobile ads
currently only makes up 2.4 percent of total advertising spending. eMarketer is predicting that
number will grow to 11 percent by 2016.
These numbers emphasize the importance for publishers to deploy cross-screen content and
monetization strategies.
9

Mary Meeker: eCPM for Mobile is Low
According to the “Internet Trends 2012” report by Mary Meeker, investment partner at Kleiner,
Perkins, Caufield & Byers, while mobile traffic is rising quickly, eCPM for mobile is not. eCPM
for desktop is $3.50, five times higher than mobile, which sits at just 75 cents.
This means that while mobile traffic is increasing, publishers’ eCPM is decreasing, leaving them
particularly vulnerable.
The Good News
The good news is that publishers who implement responsive design and advertising solutions, such
as ResponsiveAds’ STRETCH and SWAP (see Pages 31 - 36), can drive revenue acceleration
across all screens through bundling, selling overall ad traffic inventory as one package and
converting ads into HTML5 Responsive Advertisements.
These solutions allow the publisher to run desktop inventory on mobile and tablet at desktop CPMs
and offer cross-screen retargeting and attribution.
10

The following Google Trends diagram illustrates that growth of search traffic for Responsive Web
Design versus Mobile Web Design or Mobile App Design is staggering. There is approximately
five times the amount of search traffic today compared with 2005, and close to 10 times the
amount is expected in 2014 if the same trajectory continues.
Based on this trend, it is clear why Google and Microsoft have endorsed Responsive Web Design
as a best practice for building a multi-screen and mobile strategy.
11

Responsive Design: Capitalizing the Mobile Web
By Aidan Foster
An engaged audience is a profitable audience. By providing a great web experience to people on
their own terms, publishers hold their audience’s attention longer and increase readership. In our
multi-screen world, this means letting people access publishers’ content on whichever devices they
own. Responsive design is usually the most cost-effective way of doing this.
Successful Mobile-Friendly Websites
Simply having a website that functions on many devices isn’t a magic bullet for success. There are
four main aspects that every successful mobile-friendly website requires:
#1: Valuable Content
All successful websites need to provide the audience a good reason to visit. Publishers can’t
predict whether a visitor will be using a small or large screen, so they should keep content as
concise as possible. Switching to a mobile-friendly approach gives publishers the opportunity to
re-evaluate their content strategies and decide what provides the best value for the reader.
#2: Easy Navigation
Smaller screens require simplified, finger-tappable interfaces. It is essential not to assume that
because a visitor is using a smartphone, he/she only wants to access a small subset of a publisher’s
content. He/she may be switching between devices, such as emailing or social sharing a link
between a desktop and a smartphone.
#3: Easy to Read
12

The majority of web content is text, so it must be large and easy to read. A visitor should never
need to “pinch and zoom” to navigate or read any part of a site.
#4: Fast-Loading
A site can have intuitive navigation, great typography and valuable content, but if it takes 30
seconds to load, publishers will lose most of their audience. This doesn’t mean a mobile-friendly
site can’t include video or graphics; however, the page’s text and navigation should appear before
rich media starts loading. Then the visitor can choose whether to wait for the media to load or
quickly jump to a different page.
Mobile-Friendly is a Balancing Act
Creating a mobile-friendly website is a balancing act. Publishers simply don’t have the luxury of
including all the content typically seen on a desktop homepage, nor can they assume their sites are
being loaded over a broadband Internet connection.
On the surface, optimizing performance appears to be a technical exercise, but it is more than just a
question of better programming or faster servers. A site can have highly optimized images, but if
editors load too many on a single page, mobile visitors will suffer. Performance requires alignment
across a publisher’s entire team, including designers, developers, editors and leadership.
How to Get There: Responsive Design
Responsive Web Design is a strategy for building sites that allows them to work on a range of
devices, including smartphones, tablets and desktops. It lets a website optimize its layout to
accommodate different screen sizes. Publishers can reach their entire multi-device audience
through a single website, saving significant development and maintenance costs compared to
native apps or dedicated mobile sites. However, native apps do have their advantages, including
creating device-specific mobile experiences and the ability to deliver push notifications to users.
Where Did it Come from?
The term “Responsive Design” was originally coined by web designer and developer Ethan
Marcotte in a 2010 article published on alistpart.com. The concepts presented in that original post
were further developed in his book Responsive Design.
How it Works
Responsive design uses long-established web design tools in a new way. There are no plugins to
download, and it functions on every modern web browser released since early 2011. There are also
strategies to support older legacy browsers such as Internet Explorer 7 and 8. Responsive design
uses a property of CSS called media queries to allow web browsers to reorganize site layouts
depending on screen size. It uses one code base and one set of content.
13

All the logic that controls a site’s layout happens on the client-side web browser, and every visitor
viewing a responsive site downloads the layouts for all possible screen sizes. Then, the device’s
web browser chooses the layout that is the best fit for its screen.
How it is Different
Responsive design is a different approach than having a dedicated mobile website, which often
appears as “m.website.com”. These sites detect that the visitor is using a specific device such as an
iPhone. Then they redirect the visitor to a different mobile-only website from the desktop version.
Server-side code controls m. layouts, whereas client-side code is used in responsive design.
Validation
In September 2011, The Boston Globe was the first major newspaper to launch a site —
BostonGlobe.com — with responsive design. The launch proved responsive design was a viable
strategy for a high-traffic website. Soon after,Starbucks.com and BarackObama.com launched
responsive websites, and by 2012 they were joined by highly recognizable brands such as
Microsoft.com, Time.com and Mashable.com.
Evolution of Responsive Design
Responsive design was originally created to address two major problems: The first was how to
accommodate a range of screen sizes, and the second was to address the challenge of navigation
appearing on small (and often touch) displays. “Responsive design” now generally refers to a
larger pool of best practices for building mobile-friendly websites. The core concepts outlined by
Marcotte have been expanded upon and combined with other ideas from experts working to solve
related challenges.
Mobile First
Before 2009, Luke Wroblewski predicted that the explosion of mobile devices would
fundamentally alter how people interact on the web. He published a book, Mobile First, in 2011
that outlines his new design method addressing every-growing numbers of mobile users.
14

The basic idea is that mobile devices have the smallest screens and therefore require simple, taskbased
interfaces to be usable. Instead of starting with a desktop design and hacking away at
elements until they fit on a small screen, he suggests the opposite approach — design for smallest
interfaces first and then add additional elements for larger displays. This user interface design
strategy ensures the mobile website is clean and easy to use, something that benefits desktop users
as well.
Progressive Enhancement
Progressive enhancement is essentially the coding equivalent of mobile-first design. By default, a
very basic no-frills site is loaded to ensure it will work on very old devices and web browsers.
Then, on devices with additional capabilities, additional features are layered on top of that default
experience.
15

Take for example an image slideshow that uses a progressive enhancement approach. By default, a
simple image is loaded with next and last buttons. This works on every browser but would require
the page to refresh as you click “next” through the images.
On newer browsers, JavaScript is used to load and automatically cycle image carousels without
any page refreshes. On touch-screen devices, the carousel is further enhanced to allow the use of
swipe gestures to view images. Each type of user is granted full access to the content in the way
he/she is most accustomed to on his/her device of choice.
Benefits
SEO
Google penalizes sites that have duplicate content. A dedicated mobile website is no different. A
post on the Google Developers blog recommends using responsive design for the following
reasons:
Using a single URL for a piece of content makes it easier for users to interact with and
share and link to. In addition, it helps Google’s algorithms assign indexing properties;
No redirection is needed for users to get to the device-optimized view, which reduces
loading time. Also, user agent-based redirection is error-prone and can degrade a site’s user
experience; and
It saves resources for publishers’ sites and Google’s crawlers. For Responsive Web Design
pages, Googlebot user agents only need to crawl a site’s pages once, as opposed to
crawling multiple times with different user agents, to retrieve content. This improvement in
crawling efficiency can indirectly help Google index more of the site’s contents and keep it
appropriately fresh.
Cost vs. Native Apps
Websites have limited access to some device hardware, including the GPS and accelerometer.
Currently, only native apps can control the camera or allow push notifications, and this access
comes at a significant cost. Each app platform requires developers with different programming
skills. As the native app landscape becomes more and more fragmented, ongoing development
costs are compounded by the number of platforms supported.
Cost Savings vs. Dedicated Mobile Site
All publishers must have websites to distribute their content. Responsive design is significantly
more work to develop than simply focusing on desktop-only design, but it typically is much less
effort than maintaining separate desktop and mobile sites.
16

Future-Friendly
A mobile-first, progressively enhanced responsive website is built with a core structure that
accommodates a diversity of devices. This flexibility is not limited to any specific screen size,
platform or manufacturer. When a new device is launched to market and it’s similar to something
that has already been tested, it likely will just work. If an entirely new platform or device class is
released, then publishers will be able to enhance their existing sites to support it without a major
rebuild.
Responsive websites have a simple core structure for both interface design and code. Additional
layers of features are loaded on top of the core for more capable devices. This architecture makes it
possible to add a specific feature to your existing responsive site relatively easily. This structure is
about as future-friendly as is possible — it can accommodate features for products that haven’t yet
been released to market.
Aidan Foster is a responsive design expert, speaker and owner of Foster Interactive Studio. Read
his articles at responsivedesign.ca, or follow @finteractive on Twitter.
Responsive Design Challenges
Mobile First or Mobile Too?
While responsive design offers publishers many advantages, it also brings its challenges, such as
deciding whether to embrace a “mobile first” or “mobile too” philosophy. To make this decision,
publishers should conduct surveys of their readers to find out which devices and computers – and
how many – they are consuming the news on. Publishers should also look at their website
analytics.
Business Insider asked six questions of its readers in December and came to the conclusion that a
“mobile too” strategy makes the most sense for it. When readers were asked, “which of these
devices do you use to read news and information?” more than 60 percent said smartphone,
upwards of 40 percent reported tablet, and approximately 90 percent said desktop or laptop
computer.
17

When asked, “which of these devices do you use to read the most news and information?” about
20 percent reported smartphone, less than 20 percent tablet, and approximately 70 percent desktop
or laptop computer.
While Business Insider concluded that it will continue to embrace a “mobile too” philosophy, that
doesn’t mean it’s the right way to go for every publisher. Each market is different and has a unique
audience with unique behaviors.
While responsive design optimizes for computer and multiple device screen sizes, it works with
both “mobile too” and “mobile first” philosophies. Publishers who conclude they want to stick to a
“mobile first” strategy will need to keep this in mind when working with their teams on layout and
content strategies. Responsive design lets publishers hide certain parts of their website depending
on screen size.
Technology
Many publishers are still using legacy content management systems that don’t take into
consideration responsive design workflows when it comes to editorial. Publishers making the
change to responsive design should take a close look at their content management systems to see if
they will support a responsive design workflow.
18

Mark Boulton, Mark Boulton Design, wrote on his blog that thinking in terms of CMSs needs to
turn to “bits, not pages. And we need systems that help us think that way.” Examples of bits, or
chunks, include metadata, display rules and images.
A portion of the blog post reads: “In-house development teams developing content management
systems need to focus a little more on workflow and a little less on features. Understanding the
needs of editorial teams goes a long way.”
Boulton also recommends creating a working group that focuses entirely on the content
management system – from designers to developers and newsroom and product development staff.
“Let’s think about stories as collections of resources, meta data and links that never have a
beginning, middle and end. Let’s think of our stories as adaptive. And let’s build systems so we
can make them that way,” he wrote in the blog post.
Employees
Publishers embracing responsive would be wise to invest in an analytics team who will look at
these questions: “What’s working on mobile and desktop?” “What’s not?” and “How can we
change that?”
19

Having Their Say: Experts Weigh in on Responsive Design
By Justin Avery
Responsive design is huge. It was not the fad that many non-believers said it would be. It is still
very much around and, like the arrival of CSS many years ago, responsive design is becoming the
standard practice for websites.
Alright, I’ll admit it, I’m kind of biased. I bought Ethan Marcotte’s book, Responsive Web Design,
published by A Book Apart, on the release day, and by the following day I had refactored my own
site to be responsive. In the process I began to amass a series of articles, tutorials and tools that I
used to better understand the different approaches and implementation techniques to achieve
responsive design, and thus Responsive Design Weekly was born.
You might be wondering what the future has in store for responsive design in 2013. I asked 16 of
the leading responsive design thinkers a series of four questions in an interview series focused on
responsive design. The responses uncover both pros and cons, highlighting the areas of responsive
design that need the most work. Here are quotes and ideas we gleamed directly from the interview
series.
Focus on Performance
Performance has always been one of the most important parts of building websites. However, with
the increase in high-speed Internet connections, we have become lazy. Websites today average
over 1MB, and based on recent trends this could reach 2MB by early 2014.
When Brad Frost was asked by Responsive Design Weekly in an interview, what is one thing with
responsive design he’d like to see improved or developed in 2013, he said: “Performance all the
way. Right now 86 percent of responsive sites send down the same payload to small screens as
they do to large screens.”
With the arrival of responsive design, we have a technique to alter the layout of the site to better
suit a mobile device, but we’re still shoving the same amount of data regardless of the viewport,
and a lot of implementations are sending the same load down for the mobile version as the desktop
version.
Thirteen of the 16 people interviewed specifically called for performance to be one of the main
focuses of web design in 2013. They also cited the 2012 dConstruct site, 2012.dconstruct.org, as a
great example of a mobile-first approach and encouraged the next wave of responsive sites to take
a mobile-first and performance-orientated approach.
Blog More
Our industry is the fastest-moving industry in history thanks to the fact that it is inherently open
source (thank you view-source). We are able to peek into front-end implementations and reuse
those techniques on our own projects, but that only gives us a partial understanding of the
implementation. We don’t understand the decisions around why that function was included in the
20

first place — did they consider other options, other locations, different implementations, why those
didn’t work, and what made this the best decision? It’s like knowing the meaning of life, the
universe, and everything is 42 but not knowing why.
Dave Rupert told Responsive Design Weekly: “I’d love to see front-end designers and developers
blogging more about problems they faced and how they solved them.”
Paul Robert Lloyd explained to Responsive Design Weekly that dialogue about responsive design
is important, both where it has and hasn’t worked: “Write about the work you are doing — on your
blog or for magazines. I would encourage people to talk more about where responsive design
hasn’t worked too, as much as sharing new approaches.”
The interviewees called for everyone involved in website projects – from web
designers/developers to content strategists to UX and UI designers to information managers and
creative directors, etc., to blog about their experiences.
Blog about the problems being faced, and better yet, blog on how the problems were approached,
possible solutions identified and decided in particular. Then, write about how it went and what
should be done differently next time.
Prototype, Prototype, Prototype
Blogging about problems and possible solutions leads us to the next logical step, prototyping. The
year 2013 is the year to forget about over-planning things on paper and get into the browser as
quickly as possible.
Trent Walton told Responsive Design Weekly: “…we all must get our hands dirty. Prototype,
experiment, and debate — it’s the most exciting time to be building for the web I’ve ever seen.”
Our interviewed “experts” were only deemed experts because they all have identified problems
and tried to fix them. They’ve never, or at least rarely, been successful the first time around.
Because they prototype and share work with their peers, they are able to shorten the journey to the
final solution.
Tools like Codepen.io allow developers to quickly and easily prototype ideas that can be shared. It
has a wonderful community of people showcasing their work. Likewise, Brad Frost’s RWD
Pattern Library is a great place to start looking for existing answers to any Responsive Web Design
challenges.
Use Frameworks and Plugins Wisely
Nearly everyone interviewed by Responsive Design Weekly said they “tend to avoid frameworks
unless they’re absolutely necessary.”
When jQuery first gained popularity, there was an unfortunate trend that saw websites listing 10 to
15 jQuery plugins in the head, most of which were for functions that could be achieved in a few
21

lines of JavaScript. We blindly added links to libraries for a small piece of functionality without
the understanding of how it worked and the negative effects on the site.
Today we are facing the same issue in responsive design with the use of frameworks such as
Foundation and Bootstrap. Both of these are full-feature frameworks that will get publishers up
and running quickly and allow them to prototype ideas. However, it is important to understand
how they work before deciding if they should be used for production.
The same framework that allows a publisher to get off to a quick start could slow him/her down
just as fast if it’s necessary to step outside of its intended purpose.
The most common answer by interviewees was to stay away from frameworks, but they did
encourage the use of a CSS pre-processor (Sass was most popular). The most popular plugins were
respond.js (fallback for older browsers), South Street by Filament Group, and enquire.js for
JavaScript-based media queries.
Focus on Content
Performance aside, content has been the biggest mover and shaker in 2012 and will be a top focus
for 2013. With the recent launch of A List Apart, we continue to see a trend that websites should
be all about content. Content strategists such as Karen McGrane, Sara Wachter-Boettcher and
Relly Annet-Baker have been championing content for years, and now it seems the scales are
quickly tipping as their places on stage at web conferences become increasingly frequent.
Jeremy Keith told Responsive Design Weekly: “Mobile first. Or more specifically, content first.
Start with your content. Build out from there …”
Jordan Moore gave Responsive Design Weekly advice on breakpoints: “Set breakpoints for
optimal reading lengths not devices.”
Focusing design around content rather than the device is a vital part of approaching responsive
design, and it means having content ready from the very beginning. After all, design is inherently
based upon the content that it supports.
A List Apart has recently gone through a major redesign of its 10-plus-year publication. It’s a great
example how a publisher with years of content archives were able to approach a new design and
focus on the content itself.
Experts’ Final Remarks
It’s as exciting a time to be working in the web industry as there has ever been. Responsive design
is challenging our approach to content on the web in a wonderful way, and publishers are finally
being given the opportunity to let their content shine through in the best possible way across a
plethora of devices. The best thing about a responsive approach is it will still work on devices that
haven’t been released yet.
22

The quotes and ideas that we touched on were taken directly from the responsive interview series,
which you can read in-depth at http://rwd.is/interview-series. Subscribe for weekly updates at
responsivedesignweekly.com to stay on top of responsive design as it develops in 2013.
23

Responsive Advertising: Monetization Across Screens
When publishers consider making an investment in switching to Responsive Web Design and
embracing Responsive Advertising to monetize across screens, it’s important for them to look at
the changes that are in store. From ad sales strategies to weighing Responsive Advertising
solutions to collaboration and communication between advertisers, agencies and publishers, the
change-over to responsive design requires a significant amount of planning. Publishers should ask
themselves not only if they will see a return on their investment, but by implementing responsive
design and advertising solutions, is there an opportunity to make more revenue?
Where to Start? The New Opportunity vs. Retrofitting
In the past, media buyers’ strategies were focused on separate media channels. Responsive
Advertising, however, completely disrupts this idea and presents publishers and
advertisers/agencies with opportunities for new ad sales strategies such as bundling – or “silobusting.”
It also creates challenges such as publishers and agencies being on the same page when it
comes to advertising servers and technology.
There are several types of publishers who have different ad server situations, including publishers
who sell their own ads and have their own ad servers, publishers who use their own ad servers and
third-party servers and publishers who only use third-party servers for ad networks such as Google
AdSense. (See Page 30 for different publishers engaging Responsive Web Design)
Previously, industry-wide, ads were sold on fixed, standardized page positions. When it comes to
Responsive Advertising, ad sizes and location change depending on screen size and orientation.
Some publishers are moving ads around (which is the case of having a first-party tag that has a size
such as 300 x 250 defined for all sizes on the fluid grid) or hiding them in mobile device views as a
24

temporary solution. Buying that ad unit in that position on the site is now different from screen to
screen, but it does not change the value of the ad. (See example of The Boston Globe below on
page 38)
This is the case in point of a bundled sale, but the advertiser might not have been aware of it. This
type of method can work well for defined CPC, CPA, CPL-type monetization techniques, but for
CPM it is a bundle or average of that overall value.
Selling Bundles vs. Mediated Ad Network Fills
One of the problems with mobile having such a low eCPM in comparison to desktop is that it’s
sold in a silo. Google has even shifted its AdSense buying and selling from independent channels
to buying context. The tech giant made this move to alleviate a silo’ing effect, which can cause
channels to be undervalued versus other channels.
Another topic, based on the landscape today, is the overall effectiveness of media sold in silo’d
channels. Users are prone to screen shift and experience media in multiple channels. This thinking
is not new — it has been the evolution of the media-mix model of media strategies that crossed
TV, radio, print and out-of-home advertising in the past to build a brand’s overall effective
advertising strategy. Performance marketing of CTR, CPC and CPA has clearly taken the
ambiguity out of measuring these different mediums in the digital landscape. However, the clear
use of multiple screens needs to be weighted into the overall effects of users seeing ads on multiple
channels. Therefore, establishing a price or currency of one channel in a silo is clearly not
equivalent to the real value of that ad in that channel when brought together in unison with other
channels.
We believe that having different ads mediated from channel to channel might be a good way to
look at Responsive Advertising. This is what we refer to as a “SWAP configuration.” In
addition, publishers can see a real benefit achieved through a strategy that leverages a single ad
unit that can bridge all channels to maximize the effect of screen-shifting and cross-screen
interaction. This concept is part of “STRETCH.”
A core approach we believe in enables publishers to implement Responsive Advertising through
selling packages, or bundles, of ads. In the past, publishers sold single slots to advertisers.
However, with responsive design, publishers can bundle packages of ads for one rate, and the
eCPM metric measures inventory across screens.
This methodology can give a boost to the overall mobile strategy, mobile ad sales efforts and
provide an ad currency of greater value.
25

As mentioned in the introduction, eCPMs for desktop ads are currently $3.50, while mobile ads are
75 cents. Responsive Advertising solutions, such as STRETCH (bundling approach — which
allow publishers to convert creatives into HTML5 rich media ad units) and SWAP (mediated
approach that bundles creatives and ad tags), can be deployed based on type of publisher, but a
STRETCH approach allows publishers to potentially sell all ads at the higher desktop rate.
As SWAP is essentially taking existing assets for silo’d channels — either creatives or ad tags
— and either pulling them together or dynamically changing them on publishers’ site(s), this can
be thought of as a retrofitting type of solution to Responsive Web Design. Whereas STRETCH
is essentially one ad unit that can fit and change to accommodate ad slots or different site
configurations based on the responsive approach of media queries, there is a great new opportunity
to save cost, time and achieve increased revenues in the future.
Native Advertising
Publishers are increasingly adding native advertising to their advertising options. This emphasizes
the importance of how content is king when it comes to responsive design and advertising. Native
advertising is the perfect opportunity for Responsive Advertising since responsive design lays out
content based on screen size, and native ads blend in with content. Native advertising typically
includes a call to action and blends in with other relevant content “in-stream.” Examples of this
include Facebook’s Sponsored Stories and Twitter’s Promoted Tweets. Publishers currently using
native advertising include BuzzFeed, Atlantic Media, AOL, The Huffington Post and Mashable.
David Moth interviewed Skiddmark CEO Steve Fitch about the challenges of implementing
responsive design and advertising. He emphasized the importance of advertising not interrupting
the reader’s experience: “Undoubtedly Responsive Web Design will drive more branded content,
where advertising and promotion is part of the content that readers choose to see. Advertising as
‘interruption’ is ill-suited to mobile browsing, where a user may only have 60 seconds to browse a
page before moving out of cell range or returning to the conversation they were having before
clicking on a link,” he said.
Reports have shown that native ads deliver better engagement results than static display ads.
However, it’s still early days for publishers when it comes to native advertising, as some grapple
with developing guidelines for this new evolving form of “in-stream” advertising.
Streamlining Ad Sales
According to Jay Kirsch, president of technology and entertainment at AOL, in a piece by
Advertising Age, the company is converting its sites to responsive design in 2013. Kirsch said one
of the advantages of having responsive design and advertising include a single portal to sell all
advertising inventory. Kirsch mentioned that AOL has already redesigned its Engadget.com and
Games.com sites, and it is seeing click-through rates up to three times higher than with its static
mobile display ads.
26

A Cultural Change
Implementing Responsive Advertising requires publishers, sales staff, advertisers and agencies to
work together to make the implementation happen. Publishers will need to work with their
advertising teams to figure out the best ways to convince businesses and media buyers that
responsive is a better value.
One way for publishers to do this is to show advertisers mobile versus desktop metrics and explain
that responsive design provides a quality experience for readers on all computers, smartphones and
tablets. As with all things, it will take time for all parties to adjust to change. However, publishers
can make a convincing argument that responsive design should increase audience, and Responsive
Ads will provide an optimal advertising experience based on screen size and orientation.
It will take time for all parties to figure out the logistics of how to make Responsive Advertising
work when it comes to servers, technology and workflow among publishers, advertisers and
agencies.
How Does it Fit? The Publisher’s Responsive Ad Dilemma
When publishers first think about Responsive Web Design, one of the first questions they ask is,
“How will we now implement the advertising or monetization of our site?”
The fundamental issue and concern stems from the fact that a site with one view or face with
relatively fixed ad slots and positions is now fluid. Publishers who serve ads are used to fixed
positions for those first-party ad server tags that manage the delivery of ads to the site. This leads
to the next question, “What do I do about those tags?”
For publishers that do not run an ad server and just fill the site with fixed ad network placements, a
similar question arises, “What do I do now, how can I manage switching out those fixed
placements from screen to screen?” This in particular has been a big question (at the time of this ebook’s
release, Google had not released a solution for this and AdSense.)
What makes this entire discussion around Responsive Web Design and Advertising so
complex is that as responsive design has exploded overnight, the concern is that there are no
mature advertising solutions to the problem.
The reason for this concern stems from the fact that there are many categories of publishers that
require slightly different solutions to the problem, and the unique types of solutions have not been
clearly explained. Publishers with their own direct sales staffs define one end of the spectrum, and
at the other end there are publishers that fill their sites with ads from mediation platform ad
networks or exchanges. These include small-scale bloggers to large media properties that have
many sites and different media categories linked together with an advertising sales organization
and a sophisticated evolved ad ops process. However, a critical key to the overall advantage of
Responsive Advertising relates to how closely the publisher is involved in the ad sales process.
27

The Responsive Advertising Solutions
Pre-Responsive Web Design (The Rise of the Separate Channel)
Before Responsive Web Design, the basic thinking was that a different strategy and solution was
necessary for desktop, tablet and mobile. From web advertising to advertising in-app (native app),
ad technologies, networks and channels were separate.
The graphic below illustrates an example of a publisher without an ad server. The publisher might
work with an ad network or a provider such as Google (Google AdSense) to drop different
network tags on its website or websites. This scenario is quite complex as mobile, tablet and
desktop are separate, making it quite expensive.
Some publishers have ad servers. They would theoretically have a different ad server for each
channel.
28

Since this strategy is very complex and costly, it was only obvious that certain areas would
converge. Most organizations have treated tablet and mobile together, but this is not mutually
exclusive.
Many advertising industry players have consolidated some of these areas with solutions that offer
ad-serving to multiple channels (e.g. OpenX, Google DART, Open Ad Stream, etc.). However,
many scenarios show mobile and tablet separate from the mobile web. The IAB standardization
process treats mobile and tablet separately from online. The IAB has different committees and task
forces working on those issues. While mobile ad-serving is still thriving, is seems that many
mobile ad tech companies are now focused on mobile app advertising solutions.
29

Different Publishers Engaging Responsive Web Design
When considering Responsive Advertising solutions, each publisher’s situation is different. The
following chart shows each type of publisher and solutions for each scenario:
Type w/Ad
Server
w/Ad
Sales
A X X The most common
case for bloggers or
small website owners
that want to monetize.
They usually partner
with one ad network.
B X O The typical case,
usually a small print
or traditional media
company that has
sales, launches a web
property and sells
spots embedded as
content into the site.
C O X The common case,
which gives
publishers the ability
to have different ad
networks and better
manage existing
network feeds.
D O O The common case
for media companies
and mid- to largerscale
publishers.
They have a
combination of their
own ad sales and
network ad fills for
unsold inventory.
*Solutions 1,2,3,4 cited below. X=No, O=Yes
Types Various Solutions for
Responsive Advertising
i. Partner with a responsive or multi-screen
fill ad network with a SWAP thirdparty
tag placed directly on site.
*Solution 2b
i. Leverage STRETCH ads for website.
They can sell and create directly.
*Solution 4
ii. Partner with a responsive or multi-screen
fill ad network with a SWAP thirdparty
tag placed directly on site.
*Solution 2b
i. Some form of SWAP for website
(JavaScript framework). *Solution 1
ii. Partner with a responsive or multi-screen
fill ad network with a SWAP first-
/third-party tag. *Solution 2a
iii. Consult with ad server company for multisize
filling ad tag (uber first-party tag) that
can change from screen to screen. *
Solution 3
i. Leverage STRETCH ads for website. *
Solution 4
ii. Need some form of SWAP for website
(JavaScript framework). * Solution 1
iii. Partner with a responsive or multi-screen
fill ad network with a SWAP first-
/third-party tag. * Solution 2a
iv. Consult with ad server company for
a multi-size fitting ad tag (uber
first-party tag) that can change
from screen to screen. * Solution
3
Publishers are classified by whether they have their own ad servers and/or third-party servers and
whether they sell their own ads. A unique Responsive Advertising solution is available for each
type of publisher. We will describe Solutions 1, 2, 3 and 4, found below, from two perspectives as
part of Responsive Advertising solutions STRETCH and SWAP.
30

SWAP: Retrofitting (Solutions 1, 2, 3)
Publishers can think of SWAP simply as creating a configuration or enabling a form of
JavaScript code for his/her website that allows for swapping/switching out first-party tags or ad
slot sizes in different views of the site. When it comes to agencies, SWAP means packing
multiple creatives with different sizes into a form of ad rotation that can be served from a thirdparty
tag. SWAP is referenced as part of Solutions 1, 2 and 3 in the chart above.
Solution 1: SWAP Framework (Responsive Ad Framework Technology or
RAFT)
In the desktop view, the publisher may want a 970 (or 728) x 90 leaderboard ad and on the
smartphone a 300 x 50 ad. The way advertising works today is that publishers put first-party ad
server tags or first-party network (such as Google AdSense) tags on their sites. Traditionally, ads
have been fixed sizes.
One common solution publishers are embracing is to enable JavaScript “switching or swapping” of
different first-party tag sizes from screen to screen. Eventually, ad servers will launch an uber i
first-party tag that can change from screen to screen, but until that day comes, having a different
first-party tag in the right place is one way of thinking about a SWAP-type configuration.
Setting up an ad server to have the right ad in the right spot is potentially extra work and can be
quite complex when a site has many tags. Tag management systems may try to simplify this
process; however, what we are looking at is the complexity of tag management of the one-screen
configuration of today (desktop) being multiplied three times (for tablet and smartphone) in the
most basic approach.
31

Many publishers are embracing this solution as it makes it easy to use existing ad servers and the
first-party tags associated with them. There is a complexity that several different ads need to be
trafficked, but essentially there can be inventory filled across all channels.
Here is a recent example as seen on TheOnion.com. The desktop has both a leaderboard (728 x 90
plus skin), for the tablet the first-party tag has been turned off, and for mobile the mobile ad-tag is
turned on with the mobile image ad (300 x 50).
The advantage to this solution is that publishers can have different types of ads for different
channels:
Desktop: Flash ad with takeover;
Tablet: HTML5 ad; and
Mobile: Image ad.
The disadvantage is that there is no change in the creative process and costs. Advertising
operations has three times the amount of work trafficking tags.
32

Solution 2: SWAP Incorporated in the Third-Party Ad Tag or Network Tag
Agencies or advertisers may want to package their tag with multiple creatives before delivering a
third-party tag via the agency-side ad server. The package would require a configuration file to
determine what creative is delivered where, but this type of solution is still very early. That kind of
SWAP, or ad rotation third-party tag, can be delivered though intelligent responsive or multiscreen
ad networks. It can deliver the tag to the right place at the right time.
Solution 2a (SWAP Third-Party Tag or Network Tag) below shows the case of a publisher
that has an ad server but only one fixed size of iFrame determined by first-party tag to put on the
responsive site. The publisher is not using a framework described in Solution 1.
In order for the creative or tag to be rotated from screen to screen, there needs to be a configuration
file (intelligence swapping), which we discuss in the Flow-line section of this e-book.
ResponsiveAds has this type of SWAP solution available.
33

This is why we call SWAP a retrofitting solution. The new features are in packaging, delivery
and trafficking. SWAP can solve the problem, but it does not bring more value other than filling
the inventory with different creatives from screen to screen.
This Samsung Galaxy campaign is a good example of three different ads as JPEG images
packaged together (1024 x 66, 768 x 66, 300 x 50) delivered for different screen widths, shown via
the ESPN property below:
This solution of the adhesion Samsung ad on the bottom of the page was used only for ESPN’s
mobile and tablet site.
Publishers who do not have a primary ad server incorporating first-party tags for their sites should
consider Solution 2b below.
34

Solution 3: SWAP Incorporated in the First-Party Ad Tag (Ad Servers)
This is something we expect to see more of in the future. We believe every ad server company will
launch its own version of ad tag that can handle many different sizes or types. This scenario is
similar to SWAP, but it is more related to the first-party tag or ad server. The solution is a kind
of uber-tag, flex-tag or intelligent first-party tag that comes with ad servers.
35

We think we will see this solution from Google with their GPT (Google Publisher Tag) and
DART.
This solution is able to call up the right ad at the right time in terms of size, shape and screen
context. ResponsiveAds has experience working with this technology.
Our first product, RAFT, incorporated this feature — a first-party tag or JavaScript code snippet
that could be put on the site in any ad slot position or in the site itself to manage different firstparty
tag sizes.
The advantage of this feature is there can be separate media channels. For mobile, tablet and
desktop, the intelligent tag calls a different size at different times. Most likely, the sizes of the tag
should be configured in the ad server first.
The disadvantage is that it appears there will be no new value in the creatives. Advertising
operations will still have to traffic different sizes and line items, and agencies will need to create
the different size creatives.
In many ways this first-party uber-tag is a simplified ad server for tags, but depending on the
functionality and how it exists over the top of first-party ad servers, it can also be considered a
primary simple ad tag rotation ad server.
STRETCH: HTML5 Cloud-Hosted Responsive Ad Creative Solution
Solution 4: The Responsive Ad Creative (One Creative That Works Everywhere)
With the growth of HTML5 and the abandonment of Flash, a new way of looking at advertising
creatives has emerged. The first decade of the 21 st century was an advertiser’s dream — rich media
creatives in Flash. Animation, videos, roadblocks, interrupts, pop-ups, pop-downs, overlays, pushdowns
and many other types of creatives had been brought to sites and the marketplace. However,
given that mobile never truly supported Flash -- and even though browsers on any device are
common at the core ii -- the final kiss of death to Flash came with the iOS on the iPhone and iPad.
This was the turning point for HTML5 to become the next big creative enabler. Since Responsive
Web Design has evolved with this trend, there is a clear opportunity for HTML5 advertising to
converge into this area as well. When we think about the future with HTML6 (discussions are
under way at the World Wide Web Consortium), we cannot stop dreaming of the innovative
opportunities around the creative itself.
In the introduction and in sections 1 and 2 we described the opportunities for native advertising.
36

STRETCH is defined as an advertising creative that can render in different ad unit sizes dictated
by a technology we call a Flow-line configuration. In its basic form, one can think of
STRETCH as content that’s part of a publisher’s overall site content. As its shape and size are
flexible, sponsored content fits nicely into the overall design of a responsively designed site. In
many ways Responsive Advertising is a step toward native advertising when we think of a way to
give it scale. There are many publishers who are creating their own forms of Responsive Ad
Creative (STRETCH). For, example CSS-Tricks’ Chris Coyier released 25 ads he created as
well as some useful code for publishers to create their own Responsive Ads.
In the page illustrated above, Coyier introduces the code for an example ad used for advertiser
Treehouse The design follows the typical rectangle ad that can be found in IAB standards, but it
was constructed with code in a similar way to Responsive Web Design. When considering
rectangle ad formats, this is one approach.
One problem with these rectangle ads is that most publishers want to push them
below the fold, as they take up too much real estate in the mobile view.
37

However, instead of creating a rectangle ad that is the 300 x 250 IAB Standard IAB as a Flash ad
or standard image file (JPEG) to be served into the site (find more information about this in The
Boston Globe referenced below ), this is a prime candidate as a 300 x 250 STRETCH-type ad. It
could be a better choice than getting cut off by devices that have 240-pixel width screens, or
columns in the layout grid of a responsive site that go lower than 300 pixels, to still have ads that
look great.
One of the best examples of native ad implementation exists on the responsively designed Quartz
website. It has incorporated advertising in a STRETCH-type format that is native to the overall
content with the incorporation of video and other media.
This process exists through which publishers develop fixed areas on their sites that they want to
design responsively with ads. This is an effective solution that works well with sponsored content
and creative departments directly tied to the publishers’ organization or closely linked to work
directly with the editorial.
One of the basic drawbacks with the examples cited above is that they have been more or less
designed as custom solutions for the respective properties or sites. Having a solution that scales
across many sites and agencies requires a technology suited to that process.
The power of a STRETCH, or Responsive Creative, is that the HTML5 rich media
advertisement can work on all screens. The one-ad-one-tag can be placed on the advertiser’s ad
servers, DSP networks and exchanges. The diagram below, Solution 4a, shows a STRETCH ad
38

tag delivery with the pre-Responsive Web Design setup. This is something that makes a
Responsive Creative quite attractive for brands and agencies. This type of ad with tag can work on
non-responsive sites and separate mobile and tablet sites.
However, for ad servers that include uber-tags for Responsive Web Design sites, Solution 4b
shows the most efficient solutions for agencies and publishers. ResponsiveAds can work with
publishers, brands and agencies to achieve the simplest, efficient, revenue-generating solutions.
39

When we consider that publishers can have ads that work everywhere, and they can be different
sizes and dimensions not limited only to the fixed sizes of the IAB and other groups like the MMA
(Mobile Marketing Association), we can take native advertising to the next level with scale.
Brands can have custom footprints directly linked into the overall editorial stream of publishing
partners to respond to screen size for integrated transmedia storytelling experiences like never
before.
On the publisher side, once those responsive-size footprints and the responsive storyline have been
developed, then the publisher can begin to work with external agencies and brands to offer ad
solutions that work within that flow. We refer to this concept as Flow-lines.
A Flow-line can be customized for a particular publisher, or in the case of ResponsiveAds, we
created a set of basic Flow-line configurations that can be considered the first Responsive Ad
units to be defined in the market. We will talk about these entry-level units later in the e-book, but
first we will explain in more detail about a basic set of Flow-lines.
We believe that for collaboration among publishers, agencies and brands, the overall Flow-line
approach is a way to move from cookie-cutter-type sizes — the original standards from groups like
the IAB — to a much more natural approach with fluid shapes and sizes dictated by the
publications themselves. This way, the ads “esthetically” and “naturally” fit into the overall
editorial of the site.
Flow-Lines
As defined in the glossary, a Flow-Line is the technology that gives a responsive STRETCH
ad its shape; it is the way a Responsive Ad Creative changes its size and shape for different screen
sizes or device types. The same way a Responsive Web Design site changes using media queries at
certain breakpoints, a Responsive Ad Creative STRETCH can be further defined beyond
breakpoint and device with a Flow-line. A Flow-line technically is a configuration file that is
associated with the actual Responsive Creative or creative in the third-party tag. Flow-line
configuration files can also be incorporated into SWAP third-party tags to define which creative
is shown for each device or breakpoint.
40

ResponsiveAds is able to make custom Flow-lines for publishers’ STRETCH ads.
Nothing needs to be implemented on a publisher’s site as the configuration file is included in
the ad tag itself, and the way the ad responds is controlled by Flow-line technology.
In addition to the glossary found at the front of this e-book, when designing with a Flow-line, we
have defined the following:
Ad slot: First-party ad server tag+container on the publisher’s site
e.g.
First-party tag
ResponsiveAds STRETCH Third-Party Tag: A JavaScript ad tag that calls the
Responsive Ad Creative and sets the Flow-line configuration.
The following diagram shows five types of pre-determined Flow-line configurations. These
Flow-lines have been designed with IAB digital ad standards in mind. Until now, only separate
standards for mobile, tablet and desktop existed. Flow-lines combine all three standards to get a
cross-screen standard approach.
41

These examples illustrate the possibilities of what can be done with one ad in multiple views.
The combinations and ways the ad creative changes shape can be endless as there are infinite
sizes and shapes.
This is why having Flow-lines determined by publishers is so important. Once a publisher
determines a Flow-line, creative assets from an agency or brand that are converted into an
HTML5 advertisement can be configured to the Flow-line of a Responsive Ad for that
publisher.
When generating STRETCH third-party ad tags using the ResponsiveAds system, publishers
can choose from libraries of Flow-line configurations that can be set for both Responsive
Web Sites (same first-party ad server tag across site) and Non-Responsive Websites (different
first-party ad server tag for different views or sites):
STRETCH Ad Flow-Line Types
One of the powerful aspects of a Responsive Ad Creative is that it doesn’t necessarily need to work
only on a Responsive Web Design site. Depending on the types of Flow-line configurations, the ad
can be served differently:
Configuration A: Fit to ad slot.
Configuration B: Responsive flow (with predefined response based on breakpoints or media
queries).
Configuration C: Custom.
42

A. Fit to Ad Slot
This is applicable for a single third-party ad tag that is able to adapt to different fixed ad
slot sizes in different site instances (e.g. desktop site and mobile site). An ad can be
served as a single line item from the ad server and automatically fit into different ad slot
or iFrame sizes.
A challenge with this method is that for older first-party tag types, the ad slot or the ad
tag might not necessarily carry the ad size.
Advertising Operations: This configuration is suitable for responsive and nonresponsive
sites with a different first-party tag for each ad size or one first-party tag for
multiple sizes.
Example setup work-flow:
1. Create a Responsive (HTML5) Creative with support for 970 x 90, 728 x 90 and
300 x 50 sizes.
2. Generate ResponsiveAds third-party tag with no Flow-line.
3. Traffic to static or dynamically resized ad slots.
4. Ad will adapt to fit whatever the ad slot size is (based on the width and height
of the first-party tag container on the site).
43

B. Responsive Flow Type
This is a case for a single third-party tag to include its own Flow-line configuration
file that can dynamically render itself to different ad sizes from screen to screen. In
most cases the different sizes have been predetermined and there is a change in size
depending on the breakpoints of the site.
Advertising Operations: This configuration is suitable for responsive and nonresponsive
sites with either a different first-party tag for each ad size or one first-party
tag for multiple sizes.
Example setup work-flow:
1. Create a Responsive (HTML5) Creative with support for 970 x 90, 728 x 90 and
300 x 50 sizes.
2. Generate ResponsiveAds third-party tag with Linear Flow-line.
3. Traffic to an ad slot in whatever size (e.g. 970 x 90).
4. The ad will automatically change its size based on the user’s screen: 970 x 90 for
desktop screens, 728 x 90 to tablets and 300 x 50 on mobile devices.
44

The Responsive Flow type presents two options:
Option 1: Respond to browser window size (recommended). The ad will change
size dynamically when resizing desktop browser. This works best for responsive
sites.
Option 2: Respond to device size. The ad will always stay in the desktop ad size in
desktop browser even if the browser is resized. When going to the same site on
mobile, the ad will be in mobile ad size. This works best for separate nonresponsive
desktop and mobile sites.
C. Custom
There are many possibilities for Flow-lines, and we are not going to attempt to discuss
all of them here. However, Flow-lines are very flexible and can be customized. For
example, here are two other forms that may be utilized:
Static – The ad will always be in one size across all screens no matter the ad slot size.
Combination – The ad tag will have e.g. “fit to ad slot” configuration for mobile and
“responsive flow” configuration for desktop and tablet.
For publishers launching a responsive site that want to have Responsive Creatives that can
work for all views, Solution 4 is a STRETCH creative offered by ResponsiveAds.
Publisher Collaborative Process Together with Agencies
Responsive Advertising presents a unique opportunity for publishers and agencies/brands to work
together on the process. Each party brings a different view to the table.
Collaboration with SWAP-Type Solutions
In most cases this is pretty standard. The publisher would order all the different creatives packaged
in a third-party tag from the agency and traffic them separately as in the case of Solution 1, 3. The
case of Solution 2, where there is one tag that has all creatives bundled together, gets more
complex in terms of how it is managed and handled between the agency and publisher. This is a
case-by-case scenario.
Publishers that currently do their own direct sales receive third-party ad tags from agencies that
they then traffic. If the publisher received these different tags from agencies, they could assemble
them together to make a SWAP-type ad, or he/she could ask the agency to configure a one-party
tag with three assets inside.
45

Collaborating with STRETCH-Type Solutions
As in the case of STRETCH, a publisher may want to have different ad sizes that might not be
standard IAB footprints. This can be a challenge, and the process between publisher and
agency/brand can be quite complex. One of the reasons to establish the core IAB standards ad
units’ process was to make it seamless between buying and selling for established formats.
Now there is a fantastic opportunity for publishers to have more control over sizes that best work
on their sites and design; they are not limited by standard sizes. Having standard sizes for different
views is a straightforward option that would entail combining mobile standards sizes with tablet
and desktop standard sizes for a complete package of how the ad would look in all the different
views.
However, at ResponsiveAds we believe that giving publishers more control over Flow-line setup
and customization -- with a collaborative environment for agencies and brands -- to have full
access to the creative can lead to a great new dynamic in Responsive Advertising.
The SWAP solution was born out of taking the existing process and managing third-party tags
separately. With one creative as in the case of STRETCH a core design collaboration system
between advertiser and publisher makes sense, especially for the approval process concerning all
screens and sizes.
46

STRETCH Examples (Local Publishers)
Bundled for Selling Above the Fold
In working with various publishers that have or are launching Responsive Web Design sites, a
common discussion is taking place industry-wide pertaining to how to consistently manage, deliver
and sell premium inventory above the fold across all screens
Here are examples of the use of the Linear Flow-Line and an Adhesion Snap Flow-line
together with two local media properties for a consistent sale of inventory above the fold:
Times-Herald, Newnan, Georgia
Peace107.7, College Station, Texas
Times-Herald
An example of a local newspaper that has found a great opportunity to launch its Responsive Web
Design incorporating Responsive Advertisements is The Times-Herald in Newnan, Ga.
The Times-Herald found that selling premium inventory as a “bundle” was a very attractive way to
introduce multi-screen advertising to its advertisers. According to Jonathan Melville, head of
interactive design, “When our sales team showed STRETCH to the local advertisers, it was like
‘magic.’ They got it immediately. We did not need to talk about HTML5 or any of the technologies.
It was all clear right from the start. They only needed to see the ad STRETCH to fit the different
views, and they knew that this was an easy way for them to move forward.”
The Times-Herald launched the site with seven advertisers using Linear and Adhesion Snap Flowlines.
The site example above illustrates a house ad running in the linear position and a Toyota
ad in the Adhesion Snap 300 x 250 rectangle position. “We wanted to have the advertisers that
launched with our responsive site to live above the fold and get the best shot at a premium position
and value,” said Melville.
47

Bryan Broadcasting — Radio Station Peace 107.7
Another local publisher that launched a Responsive Web Design site is a radio station in College
Station, Texas. Bryan Broadcasting launched the first of its three sites with a similar strategy,
having two premium ad positions for both Linear and Adhesion Snap.
The site has been received on average about a 0.3 percent click-through rate for all ad impressions,
and a 0.5-1 percent click-through rate for mobile with Adhesion Snap. This is a significant
improvement compared to previously.
These results were on par with other publishers that are launching their Responsive Ad platforms.
For example, IDG Consumer and SMB group, which handles Macworld and PCWorld and
Techhive sites, recently claimed that they saw an 80 percent increase in ad click-through rates with
Responsive Ads. The sites are performing well against industry benchmarks. Ad units scheduled as
run-of-site are delivering an average 0.38 percent click-through rate, compared to the tech industry
average of 0.11 percent (MediaMind Global Benchmarks 2012). All three sites have better-thanaverage
click performance with content and user targeting.
Designing for Beauty (Simple Ads That Fit into the Site Design)
Edible Vineyard
Another local publisher that launched a Responsive Web Design site is a community magazine
property in Martha’s Vineyard.
“As the publisher of Edible Vineyard, a niche magazine, I needed an advertising platform that was
not only easy for my advertisers to understand but also intelligent enough to integrate easily into
my magazine's responsive website without any extra development. ResponsiveAds was the solution.
It has allowed me to monetize my content by delivering my advertisers’ messages seamlessly
across devices and platforms,” said Sam Berlow, publisher and editor, Edible Vineyard.
48

The Buzz Book
Having ads that best integrated to the design and graphic beauty of the site was also part of the
brief. Having ads that are typical IAB dimensions did not fit the profile for the designers. They
wanted a nice custom leaderboard to fit with the site. The top super leaderboard fits the same size
as the navigation bar. This is a perfect example of a STRETCH ad that can best be part of the
overall design, a scalable step to native advertising.
Rich Media Pushdown Leaderboards
21Jump Street (Sony Pictures)
This is an example of an ad that was running through an ad network for desktop that was converted
into a responsive rich media version.
49

Skins and Backdrop Ad Types
UpTweet and ZYR Vodka
UpTweet.com is a site based on building a revenue-generating business using Twitter and virtual
currency or “bitcoins.” Brian Santos, founder, said, “We are all about helping users make money
from their tweets. We embraced a responsive strategy as more than 60 percent of users are
tweeting from mobile devices, and we wanted a site that could work everywhere. By having a
‘skin-type’ Responsive Ad, we could build a business with sponsors for different tweeted sections.
We are looking forward to incorporating Responsive Ad solutions in our next release of the site in
a more seamless way to the overall business model.”
The ZYR Vodka ad shows ResponsiveAds’ Backdrop Flow-line. The ad can leverage the side
gutters for a landscape view and change to an Adhesion for tablet and mobile profile views.
50

The Opportunity
Mashable declared 2013 the Year of Responsive Design, and we couldn’t agree more. While
publishers consider whether it’s worth it to make the investment in responsive, they need to closely
look at monetization strategies. Publishers shouldn’t be asking themselves if they should be
considering a switch to responsive design and advertising solutions; they should be asking
themselves, when?
As we discussed in the introduction, most people do not read the news only on one computer or
device. We now live in a multi-screen world where, for example, someone might begin reading an
article on a smartphone and then email him/herself the link to the article to finish reading later on
their laptop. It is critical for publishers to look at their analytics, though, because each market is
different (for example, urban versus rural areas).
In August, Google unveiled results of a study that point out most daily media interactions are
screen-based. It concluded that 90 percent of all media interactions are screen-based (smartphone,
laptop or desktop, tablet or television), and only 10 percent are not screen based (radio, newspaper
and magazine).
In order to survive in this evolving increasingly digital and mobile-focused media world,
publishers must face the fact that they must bring both quality editorial and advertising content to
where the audience consumes it – from devices as small as smartphones to tablets to laptops and
desktops and even as large as TVs.
51

And the time is now!
ResponsiveAds is happy to speak with publishers who have already implemented responsively
designed sites and are still trying to figure out how to monetize them, or ones who are considering
making the move to responsive, to discuss our STRETCH and SWAP solutions.
Contact us at (425) 296-6925, or email us at contact@responsiveads.com. Visit our website at
http://responsiveads.com
For more information, publishers can also check us out on social media platforms:
… and at our ResponsiveAds blog at ResponsiveAds.com/blog. Join the conversation using
hashtag #responsivenowandhow.
ii Webkit, the common open-source browser used by most of the manufacturers such as Google’s Android, Apple’s iOS,
Nokia’s Symbian and RIM’s Blackberry, has become the defacto technology for smartphones. This browser is based on the
open-source Safari core, so one can say that the mobile browser is common as the desktop.
52