This article was updated on 9/27/12.
Trends in Web design have a tendency to come and go. Responsive Web Design, however, is looking more and more like one of those trends that will one day become an industry standard.
Responsive design is the concept of developing a website design in a way that helps the layout to change according to the user’s computer screen resolution. It affects layout (including menus), image/video size, and now even the amount of text you can view on a page as the browser size is reduced. The result are sites that aim to keep the most important elements on screen and prioritized, no matter the browser size and orientation. It’s three most essential elements are:
- Fluid Layouts
- Flexible Images
- Media Queries
With many different approaches, methods and variables at varying levels of adoption and use, it is easy to become confused about the purpose and benefit of responsive design. As Web specialists, we need to understand its value from a design, development and marketing point of view and how using it can create value for clients. Before employing or adopting a responsive design there are several key components that need to be understood:
- Design Process
- Development Considerations
- SEO Impact
Website design is a complicated process. Adding a responsive element makes that an even more complicated process - a desktop site is now the same site that will be viewed also on tablets and mobile devices, except it will look much different. This means that when a site is designed to be responsive, it requires two additional designs: one for tablet size resolution (smaller than 980px wide) and another for mobile devices. Below is a look at The Boston Globe's use of responsive design below, which is an incredibly text heavy site.
Conversely, a website designed for the Clean Air Challenge has a drastically different look, as the site has different goals and is much more image driven.
Each of these layouts requires a re-prioritization of the content that is displayed on the screen based on the sites established goals as the browser size changes. An ecommerce website design with a large complicated navigation menu that is essential for user experience will need to be reconsidered for mobile display.
The fact that your design will be scaled down into a mobile version must always be kept in mind as you are working; including the impact this size change will have on fonts, calls to action, menus, navigation, forms, and other essential site elements.
Search Engine Optimization is a huge part of what makes for a successful website. It is not worth building a website that cannot be found through an Internet search. This means that SEO objectives must be kept in line with design and development of Responsive sites. Luckily Responsive design lends itself to good SEO, if done correctly. Having all browsers access one site in different layouts instead of three different sites, is better from an SEO perspective. Developing multiple sites can dilute SEO performance because the three of them compete against each other for traffic. So, why not send all users on any device to the same site? This removes the need for re-directs, allows mobile site users to share links that rank easily via social media outlets, and prevents mobile sites from stealing search equity from Desktop versions.
Responsive Design creates more engaging user experiences, benefits SEO, and eliminates the need for multiple site versions for each platform or device. But it is still a new practice, and its adoption needs to clearly understood and assessed on a case by case basis. The process of design, development, and optimization will be affected in many ways, depending on the scale and complexity of your web design project. You may even find that your content does not lend itself to Responsive Design and that using it as a method would not benefit your sites goals. Any of the items discussed in this article could be easily extrapolated further, and there are myriad factors to keep in mind before moving ahead with a Responsive Design. For more information on development methods, general best practices, and live examples check out the following articles on responsive design.
Check out these additional resources: