HTML5 Banner

There's a ƖіttƖе open web standards advocate іn аƖƖ οf υѕ

Responsive banner ads

| Filed under HTML5

ResponsiveLong time no hear, but here’s a new post for you. And although it’s old news, it’s great news nonetheless. Matthew James Taylor wrote a great article about creating responsive banner ads with HTML5. Yes, that’s one of the many advantages of using HTML5 for banners: they can be responsive. And responsive equals cool. But you’d know that by know.

How to make responsive banners

Matthew describes how to break out of the good old pixel and use fresh and juicy HTML5 mixed with some CSS3 media queries to make banners responsive. The trick is to create the ad as an HTML5 page and then embed it in a page by using an iframe. You set the banner dimensions by wrapping the iframe in a div and using media queries to give the div various widths and heights. Matthew has some code and working examples on his site, so go check it out!

Does it get any better than this?

Yes, here are some of the added benefits for using this technique:

  • Accessible banners, because you aren’t using images or Flash
  • Banners are actually normal web pages, so they can use any technique a web page can use (Javascript, forms anyone?)
  • Easy to make changes while the ad is running
  • Use your favorite familiar analytics software to track clicks and impressions
  • Smaller size means faster page loading

And with Swiffy, Google’s Flash to HTML5 conversion tool, now built into Adwords (see ‘Using Flash in your ad?’), it becomes more and more clear that HTML5 banners are the future of online advertising.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>