Hey Mad Men, advertising on the web hasn't totally kept up with the web's shift to responsive design. A campaign may include a handful of ads that work on set screen sizes (phone, tablet, desktop), but they aren't truly fluid and responsive. Additionally, if a designer needs to edit the content of an ad, it has to be changed on each ad size being delivered. Today on Playground we're launching a proof-of-concept for responsive HTML ads. Our demo ads deliver as a single, compressed HTML file, and sit well within the IAB's standards for file size. A single file means less hassle for ad designers'edit the content in one place, and your ad is ready for the gamut of screen sizes. For this demo we took a handful of core sizes for web advertisements— the rectangle, leaderboard, skyscraper and billboard'and gave them a responsive twist. Our biggest trick is taking a leaderboard and converting it to a skyscraper on large screens, all with the same markup. We also built a nifty Sass tool to quickly string together a series of CSS-powered animations, to make those responsive ads even more slick. There were a few technical hurdles to overcome, which you can read all about on the Playground. We had a surprising amount of difficulty with Mobile Safari on iOS 7, specifically with iframes and CSS animations. So don't be surprised if the ads look a little funky on your iPhone for now.
