Link Dump on Responsive Ads

Link Dump on Responsive AdsWhether 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.

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.

Advertise Here

8 Responses

  1. The plug for the newsletter is more than enough and we’re just glad that you enjoy the weekly updates.

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

  3. M:

    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

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

  5. It’s really helpful and useful links to responsive ads articles. Good idea to post it ;)

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

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.