2

3

About ResponsiveAds

ResponsiveAds, Inc. is the publishing and advertising industries’ first responsive web advertising-

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

4

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

5

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

6

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.

7

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.

8

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

screen news consumption is skyrocketing. Listen to

the Pew Research Center, eMarketer and Mary

Meeker.

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

from both.

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,

9

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.

10

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.

11

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.

12

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

13

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.

14

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.

15

The basic idea is that mobile devices have the smallest screens and therefore require simple, task-

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

16

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.

17

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.

18

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.

19

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

20

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

21

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

22

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.

23

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.

24

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

busting.” 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

25

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.

26

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.

27

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

book’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.

28

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.

29

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.

30

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

Types Various Solutions for Responsive Advertising

A X X The most common

case for bloggers or

small website owners

that want to monetize.

They usually partner

with one ad network.

i. Partner with a responsive or multi-screen

fill ad network with a SWAP™ third-

party tag placed directly on site.

*Solution 2b

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.

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

party tag placed directly on site.

*Solution 2b

C O X The common case,

which gives

publishers the ability

to have different ad

networks and better

manage existing

network feeds.

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

size filling ad tag (uber first-party tag) that

can change from screen to screen. *

Solution 3

D O O The common case

for media companies

and mid- to larger-

scale publishers.

They have a

combination of their

own ad sales and

network ad fills for

unsold inventory.

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

*Solutions 1,2,3,4 cited below. X=No, O=Yes

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

31

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

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

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.

32

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.

33

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

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

34

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.

35

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.

36

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

party 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 21st century was an advertiser’s dream — rich media

creatives in Flash. Animation, videos, roadblocks, interrupts, pop-ups, pop-downs, overlays, push-

downs 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 coreii -- 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.

37

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.

38

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

39

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.

40

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.

41

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 <div> on the publisher’s site

e.g. <div class=“leaderboard-ad”>

First-party tag

</div>

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.

42

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.

43

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

responsive 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 <div> on the site).

44

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

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

45

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

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

46

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.

47

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

lines™. 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.

48

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

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

49

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.

50

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.

51

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.

52

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.