Whether we like it or not, ads on the web (in some form) aren’t going anywhere. And because of the responsive web design movement, more and more discussions are taking place surrounding how to handle ads (especially large ones) at certain breakpoints.
In addition, some developers have suggested new methods for creating ads using HTML and CSS, instead of images. Some have even incorporated animation with CSS3.
For my own future reference and for anyone else interested, below I’ve put together a bunch of links relevant to this topic. If you have any others, please comment.
Some of the links are about creating Flash-like ads with HTML5 and CSS3, which I think is relevant to the responsive ads discussion.
- CSS3 Ads Versus Flash Ads
Arne Bech (July 20, 2010) - Responsive Advertising
Mark Boulton (Nov. 15, 2011) - Feedback on Mark Boulton’s Piece
(Google+ Comments Thread) - The Holy Grail, Part 1
Roger Black (Nov. 21, 2011) - The Holy Grail, Part 2
Roger Black (Nov. 28, 2011) - Responsive Ad Demos
Rob Flaherty (Nov. 19, 2011) - Animated Web Banners With CSS3
Caleb Jacob (Jan. 10, 2012) - Adaptive Web Design & Advertising
Jon Phillips (January 17, 2012) - Responsive Ads in the Real World: Ad Server Implementation
Rob Flaherty (Feb. 19, 2012) - Responsive Banner Ads
Matthew James Taylor (April 28, 2012) - The state of responsive advertising: the publishers’ perspective
Snyder/Koren (April 30, 2012) - Responsive Advertising
Steven Bradley (July 2, 2012) - Responsive Ads
(Responsive Ad platform) - Sencha Animator
(Tool for creating mobile CSS3 animations) - Adobe Edge
(Tool for creating animated content with HTML5, CSS3, and JavaScript) - Tumult Hype
(Tool for creating interactive HTML5 content) - Responsive Design and Ad Creative: An IAB Report
IAB Mobile Marketing Center of Excellence (September, 2012) - Responsive Advertising Demo Page
(same source/date as previous) - Making Advertising Work In A Responsive World
Marc Thomas (November 29, 2012) - What’s Holding Back Responsive Web Design? Advertising
Jenny Xie (April 3, 2013) - The responsive web + AdSense
AdSense Blog (July 21, 2013) - Zurb’s Responsive Ads Playground
Zurb (July, 2014) - Improving Online Ads with HTML
Typecast (July 31, 2014) - How we designed and coded an animated banner ad with no images
Steven Fabre, Campaign Monitor (September 12, 2014) - Introducing theguardian.com responsive takeover
Patrick Stirling, The Guardian (January 12, 2015)
Credit: This list was inspired by Issue #12 of Responsive Design Weekly, and I’ve been adding to it ever since.
Got any more links? Comment below and I’ll add them if they’re appropriate.
The plug for the newsletter is more than enough and we’re just glad that you enjoy the weekly updates.
Hey, good roundup, and as long as you’re including HTML/CSS3 Design and Animation tools, don’t forget about Edit Room, my creation: http://www.edit-room.com
Edit Room is unique because every design you create is automatically flexible, using percentage and em units. There’s lots more that make it a fast and easy tool to create great content that communicates, with a focus on typography (web font support, including Typekit and Fontdeck integration), flexible grids, and clean code output.
Thanks for the link collection! Helpful. :)
I think BuySellAds is coming out with a responsive ad solution some time in the near future.
Not sure if you’d be interested, but I’ve done some experimentation here. Because I want to support IE6, I don’t think my experiments will work in the “real world”, but maybe it will help someone else traveling down the same road.
Cheers,
M
Update: For what it’s worth, the code I’ve been working on has improved since I last left a comment. Browser support has gotten a lot better. :)
It’s tricky, because using some of this ways to create responsive ads can make us lose money. The AdBlock firefox plugin is blocking my ads.
It’s really helpful and useful links to responsive ads articles. Good idea to post it ;)
Thanks for the post, we have recently released 5 responsive ad formats in private beta! check out, and looking forward to comments! (@responsiveads)
( If you go to the first link on your smartphone you can see some magic with the adhesion and backdrop from portrait to landscape mode, The second link is a view on Responsinator)
SHOWCASE PAGE
http://www.responsiveads.com/ad-formats-showcase/
Linear(tm)
http://addemos.responsiveads.com/linear.html
http://responsinator.com/?url=http%3A%2F%2Faddemos.responsiveads.com%2Flinear.html
Accordion(tm)
http://addemos.responsiveads.com/accordion.html
http://responsinator.com/?url=http%3A%2F%2Faddemos.responsiveads.com%2Faccordion.html
Toppler(tm)
http://addemos.responsiveads.com/toppler.html
http://responsinator.com/?url=http%3A%2F%2Faddemos.responsiveads.com%2Ftoppler.html
Adhesion Snap(tm) * Created for the magic of iphone 4 vs. iphone 5 portrait to landscape mode
http://addemos.responsiveads.com/adhesion.html
http://responsinator.com/?url=http%3A%2F%2Faddemos.responsiveads.com%2Fadhesion.html
Backdrop(tm) * Created for the retailer as holiday wallpaper
http://addemos.responsiveads.com/backdrop.html
http://responsinator.com/?url=http%3A%2F%2Faddemos.responsiveads.com%2Fbackdrop.html
Relevant:
http://pandodaily.com/2013/06/04/publishers-are-charging-forward-with-responsive-design-now-its-time-for-advertisers-to-catch-up/
http://www.netmagazine.com/features/responsive-web-design-and-advertising-advertiser-perspective