The Basic Idea
The idea is that when your desktop layout no longer fits on whatever screen it’s being displayed on, it changes to a liquid layout. This allows the design to reflow in an intelligent way, ordering elements from most important to least. Every site design presents a unique challenge, but some common elements appear from site to site. The best example is a main menu that displays horizontally across the top of the website. When horizontal screen space becomes restricted on a mobile device screen, this horizontal approach no longer makes sense. On a responsive enabled site, this menu may instead display in a vertical fashion.
How It’s Done
Creating a responsive site is essentially accomplished by applying CSS media queries. Think of CSS media queries (or simply “media queries”) as conditional CSS that can be targeted to specific ranges of screen widths. To go back to our example of the horizontal menu that becomes a vertical, we may write a media query like this:
@media screen and (max-width: 480px) {
#horizontal_nav li a {
display: block;
float: none;
etc.
}
}
The “@media” signifies we are starting our media query, followed by our conditionals: “screen” (media type) and “max-width: 480px” (the maximum width at which these styles should be applied).
The amount of work involved (and thus the cost of responsive implementation) is directly related to the number and complexity of layouts that have to be made responsive.
Additionally, interactive features on the website, such as slideshows, forms, etc., may need special attention and/or additional Javascript to display correctly.
Today, people who are used to surfing the web via smartphones tend to be somewhat used to dealing with layouts that do not display well. But as this responsive design becomes more ubiquitous, the ‘small screen’ visitor to the site will expect a first class experience. If they do get frustrated, they’ll probably be off to the next site: your competitor’s.
Further Reading
Check out these articles for a more in depth look at responsive design:
- Responsive Web Design [A List Apart]
- Responsive Web Design: What It Is and How To Use It [Smashing Magazine]