‘Responsive’ is today's buzzword in most web design circles, with everyone from business owners to marketing professionals eager to cash in on the latest innovation. Responsive web design is also a source of much confusion, with many people failing to make the distinction between a new piece of technology (which is really isn’t) and a new approach to design that uses current technologies to render websites equally well on a variety of devices.
The key ingredient in responsive design is the use of flexible layouts that automatically adjust themselves to different browsing environments. This means that menus, images and other content will display correctly on a small or large screen, on a smartphone or tablet, iPhone or Blackberry.
One Site to Rule Them All!
Since it would be impractical to make separate sites for each device or browser, responsive web design utilizes tools such as the enhanced functionality of HTML5 and CSS3 to create intelligent media queries that detect resolution and device and scripts that adjust website display according to screen resolution, screen size, image size and scripting ability. The aim is to create one website for every screen, and it’s an ambition that can be realized today, provided you have the time and money. That said, as with the greatest innovations of the past, responsive web design is rapidly becoming the standard and responsive solutions are increasingly available for less of a cost than you'd incur for creating multiple websites.
Key Features of Responsive Design
Fluid layouts, usually based on a flexible grid system, are utilized to display content correctly across devices and browsers. They don’t make your content shinier or flashier except in that they prevent browsers and devices from cutting off vital parts of your page to make it fit a screen. Responsive web design is also about more than mobile sites - it’s about designing sites that can be accessed across all devices, now and in the future. It represents a fundamental shift in the way we think about web design, one that can be better understood by familiarizing yourself with some of it’s key features:
- Navigation is the linchpin: the goal is to make your website easier to navigate, not make it look nice (although that’s a pleasing consequence).
- Flexibility makes it happen, but has limits: automatically adjusting site properties to display well unfortunately won’t improve the quality of your graphics or content.
- Getting ‘On The Grid’: grid-based layouts are the industry preference, as they adjust automatically without cutting out content. ‘Getting on the grid’ is also about creating one single site, with one URL, which optimizes search engine rankings and allows you to track traffic from all devices.
How It’s Used
The pioneer of responsive web design, Ethan Marcotte, was the mastermind behind one of the nets biggest responsive re-designs, that of The Boston Globe. A success in terms of reaching their target demographic, the mobile user, the design team still struggled with distortions created by ads and with the challenge of using media queries that don’t respond well with Internet Explorer. The site has been live for a couple of years, and the design team have now moved on to tackle these challenges, with a particular focus on third party integration.
The Boston Globe is one of a number of news broadcasting agencies, including notables such as the BBC, which have made responsive web design the norm. It’s applications in commerce, public service and non-profit sectors is demonstrated by company sites like Starbucks, the UK Government website and the World Wildlife Fund (WWF). All of these organizations are attempting to create ‘universal access’, and know as well as anyone that they have mere minutes to attract and hold the attention of their audience.
Tools, Techniques and Strategies
The Adobe Developer network published a great collection of “Ten Things You Need to Know About Responsive Design” recently, and “Responsive Web Design” by Ethan Marcotte is definitely required reading. The field itself, however, is not as intimidating as you might fear, and even things like writing and proofing media queries become simple with practice. In practice, though, you may not need to know anything more than an overview of what responsive design is and how it works, and who to turn to for first-class design.
Are you ready to learn more? Download our FREE ebook of what NOT to do!