Biz & IT —

What’s responsive Web design all about?

Code once, display nicely on any device.

The website for Washington's Sasquatch Music Festival responds automatically to the width of the browser's window.
The website for Washington's Sasquatch Music Festival responds automatically to the width of the browser's window.

When you consider how many different tablets, laptops, Web browsers, and operating systems access the Internet on a day-to-day basis, it's a small miracle that Web designers and developers manage to stay sane. There are, of course, Web standards and entire organizations that exist for the sole purpose of making sure the Internet you see is generally the same Internet that everyone else sees. But the sheer number of devices can pose a bit of a problem when you're attempting to create a site or service that works well for the masses.

In the past, a developer or designer might code a different site for desktop and mobile users, often with some or all of the same functionality. For the most part, in fact, this is still how things are done today. But in some cases, that's beginning to change. A relatively new technique called "responsive design" has been gaining traction over the past few years, and it's promising to change the way we code and interact with the Internet on devices of all shapes and sizes.

Responsive Web design, as the name implies, is a style of Web development where content responds to the device on which it is being rendered. So, while a website viewed from within a traditional desktop browser might be rendered one way, a tablet or smartphone browser will be smart enough to render that same code in a different way—one that takes into account the size and resolution of a smaller screen. Text is reflowed, navigation is simplified, and images are shrunk, or even hidden entirely, and the code to do it all needs only be written once.

The man responsible for popularizing this idea is a developer named Ethan Marcotte. In a 2010 post on website design blog A List Apart, Marcotte bemoaned the growing trend of mobile experiences quarantined from desktop sites. "What’s next?," he asked. "An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience?"

For a small- or medium-size business, that's an especially good point. When design and development resources are in short supply, it doesn't make sense to waste time maintaining separate desktop and mobile sites. The ability to make changes once, for example, and have those changes reflected across myriad platforms can help a business reach a wider audience than with a desktop site alone. In fact, responsive design means that a business's mobile presence is no longer an afterthought, but by default becomes a fundamental part of the design and development process.

If you want proof that responsive design is going mainstream, you need look no further than some of the Internet's biggest Web properties. The Boston Globe's website, for example, is probably one of the most lauded and recent examples—and it was developed, in part, with help from Marcotte. You can try resizing your browser window to see for yourself. Even Google is beginning to embrace responsive design, with a guide on one of its Webmaster blogs, and changes to the way its About page and Chromebook site are rendered across devices.

Of course, if responsive design is such a game changer, why isn't everyone using it by now? The short answer is that it simply isn't right for everyone. Because of differences in how ads are served on mobile and desktop sites, larger, editorially driven sites can often have a harder time embracing responsive design. Or, in other cases, mobile sites boast certain features or functionality that developers feel don't translate well with responsive design. Complexity can be complicated.

LinkedIn, for example, recently launched a new version of its iPad app, coded almost entirely using HTML5 and Node.js inside a native app wrapper. However, Kiran Prasad, who heads up LinkedIn's mobile development team, avoided responsive design for a good reason.

"You can’t take a mobile app and just scale it up to tablet or desktop," he said in an interview with VentureBeat late last month. “A lot of responsive design is building one site that works everywhere and that works for websites. But it’s bad for apps… You have to come up with a completely different design because of the use case."

And Prasad does have a point. Though Google, for example, is encouraging responsive design for simpler, static sites, it seems unlikely—as Wired's Webmonkey blog points out—that the likes of Gmail or Reader or Docs will get the same treatment anytime soon. Responsive design isn't a magic solution that will make mobile development easier, after all, but in the right situations, it can make the end-user experience more consistent. And in a world of tablets, smartphones, laptops and more, consistency is increasingly key.

Channel Ars Technica