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.”
Overfield said there are solutions, though he also said that none are excellent. One involves building containers within containers that will turn on or off depending upon the width of the screen. “It’s kind of tricky to do,” he said, “because if you just turn an image off, or put it in a div to display none, we found using Firebug and SharpWire to look at bits coming across the Internet [that] our machines were still downloading images even though they didn’t need to.”
Trying to limit what gets sent to a mobile device under responsive design is not as easy as people might think, Overfield said. “The CSS is a little more challenging, the div structure takes a little more work. Now, instead of testing your work on Firefox, IE 8, 9 or 10, Safari, and Chrome, you now need to worry about it across all different widths, so in a sense you’ve now doubled or tripled your testing time… It’s actually requiring a little more skill set on the developer because they need to understand widths better, they need to understand CSS better, they need to build better HTML code.”
David Rubinstein is editor-in-chief of SD Times.