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/