The age of responsive design is upon us. Although it’s likely more a phase than an age. Mobile web grows so fast, it’s probable responsive web design will be outmoded when native apps can outdo them, or web apps can deliver a better user experience.
Until then, responsive is the way to go for brands and advertisers. Essentially, this means building your site (or ads within it) so that the layout adapts automatically to the user’s browser and screen resolution.
Engadget provides a good example as whatever device a user visits its site on – desktop, tablet or smartphone – the layout adapts to the user’s browser width automatically and elegantly.
Desktop:
Tablet:
Smartphone:
New Australian homewares store Avago is another example. And increasingly, there are many others. So, why bother building your site and ads in a responsive way? Flexibility is one reason. Responsive design means your ad placements fit virtually any screen, saving time and money creating multiple versions.
Most advertisers know well the headache of building ads to meet the specifications of the long list of handset and tablet designs (iPhone, Android, Blackberry, Nokia, HTC, iPad, iPad 3, iPad 4, iPad Mini, Surface, Nexus 7, Nexus 10, Galaxy Tab, Galaxy Note, NOOK, NOOK HD, Kindle, Kindle Fire, HP ENVY), and ‘popular’ screen resolutions (1920x1080, 960x640, 1024x768, 1136x640, 1440x900, 2048x1536, 1280x800, 1440x900, 1024x600, 240x432, 1366x768, 320x240, 720x1280, 480x800, 768x1280, 960x540). Responsive design skirts these altogether, adapting automatically.
Meeting the needs of users reluctant to download an app to visit your site is another reason. Responsive design makes a good halfway house between trying to force consumers to download your app for the optimum experience and attempting to cram your desktop site onto their mobile device.
With responsive design, advertisers create one ad that contains multiple images (if you are running a standard banner campaign). Three to six images in different dimensions cover most handsets/tablets/resolutions and display on most devices. Even better, when the user changes 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-centred video player or elements that 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 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.
Roey Franco
Product Manager, Rich Media, Mobile
DG MediaMind