Welcome to the responsive design era. Okay, maybe it’s more like a phase. Or even a blip. Because the mobile web grows fast. Real fast. And responsive web design will be outmoded when either native apps can outdo them, or web apps can deliver a better user experience.
In the meantime, responsive is the way to go. Essentially, it means building your site (or ads within it) so that the layout adapts automatically to the user’s browser and screen resolution.
For example, Engadget.com is a responsive site you might experience in any of three layouts based on your device. The content remains the same, but the format served is automatically determined by your browser width.
Tablet- portrait mode:
So why bother building your site in a responsive way? One reason is flexibility. You can maintain ad placements that can fit virtually any screen. With a native app, publishers are confined to ad placements hard coded into the app.
Another is to meet the needs of users who don’t want to bother downloading an app in order to read your news right now. Maybe they reached your website randomly through another app or site, and you want them to stay without forcing them to download your app – or worse –cramming your desktop site onto their mobile device.
Here’s the hitch. Or rather, a long list of hitches: iPhone, Android, Blackberry, Nokia, HTC, iPad, iPad3, iPad4, iPad mini, Surface, Nexus 7, Nexus 10, Galaxy Tab, Galaxy Note, NOOK, NOOK HD, Kindle, Kindle Fire, HP ENVY…
Handset and tablet fragmentation is off the charts, as is the range of “popular” screen resolutions:
1920x1080 960x640 1024x768 1136x640 1440x900 2048x1536 1280x800 1440x900 1024x600 240x432 1366x768 320x240 720x1280 480x800 768x1280 960x540
This fragmentation is especially daunting from an advertising perspective. Do advertisers have to build ads to target all these devices and specs? Do they need to build a different ad for each device? Happily, the answer is no. In fact enabling responsive ads is a lot simpler and more cost-effective than you might imagine.
The solution for advertisers is to create one ad that contains multiple images (if you are running a standard banner campaign). Three to six images in different dimensions will cover most handsets/tablets resolutions and display on most users device. Even better, when the user changes his or her screen orientation and thus display, ads can respond automatically – choosing among versions to offer the best image. In fact, a responsive ad can conform to either fit the browser width or fit the actual placement dimensions. Add rich media features such as an always-centered video player or elements always stick to the sides of the banner, and you have a Transformer-like ad that adapts perfectly to the screen at hand.
For an example, check out this link from your mobile device, or scan the QR code below (or just go to bit.ly/QHLnjj on your mobile browser):
From a desktop, you will see this ad as a 300x250 banner.
From a mobile phone in portrait mode you will see a 320x50.
In landscape, the ad becomes an animated (by using a GIF)960x160 ad:
With three versions, this advertiser achieved an engaging experience across 99% of user devices.
Responsive ads make life a lot easier in a mobile world. One multi-version ad can run on virtually all devices and platforms without a lot of costly production time. And because there’s only one tag for all the versions, there’s no complex integration necessary.
Until the next phase of mobile technology arrives, responsive design provides an efficient solution for publishers and advertisers to reach consumers on their devices of choice.