Monday, January 14, 2013

Techniques for Responsive Website Advertisements


Advertising is big money on the Internet. This is very clearly demonstrated by some of the most popular blogs such as Mashable, TechCrunch, Engadget, TorrentFreak, and others. But so many developers have not considered the possibilities of mobile advertising.

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.

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.

Android smartphone browser interface photo design ads

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

adpacks website interface buysellads classy websites

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.

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

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.

admob smartphone sales marketing internet website design

Final Thoughts

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.

Review of Popular Web Design Trends from 2012
The Dark Side of User Experience Design
The Flat Design Aesthetic: A Discussion
Design Patterns for Creating Exceptional User Interfaces on the Web
User-Centric Website Design
Responsive Image Techniques & Resources



Source : internetwebsitedesign[dot]biz

0 comments:

Post a Comment