Techniques for Responsive Website Advertisements

More users are getting onto smartphones and accessing websites on a daily basis. There are methods for rendering these websites the same as on a desktop, but you lose the basic scale of mobile screens. And many times it is not reasonable to include the same images from your desktop website into the mobile world. Responsive media has only been around for a few years, but designers are looking for solutions.

In this article I would like to present the idea of mobile responsive advertising and how it may work in the future. I cannot claim to have all the answers, but I do have some insight which may help to stir up discussion. Ideally we would see more websites growing in support of mobile advertisements which can improve marketing statistics.

Why Design for Mobile?

This is an interesting question to pose before jumping out to fix your advertising model. I would argue that banner ads have become very complacent among typical Internet users. You will still get plenty of clicks by pushing hundreds of thousands or millions of pageviews. But consider how many visitors just ignore these altogether.

It seems like mobile websites have the opportunity of replacing an outdated model with something more unique. Customization is what will sell anything, and making the user feel like the advertisements are perfect for themselves. I would argue that many of the people accessing Internet on their cell phones are bored or wasting time while waiting on something.

This is the perfect demographic for leading astray into new content via advertisement banners. Users are more likely to deflect off a website and check out one of their ads if they are in no hurry to find something. This user class is exactly what we need to build a stable ground framework into scaling for mobile advertising.

Responsive Ad Packs

An idea posted by Mark Boulton suggests webmasters should present marketing packages instead of selling individual ad slots on your website. This offers a solution where both parties may choose the best platform to reach users and enhance CTR. This also offers a solution where you can provide 2 distinct sets of advertisements – one for desktop users and the other for mobile.

The specifics of pricing and switching out ad content can be updated based on each project’s needs. But in general you would store copies of banner ads in different formats for each version of the website. Mobile responsive ads should be designed to fit perfect on mobile screens. Generally you would want to place these above-the-fold or blended nicely into the content.

The latter method can often trigger accidental clicks as users are scrolling down the page. This can get annoying if the reader is not prepared, so proceed with caution in this area. But ultimately the goal is to present usable advertisements without destroying your layout’s credibility. Packages are often the best way to work around recurring bills and setup fees.

Fixed Banner Objects

Now moving away from the structure of advertising we should look into a newer style. Responsive ad banners may not be as easy to design considering the lack of screen space. To include small text or icons may be difficult to see unless resized properly.

But consider if the banner image itself must be resized to fit the user’s device width. This could be a problem if the height is too small, and now the banner appears distorted. A potential fix is to have the banner stationary on the screen and fitted to 100% width of the device. Then as the user scrolls down the page you’ll see the ad block pinned at the top or bottom.

A very educational article on this topic was written by Josh Clark discussing People Magazine’s techniques for mobile ads. The idea is to offer a larger preview when the user clicks an ad, possibly without refreshing the page. You can open a fullscreen preview or have some more info dropdown when the user clicks on the banner. Also placing a small X button in the corner is a nice courtesy to the user for closing these ad blocks, or removing them altogether.

Inter-Page Transitions

If you have the ability to separate desktop-based advertising from mobile users then interstitial ads may be a very profitable idea. These are pages which contain full advertisements and are loaded in-between website visits. You have probably seen these ads take over a screen with the “Continue” button in the top right corner.

The idea works much better on mobile since you have less space to work with. Users can still quickly skip the advertisements if they are not interested and you’ll be targeting designs specifically for responsive web browsers. This means you can skip the idea of banners and go right for scalable text, icons, and logos.

I’d like to give my 2 cents on this idea and say that it will work great in some cases, horribly in others. You should consider what content you are bringing to the table, and what is the majority of your visitor’s demographics. Most users will just leave out of annoyance if you are loading advertisements on top of the site. But if your content is worth the wait then you can get away with these types of interstitial advertisements a lot more often. I suggest performing a few case studies using A/B split testing to see how your audience reacts.

Text Links & Beyond

One of the more obvious solutions to this question of responsive advertising is sticking with basic text links. These have worked for decades selling ads on the Internet, so why stop now? You may cater these links towards your mobile visitors based on region or search terms or other qualities.

The mobile advertising company AdMob is an excellent proponent in the field, which sold to Google just a few years prior. Now their technology has been in development for quite some time and is producing some fantastic results. I definitely recommend mobile ad publishers should check out AdMob and see if this could fit into your network. It is difficult to find your own connections with advertisers and sometimes using a 3rd party is the best solution.

However I also feel the mobile realm is very young and we are just getting started. Web developers will constantly be striving towards solutions for mobile responsive advertisements. And marketers are always looking for new methods to increase ROI and clickthrough rates. Be sure to keep your eyes peeled for new trends in the mobile world as newer ad technologies and open source libraries are released into the public domain.

Final Thoughts

There are a lot of ideas presented here, some more intriguing than others. Overall I hope you can walk away with a newfound understanding towards digital marketing and mobile-responsive advertisements. The idea of supporting mobile banner ads will grow over time and we will definitely see lots of advertisers jumping onto the bandwagon.

The iPhone and many Android devices offer beautiful support for HTML5 web browsers. The software is already in place and the users have been flocking in droves. The only step left is for developers to piece together a solid framework which manages responsive ads and provides good marketing results. If you have any ideas or further questions on mobile responsive web advertising we’d love to check them out in the post discussion area below.