CodeinWP CodeinWP

Responsive Ads Link Dump

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.

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 says:

    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. Chris says:

    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 and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).