Responsive Ads – What we have: – What we'd like:

View Github Repository Open presentation in a new window

chrisstrahl

See all presentation from chrisstrahl

Responsive Ads – What we have: – What we'd like:

0 1

ResponsiveAds

Responsive ad work

On Github chrisstrahl / ResponsiveAds

Responsive Ads

A look at a new specification for HTML5 Responsive Ads

DrupalCamp NYC Responsive Ad Sprint

July 14, 2013

Who Are We

  • Sam Richard
  • Sr. Front End Developer, NBCUniversal
  • Snugug on Twitter
  • Chris Strahl
  • Enterprise Practice Manager, Phase2
  • chrisstrahl on Twitter

What we have:

Making it "good enough" w/o responsive ads

User Agent Sniffing

Ad Swapping

Ad Stretching

What we'd like:

Fully Responsive Ads

HTML5 and CSS3 based ads

Interactive Ads

The Big Problems

How do we deliver a strong and scalable experience based on the platform being used?

Can we deliver this experience based on a set of established best practices?

How do we improve the way that users are able to interact with advertisements regardless of the platform?

How can me marry ad best practices with those being used for responsive design?

Why HTML5

Provides a wide range of design and interactive capabilities

Has eclipsed other solutions in terms of click rate

Impressions can be tracked on all platforms

Has accessibility options

Why Not Flash

Not platform agnostic

Requires a plugin to function

What is Responsive Web Design?

Responsive Web Design (RWD) is an approach to web development that adjusts to the user's platform. Websites can be viewed on a multitude of platforms, each with their own parameters and constraints. Responsive design allows for design attributes (i.e., images, type, grids) to become platform agnostic.

There Are No Silver Bullets

Approach

We wanted to create a standard approach to this problem. It includes a combination of technology:

iframes

Intrinsic Ratios

Media Queries

HTML5/CSS3

Approach Details

Rich Media

HTML5 video for cross-browser playback

Responsive content for most valuable impact at any size

Interactive

Cross-browser CSS animation w/o Flash

Responsive animations

HTML5 Geo-location API

Mapping API integration

Commerce Integration

Rich Media Capabilities

Interactive Capabilities

Why This Matters

Allows for a higher value monetization across platforms

Reduces implementation costs for site owners

Higher brand visibility for advertisers

Richer experiences for users

Future-facing implementation

Next Steps

Questions To Be Answered

How does click tracking / impression tracking work?

How do we handle pop-out ads?

What We Need To Do

Get this reviewed

Formalize the document into a specification

Create a set of follow-up actions

Thank You

Slides available at

http://chrisstrahl.github.io/ResponsiveAds/

In-Page Responsive Ad Demos

Demo of Various Sizes

Working Draft Specification Proposal