Responsive web design is a significant achievement for the entire Internet. We are no longer constrained by the long-obsolete “printed page” model with static content, broken down into areas of a fixed size. Today, the Internet is able to live, breathe and adapt, filling all the space available on the screens of various devices, ranging from mobile phones - and even to huge video displays. This is what the Global Network was supposed to be.

But there is a small problem. Web sites often contain banner ads and traditional banners that do not have much flexibility. Both flash- and GIF-banners have fixed sizes, which is why they are incompatible with modern adaptive layout. We need a new method of creating banner advertising. We need adaptive banners ...

New banner format

The only way to make the banner as flexible as our HTML5 markup is to write it in HTML5. At first this may seem like a crazy idea, but I assure you that it is not. In fact, this approach has many advantages:

• HTML advertising is available everywhere , and semantic markup will make it suitable for screen readers ;
• text, images, videos, scripts and forms - all this can be used in the banner in the same way as on any web page;
• if necessary, banners can use dynamic scripts and databases on the server side ;
• the banner may be amended after its placement ;
• the file (set of files) of an HTML banner can have a very modest size ;
• banner serving essentially boils down to web hosting ;
• web developers do not need to learn anything new - all technologies remain the same as with conventional web development;
• and, of course, using CSS3 media queries, you can make HTML5 ads "adapt" to any size - after all, this is the behavior we expect from responsive banners!

How to achieve this?

Firstly, the banner is created as a rubber HTML5 page. We fill it with text, images, links to the desired page, decorating it all with CSS3. Secondly, such a banner can be placed on any website through a floating iframe. There is one trick that uses CSS3 media queries to make the iframe dynamic dimensions, and soon I’ll talk about it ... However, by and large, that’s all!

A little demonstration time

Here is an example of the HTML5 banner of the popular 125 x 125 px format (“square button”). And here is an example of the same banner with a modified width. Notice how this banner behaves when resizing the browser window. Elegant, isn't it? :)

New banner size agreement

Adaptive layout requires that the page elements have a variable width, so banners must also adhere to this agreement. Height in adaptive layout is not so important, i.e. we can choose any height value we need. But this does not mean that our banner will “get stuck” on this value - we can define many values ​​for any banner!

To maintain backward compatibility, responsive banners should have the same height values ​​as traditional banners. Theoretically, we can create banners that work with any width / height, but they are too difficult to design or test. I suggest starting from the minimum width of 88 px and stick to the following set of standard heights:

31px “micro”

• micro strip (88 x 31)

60px button

• button 2 (120 x 60)
• half long banner (234 x 60)
• long banner (468 x 60)

90px banner

• Button 1 (120 x 90)
• horizontal (lead) long (728 x 90)

125px "small rectangle"

• square button (125 x 125)

250px Medium Rectangle

• vertical banner (120 x 240 * Close enough!)
• pop-up square (250 x 250)
• Medium Rectangle (300 x 250)

400px Big Rectangle

• vertical rectangle

600px Skyscraper

• skyscraper (120 x 600)
• wide skyscraper (160 x 600)
• half page ad (300x600)

The seven heights above represent a range of vertical sizes; in combination with a variable width, they cover the most popular banner ad formats today . Of course, as with traditional banners, you can use a different, non-standard format.

The most remarkable is the fact that 14 generally accepted banner formats come down to just seven, all of which can be represented with just one HTML5 banner ! In addition, my demo banner takes up less than 25k along with all the components (HTML, CSS and JPG image).

Try these new formats in my responsive banner app.- with it, you can test your own banners. Resize your browser window to see how they all “fit”.

Resizing an iframe using CSS media queries

Sometimes it may be necessary for your banner to adapt also in height - this can be achieved by resizing the iframe using CSS media queries. I found that the best way to do this is to set the height and width of the iframe to 100% and wrap it with a div with a special set of sizes in CSS. Here's what it looks like:

And here is the CSS:

/* default height */
#ad {
   height:60px;
}
@media only screen and (height:90px) {
   /* 90 pixels high */
   #ad {
      height:90px;
   }
}
@media only screen and (height:125px) {
   /* 125 pixels high */
   #ad {
      height:125px;
   }
}

Open the CSS file of my responsive banner to view a working example.

Tracking (tracking) of impressions and clicks

Another great feature of HTML5 banners is that they can be tracked in Google Analytics - just like a regular website. In fact, we get a lot more data than from a typical ad serving system. You can reliably track not only the number of banner impressions (banner impression tracking), but also referrers, browsers, screen resolutions, mobile devices, popular countries / cities and much more!

In addition, the task of tracking the number of clicks on a banner can be easily solved using one of the many free link reduction services. Personally, I prefer bit.ly. If your banner contains a large number of links, you can track them individually. Just do not forget to add target = "_ top" to the hyperlinks so that the ad "goes" beyond the frame, completely capturing the browser window.

Storing banner sizes in meta tags

Responsive banners can be made to support any set of sizes, but in order not to comb CSS in search of supported height values, I suggest writing them in the META tag. Take a look at an example:

This is good practice because the META tag is machine readable. In some cases, for your browser to display correctly, you may need to find out alternative sizes.

To summarize the above

For adaptive layout banner ads with variable width are needed, and I believe that HTML5 is suitable for this as well as possible. Using a little CSS trick, we can create a banner that alone is capable of accepting all currently common formats. Download an example of my banner and try to write something like that yourself. Do not forget to test your creation in my application for testing responsive banners . If you want to place a responsive banner on your blog or website, just copy the code below (just set the size you need):

Contact me if you have any suggestions or bug fixes. I did not have the opportunity to test everything in IE ... I have a son who is only 11 days old and a 20-month-old daughter, so I do not have much free time ... Incredible, but I still managed to finish this article!

---

The humble opinion of a translator

Some are quite critical about the implementation of HTML5 (HTML5 + CSS3 + JavaScript bundles) in various areas of development: banner creation, the game industry, and so on. And I can not disagree that today there are enough problems related to performance (CSS3 Transition, JavaScript), lack of sufficiently powerful design tools (Adobe Flash vs Adobe Edge) or the need to study and develop new technologies, techniques and approaches. But for me personally it is obvious that all these problems are not critical, therefore, taking into account the pace of development of everything and everything in IT, it remains only to wait a bit.

PS sandbox attribute added in HTML5 for iframe tag, allowing you to impose restrictions on the content of the frame. Perhaps this fact will help smooth out the wave of paranoia that sometimes covers the iframe. True, with support in different browsers is still weak (you can check here ).

UPD: A bit of sound criticism.