Responsive Web Design

Today, we hear a lot about the term "responsive web design." What is it, what problems doe it address, how does it solve them, and why is it important now?

Today, more and more people are accessing the web while they are "on the go." Frequently, they do not have a full-size computer with them. Instead, they search for web content on their tablet computers and even on their mobile telephones. As web designers, we recognize that we must meet the needs of these mobile viewers if the sites we design are to attract their attention.

In researching this topic, I've found the following statements from two authorities on the subject:

It’s fair to say that the web has moved beyond the desktop, and it’s not looking back. Mobile traffic has exploded over the past few years, and the number of devices we’re designing for – from phones to laptops to tablets, even game consoles and e-readers – is growing just as quickly.

The web's moved beyond the desktop, and it's not looking back. The number of devices we're designing for is growing just as quickly as mobile traffic.

- Ethan Marcotte

One way we’ve dealt with transition is by establishing some constraints: building mobile- specific sites, or perhaps apps tied to a specific device’s OS, each distinct from the traditional ‘desktop’ experience. And there’s absolutely nothing wrong with that! Each offers elegant solutions to the very difficult problem of designing beyond the desktop. But the one characteristic they share is that they require fragmentation of our designs, our content across different contexts, different devices.

Responsive web design offers an alternative. By marrying fluid, grid-based layouts and CSS3 media queries, we can create one design, that responds to the shape of the display rendering it. It’s a more unified, more holistic approach to design, one that doesn’t see the web’s inherent flexibility as a constraint to be limited. Instead, we can finally design for the “ebb and flow of things.”

- John Alsopp

The Xpertwebs website has been designed with responsive design. If you resize the browser to make it narrower, you will see that the content re-flows to fit the new width. As you continue to make it narrower, you will see that the boxes above this paragraph will suddenly be displayed one above the other and the content of the page moves under the navigation menu. This allows the page to be displayed effectively on a tablet computer and even on a mobile telephone.

Of course, not all responsive websites have content in columns or in boxes. This page was designed in this way in order to illustrate the way responsive design works.

Today, Xpertwebs encourages our clients to allow us to design their websites using responsive design.