One of the most important factors in evaluating a website design is answering the question, “What is the average screen size my visitors will use to view my site?” Over the past few years, this evaluation process has become both more complex and more confusing due to the explosion of Internet-connected devices. Website access has shifted dramatically, and mobile/tablet browsing is expected to surpass desktop usage over the next two years.
The keyboard and mouse are no longer the predominant input tools, and we have gone from designing for three major desktop browsers to a myriad of devices ranging from touch-based tablets and phones; smartphones with tiny keyboards; video game controllers and television remotes. In the near future, high-resolution tablets and computer displays will be on the market, and this change will require that pixel-based web design be completely rethought.
Over the past two years, our clients have requested sites built for specific devices—a “main” site for desktops, a “mobile” version with a specific design intended for smartphones, and more recently an “iPad” version—which is really a simplified version of their desktop site. As you can imagine, this strategy introduces a lot of management complexity and cost into the web design and content management process.
Fortunately, there is is a solution. The recent adoption of HTML5 and CSS3 by browser makers, in addition to some JavaScript-based fallback methods, have introduced the holy grail of inter-device design compatibility: responsive design.
Responsive Design: One Site Fits All (Devices)
Simply put, responsive design is a flexible, device-independent technique that allows a single site layout to automatically “shift and adapt” to any size of browser window on any device, at any screen resolution.
In other words, your site’s design layout will readjust to best fit the screen on which it is being viewed. This is accomplished by shifting the location of navigation and content on the page, adding or removing content, and increasing or decreasing image and font sizes so the site automatically provides the best layout for any screen.
Responsive design isn’t a single technology; it represents a radically different strategic design approach and development workflow. We believe it to be so beneficial that we are often recommending that many of our clients consider responsive design for their content-managed sites.
These are some of the benefits that responsive design offers:
- Adapts your site to a specific range of devices without needing to create a separate device-specific site, or without having to change your content.
- Works in every browser, with native support from IE 9 (which is now being actively pushed to users by Microsoft), Firefox, Chrome, Safari, and via JavaScript-based fallback support for IE 6, 7 and 8.
- Is a process that is compatible with content management systems.
- It is significantly less expensive to maintain and deploy than developing and maintaining separate device-specific versions of your site (even if it does initially require more planning and work than a simple desktop site).
Now that you know what responsive design is, it’s time to learn how to drive implementation within your organization. After the holidays, I’ll discuss drawbacks, introduce you to the responsive design workflow and introduce a strategy for integrating responsive design into your existing sites.
This post will be updated with links to the subsequent articles.
