Responsive design aims to make web pages compatible with all devices—without relying on the creation of multiple layouts and styles. Because of the explosion of mobile and tablet devices, constructing multiple versions of a site for all possible users is no longer feasible. Instead of device-specific versions, responsive design relies on flexible layouts, images, and cascading style sheet media queries. Its goal is to detect a user’s screen size and orientation, adjusting those flexible designs accordingly.
The fluidity of responsive design approach comes from a combination of strategies. Layouts are made flexible through proportion-based grids—and percentages, not fixed pixels or points, determine size. Likewise, images always fit properly on the page, since they are designed to display relative to their containing elements. Finally, cascading style sheets work in conjunction with media queries to determine how the page is being accessed and to render it optimally for that device.
Expect to see responsive design supersede traditional fixed approaches over the next few years. It’s a win for both user and site owner–enhancing user experience while cutting design and development costs. As web users become more and more accustomed to switching from laptop to tablet to smartphone, their expectations for seamless transitions between devices increase. Responsive design approaches offer that seamlessness, creating an optimized user experience. Web pages adjust automatically to any screen, without excessive panning, scrolling, and resizing.
This fluid approach to design also cuts costs significantly. Creating one universally adaptable website eliminates the need for a brand-new design and development process each time a tinier tablet, a bigger smartphone, or some other new gadget enters the market.
In June, 2012, Google recommended responsive design as the best configuration for rendering web pages appropriately on smartphones. And for those with SEO concerns, the search giant made its preference clear: “[With responsive design] Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.”
Google’s recommendations are especially important given that sales of desktop and laptop computers are in decline across nearly all manufacturers. The last half of 2012 represented the worst PC sales since 2001—due to both poor economic conditions and consumers’ increasing reliance on cheaper gadgets for web access.
The exponential growth of mobile is redefining web design standards. Mobile users demand fluid display and easy navigation, and business owners and developers can no longer predict what size screens their sites will display on. The flexibility of responsive design makes it a universal approach; and, with Google’s blessing, it is quickly becoming the standard.