Responsive Web Design 101
“Oh, and I want a mobile site, too.”
This is a request that web designers hear all the time, and one that can open up a world of pain (and questions). Do you mean an iPhone-friendly site, or a Blackberry one? Maybe you meant iPad? Kindle Fire? Android? Some other obscure and/or yet-to-be-invented tablet?
But here’s the thing: maybe you don’t actually want a mobile site. No, really, stay with me. Because in order to reach the most mobile users, you’d have to have various mobile sites ready for various mobile devices, each with its own set of files and data to update.
No, maybe what you actually want–and need, to stay competitive on today’s web–is a responsive website.
When Command C’s head honcho, Sara, asked me to write about responsive design, my immediate reaction was, “Okay…” So she sent me over to the Boston Globe’s site, designed by the very talented people at Upstatement, and had me resize the window, dragging it from a full 960 px wide down to something about the width of my iPhone. (Now go, do the same.)
Sara: “When you shrink down a responsive site (i.e. that one) down on your computer, you can see that at certain widths, the navigation changes–whereas with a mobile version, it’s a completely different site, not using the same file names or, for that matter, the same data (which affects things like Google Analytics because it’s a totally separate site). A Responsive site, however, just changes according to its environment, so it’s essentially the same set of files working differently depending on how it’s being viewed.”
In short, how the site looks and navigates is a direct response to the viewing method it detects.
Command C’s latest launch, the new site for Just Salad, is a responsive site. If you resize your browser to make it fairly narrow, you’ll see the regular-width site morph into another one, displaying different content on a different layout.
So that’s your very brief introduction to what responsive design is–and why it’s probably a better bet for you than a separate mobile site. In the next post, we’ll take a look at what exactly responsive design entails!