Web Templates Blog

Responsive layout enjoys great popularity among web designers today, as the part of mobile traffic in general internet output constantly increases. A lot of online merchants make money on advertizing. It’s rather distressing, but the ads may simply disappear or become unreadable when a website contracts to 320px, for instance.

Here are some major impediments responsive advertising has come across:

• great amount of sites lean on advertising;
• ad blocks are fixed and have standard sizes; (most of them do not fit multiple layout options)
• ad units are sold and created according to their size and position on the page;
• ad types are various including takeovers, video, pop-overs, flyouts and interactions (most of them are not supported by mobile platforms).

Processing from the necessity of ad blocks compatibility with responsive layout, there are several ways out of the awkward situation. The easiest way is to adapt the ad with the help of HTML and Javascript (works best for static ads, below you will get to know how to realize it) or to use the responsive ads framework, which is one of the most efficient solutions for the moment.

* * *

Responsive web design still stays a new technology; we believe that special responsive advertising know-how will emerge before long. So far, web site owners can use one of the stated above solutions, placing one ad per page, which can be easily modified to fit almost all screen sizes and resolutions.

Nevertheless, online newspapers and magazines need much more ads of bigger sizes to stay afloat. The most called-for format is 300x250px.

Beginning with the smallest size (usually 320px wide) and going up to 1382px wide definitely makes sense – especially when it comes to advertising. If you are able seamlessly integrate advertising into your design at 320px wide, the same operation at bigger resolution shouldn’t be too difficult—it’s a matter of shifting elements and thorough ads positioning. Planning beforehand always saves efforts.

Possible solutions:

• Traffic redistribution
• Responsive HTML ad using Javascript interface
• Flexible Responsive Ad Framework

Actually, large ad formats such as 300x1050px or 970x250px do not fit the iPhone screen, but it is possible to hide them and reveal only for the users surfing from a stationary computer. Even the usage of display:none function doesn’t save the situation, the ad code will be loaded, resulting in new problems.

It would be much more efficient to use Javascript for screen width estimation and impediment a particular div section from loading, JS can be turned off by the user, though most of the ads are displayed with its help.

Traffic redistribution

The best possible solution might be better planning! When you launch an advertising campaign on your responsive website take into account the scope of traffic and do the following.

Due to the extensive traffic flow, you may dispense your registry and retail advertising packages for mobile devices, tablets and PCs separately. It will be a great alternative, convenient both for you and your customers.

Responsive HTML ad using Javascript interface

The option is helpful only for static ads, it can’t fix the issue with rich media and ad server implementation but the positive moment is that it is rather easy to carry out. The ad is being built with HTML, actually it turns into static image. Instead of incorporating the responsive logic into media queries you can add a JavaScript interface, the configuration part of which is like this:

// Ad config
var ads = {
  leaderboard: {
    width: 728,
    height: 90,
    breakpoint: false,
    url: '728x90.png'
  },
  rectangle: {
    width: 300,
    height: 250,
    breakpoint: 728,
    url: '300x250.png'
  },
  mobile: {
    width: 300,
    height: 50,
    breakpoint: 500 ,
    url: '300x50.png'
  }       
};

The trick lets you define some parameters to your responsive campaign and then JavaScript will do the rest. The method applies window.matchMedia, currently available in Chrome, Firefox, and Safari browsers.

Flexible Responsive Ad Framework

Similar to the way designers approach RWD with different frameworks for development and laying out varied designs for diverse views, you can use a framework to manage ads direction and network party ad tags across the website.

* * *

The Boston Globe website is a bright example of responsive ads implementation, where they incorporated an MMU ad unit. They have fixed the width of the column and made the ad block occupy that space as the viewport is reduced to a single column. The method is rather sophisticated, yet very productive.

* * *

As you see, the ideal solution hasn’t been worked out yet. All of us need it badly and the sooner the better, as there is a threat that responsive layouts might lose a lot of adherents due to their inability to preserve the ad contents under any circumstances and screen sizes. We are sure that this complex urgent task will only whip up web developers’ creativity and we will get a powerful lightweight tool for swift and simple ad accommodation in the nearest future.