Think about it: How many times have you picked up your mobile phone to look up a website, only to find yourself scrolling and zooming… panning feverously trying to find your way around? While you can usually find what you’re looking for, it certainly doesn’t present the best user experience.
Today, with the newest set of Internet-capable devices ranging from smart phones to tablets (along with a growing list of others of varying size), it has become more difficult, if not impossible, to control the user experience. More and more people are browsing the web with mobile devices first, and they expect to be able to do it just as easily as they do on a desktop computer.
To address this, the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the best solution, but at the time it seemed reasonable. Every website would have their normal “desktop” version and, as a bonus, a “mobile” version.
This definitely provided a better experience on a phone, but what about all the other devices? With the list of screen sizes and resolutions growing every day, creating a different version of a website that targets each individual device just isn’t practical.
This is where Responsive Web Design (RWD) comes in. RWD is a web design approach aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices, from desktop computer monitors to mobile phones and everything in between. To put it simply, responsive websites respond to their environment.
Two keys to responsive web design
RWD isn’t a single piece of technology, but rather, a collection of techniques and ideas. The two main concepts behind RWD are fluid grids and media queries.
Fluid grids are designed using proportions, rather than rigid pixel dimensions or arbitrary percentages. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize in relation to one another.
Fluid grids are very important for responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn’t going to work very well on a small mobile phone. The solution is media queries.
Media queries basically allow you to gather data about the site visitor’s device and use it to conditionally apply CSS styles that format content optimally for that device. A simple example would be to use a media query to target a few key window widths — desktop (900 pixels), tablet (600 pixels), and mobile (480 pixels) — and present different-sized text in varying column layouts for each.
The real beauty of a responsive site is its ability to format the same content appropriately for every device it’s being viewed on, with no need to create and maintain multiple versions of a site.
Responsive design is still in its early stages, so you can expect to see more innovation as more sites start implementing this technology. Given its tremendous benefits and scalability, I don’t see this as a mere passing fad either — RWD is here to stay. In the not so distant future we’ll just refer to it as “web design.”
With RWD, one size does fit all.