The idea of responsive Web design is that you create one website design, one structure for loading a Web page that will respond automatically to the device at the client-side, adapting to the screen width, and rendering a semi-tailored interface for it. And the W3C, which shepherds Open Web Platform standards such as HTML and CSS, is helping to frame the discussion about development for mobile devices.
Briefly, responsive Web design is done through fluid grid technology, which sets the width of the Web page at percentages based on the width of the device, rather than at fixed widths. As the screen shrinks, the HTML and CSS will hide some elements the screen has no room for, or switch from a three-column format to two-column, or even perhaps change the navigation to make it more mobile friendly.
The term was coined around June 2010—Ethan Marcotte on the website A List Apart has written extensively on the subject—and has come to the fore with the explosion of smartphone and tablet devices of all sizes coming to market.
In responsive Web design, the browser knows its own width (thanks to a property in CSS3 called media query), and loads what it’s told to load based on that width. Eric Overfield, founder of a branding company called PixelMill, explained it like this: “So how does the server know what to send to the client? In the responsive world, the server doesn’t care. The server always sends the same files to every different device. Then the device is given enough information to know how to render the page itself.”
This, though, is also one of the major problems with responsive Web design, Overfield acknowledged. “There are plenty of people who think responsive design is a really bad strategy, but they’ve been kind of laughed off the stage. But one of their main complaints is that every device, including that mobile device on that real-expensive AT&T mobile plan, has to download all of the data, all of the styling, that it might not even need,” he said. “It might not even have to download those 80KB rotating banner images that it will never even display because you’re not going to have a 900-pixel-wide banner on a mobile phone.
“One of the major problems with responsive Web design is the bandwidth concern. Since every device gets all of the same data, even if it doesn’t need it, it’s a shame you’re forcing a [megabyte] of data or more on a mobile device that needs maybe 50KB or 100KB.”