Responsive web design is a significant achievement for the entire web. We are no longer constrained by the long-obsolete model of the “printed page” with static content divided into areas of 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 - up to huge video displays. This is what the Global Network was supposed to be.

But there is a small problem. Websites 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 ads. We need "adaptive" banners ...

New banner format

The only way to make a 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 can be changed after its placement ;
• the file (set of files) of the HTML banner can be quite modest ;
• banner serving , essentially, comes down to web hosting ;
• Web developers do not need to learn anything new - all technologies remain the same as in conventional web development;
• and, of course, with the help of CSS3 media queries, you can force HTML5 ads to “adapt” to any size - after all, we expect this behavior from responsive banners!

How to achieve this?

First, 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 by means of a iframe floating frame. There is one trick involving CSS3 media queries to make the iframe’s dynamic dimensions, and I’ll tell you about it soon ... However, by and large, that’s all!

Time for a small demonstration

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

New agreement on the size of banners

Adaptive layout requires that page elements have a variable width, so banners must also adhere to this agreement. The height in adaptive markup 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 a set of values ​​for any banner!

To maintain backward compatibility, adaptive banners should have the same height values ​​as traditional ones. Theoretically, we can create banners that work with any width / height, but they are too difficult to construct or test. I suggest starting from a minimum width of 88 px and sticking 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 (leading) 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 size rectangle (300 x 250)

400px "big rectangle"

• vertical rectangle

600px "skyscraper"

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

The seven height values ​​above represent a range of vertical dimensions; in combination with a variable width, they cover the most popular banner advertising formats today. Of course, as is the case with traditional banners, you can use a different, non-standard format.

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

Try these new formats in my application for testing responsive banners - with its help you can test your own banners. Resize your browser window to see how all of them “adapt”.

Resizing an iframe using CSS media queries

Sometimes it may be necessary for your banner to also adapt in height - this can be achieved by changing the size of 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 in a div with a special set of sizes in CSS. Here's what it looks like:

<div id="ad"> <iframe src="ad.html" border="0" scrolling="no" allowtransparency="true" width="100%" height="100%" style="border:0;"> </iframe> </div> 

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 see a working example.

Tracking (tracking) hits 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 advertising 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 by using one of the many free services to reduce links. 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 advertisement "goes out" beyond the frame, fully capturing the browser window.

Store banner sizes in meta tags

Adaptive banners can be made to support any set of dimensions, 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:

 <meta name="displayheight" content="31, 60, 90, 125, 250, 400, 600" /> 

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

Summarizing the above

For adaptive layout, banner ads with variable width are needed, and I believe that HTML5 is the best for this. With the help of a small CSS trick, we can create a banner that alone can accept all currently popular 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 desired size):

 <div id="ad" style="width:100%;height:90px;" > <iframe src="http://matthewjamestaylor.com/responsive-ads/ad.html" border="0" scrolling="no" allowtransparency="true" width="100%" height="100%" style="border:0;"> </iframe> </div> 

Contact me if you have any suggestions or bugfixes. 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!

---

Humble opinion of the translator

Some are quite critical about the introduction of HTML5 (bundles of HTML5 + CSS3 + JavaScript) in various areas of development: the creation of banners, the gaming industry, and so on. And I can not agree that today there are enough problems related to performance (CSS3 Transition, JavaScript), the lack of sufficiently powerful design tools (Adobe Flash vs Adobe Edge) or the need to learn 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 only remains to wait.

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

UPD: A little sensible criticism.