Responsive web design is all about setting up a website to display well across the many varieties of computers, monitors, screen resolutions and screen sizes—especially mobile platforms—and it’s a rare designer who hasn’t wrestled with this issue more than once by now.
Typically a responsive design will allow site visitors to easily view the same page on different platforms without a lot of zooming, resizing or scrolling. When a design is “responsive,” the page automatically changes how content is displayed to best suit the the platform, fluidly adjusting font sizes (larger body text on phones, for example), image sizes, and of course matching the overall width of the page with the available viewing area.
Functional responsiveness is also critical. If you’ve ever struggled to make tiny drop-down navigation menus work on a tablet or phone, you already know that some of what works on a traditional computer with a mouse and a large screen, just doesn’t work on a smartphone. A good responsive design accounts for functionality differences like text fields, checkboxes and drop-down menus, just as it does the content display differences.
However, one of the areas where responsive design has often run into display issues is with advertising. Ads are typically served up as images or multimedia files of a fixed shape and size. So while you might have a large ad at the top of the page, and a square ad in a story—what should be displayed when someone comes to your site on a small screen? Should the top banner be hidden, and the square become a rectangle? And how do you track impressions if the screen size changes (say, the person rotates their tablet from horizontal to vertical)? Even if advertising is served responsively (small ads to small screens), it’s even more rarely designed responsively. Creating multiple versions of the same ad for each platform is a solution that is easy on the site visitor, but tough on the advertiser and the publisher.
Recently, we’ve learned of a number of advertising agencies promoting use of responsive ad creatives. In 2013, Google’s Doubleclick for Publishers added a responsive ad unit. The Internet Advertising Bureau publishing a report on responsive design and ad creatives in Sept. 2012 that is an excellent place to begin learning about this topic. So it’s now possible, if your site is responsive, to serve creatives that are just as responsive.
I’ll leave you with a few links to explore if you’re interested in responsive advertising, and a word of caution: Don’t forget that you’ll need to test your responsive designs extensively to be sure they are effective. We recommend you review your site analytics data and pay particular attention to the platforms most commonly used by your website visitors to see how often, comparatively, people come to your site from a hand-held device. You might be surprised!
Links:
- Wikipedia – Responsive Web Design
- ZURB
- Responsive Ads
- Specless
- IAB Responsive Design and Ad Creative Report
- Google DFP - Building responsive ads
- Designmodo – Responsive Web Design: 50 Examples and Best Practices
- ManageWP Blog – Is Responsive Design Still Not Worth It?
- Smashing Magazine – Making Advertising Work in a Responsive World
- Responsive Logos
Comments