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.

"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."

You know this article was bad mostly because of this paragraph. You could have added tons of substance to this piece if you would have devoted most of the article to this instead of stupid quotes from people.

What are these differences in advertising systems? Why do they cause problems? Why is it particularly acute for editorial heavy sites? What are these "certain features and functionality" that don't translate well.

As it stands this article is crap. Why do I get the impression that the author is not even a web developer. Not sure if that is true but that was the impression I was left with as the article had almost no content.

P.S. The bostonglobe image hosting seems to be broken when accessed over SSL. Might want to change your link to use http instead. Not exactly a beacon of quality website design when they can't get that correct. (tried it on safari and firefox, broken in both - seems to be there image server at o0bg.com).

It seems to me that responsive design is a great idea for relative simple, static content - the Boston Globe is probably pushing the upper end of what can be accomplished. I agree with Prasad, this simply won't work for apps without significantly dumbing down the experience on the desktop.

P.S. The bostonglobe image hosting seems to be broken when accessed over SSL. Might want to change your link to use http instead. Not exactly a beacon of quality website design when they can't get that correct. (tried it on safari and firefox, broken in both - seems to be there image server at o0bg.com).

Also at viewport sizes below 637px in width, I get a horizontal scroll bar that allows me to scroll the window a whole 10 pixels or so.

Have to admit I was disappointed the Ars re-design wasn’t responsive. Having completed a few in recent months I know it’s substantially harder than static design, but I find myself getting more and more annoyed at m.site.com or mobile.site.com especially when the developers blow it and I get the mobile experience on my iPad.

Responsive Design is almost a misnomer- a term more fitting is Adaptive Layout Design- designing a layout that adapts to the viewer's screen size. It's just about layout.

When designing a site, one has to consider "who" is coming to the site, "what" they're looking for, and "why." Sometimes adaptive layout is the right way. Sometimes a customized, hand-tailored experience for mobile devices is more appropriate.

What are these differences in advertising systems? Why do they cause problems? Why is it particularly acute for editorial heavy sites? What are these "certain features and functionality" that don't translate well.

The difference is that mobile ads are typically deployed via native code API's.

So you got a quote from a guy at LinkedIn... except their mobile site flat out doesn't work and is completely unusable on many devices and the only way to get back to the desktop site after it annoying redirects you for the umpteenth time is under a menu that doesn't work on Android.

LinkedIn is doing it *wrong.*

As for the rest... I've been designing apps for years that scale depending on screen resolution. It's hard when you get to the small, small resolutions, but getting to a 1024x768 tablet size is easy. I'm not sure what the big hoo-rah is here?

I like how comments now are being geared toward bashing the author of the piece instead of commenting on the topic of the piece. When did everyone find the time to get majors in English and Journalism?

Responsive Design is almost a misnomer- a term more fitting is Adaptive Layout Design- designing a layout that adapts to the viewer's screen size. It's just about layout.

When designing a site, one has to consider "who" is coming to the site, "what" they're looking for, and "why." Sometimes adaptive layout is the right way. Sometimes a customized, hand-tailored experience for mobile devices is more appropriate.

Don't get too boggled down in the buzzwords- it's all about context.

I agree completely.

While it's challenging to code for 3 different types of devices (phones/tablets/desktops) as well as the main five browsers, it's important to remember that each of the people viewing the site on their device in their browser deserves the best experience a web designer can give.

Responsive design might be easier on the designer, but that might not be helpful for the people using the site. (Glitches are sure to show up with resizing a complex site and that tends to frustrate users. There's also the problem of orphaned text/images/etc when resizing.)

I can only hope that at some point responsive design will become for all sites what everyone dreams it will be- only coding once- however, it's got a long way to go before that happens.

Believe it or not 4chan has done a great job implementing this and I think a lot of sites can learn from it especially Arstechnica. It's surprising that you would do a revamp to your site and still have a separate mobile and desktop site.

I started learning about Responsive design lately. It has been a while since I entered the Web App game, but I think it is a really interesting topic that should be expanded on. I hope that you can expand on this article, and talk about some of the methods or frameworks that are being used for responsive design, such as Bootstrap.

Have to admit I was disappointed the Ars re-design wasn’t responsive. Having completed a few in recent months I know it’s substantially harder than static design, but I find myself getting more and more annoyed at m.site.com or mobile.site.com especially when the developers blow it and I get the mobile experience on my iPad.

I'm not sure I agree with you there. I choose to keep Ars whitelisted as far as ads go as a gesture of support. I'd subscribe if I had more free capital but I do what I can with what I have. Having the ability to resize my browser window from time to time without the page rearranging itself can be considered a bonus as well as easier on the eyes. Just my opinion though.

I posit Responsive Design shouldn't be required; I await the first Responsive Browser that works it out for me. I'm frustrated my browser doesn't dump columns and ads as I reduce the width of the window. As a user I just want content, damn the ads (I whitelist Ars, btw :-)

I'm guessing Responsive Design is more expensive than just putting a fixed width site out there (that's the only type I've worked on) -- is it worth the extra money? The site that feeds me is very popular (revenue in the 10s of millions) but due to the user demographic (hello IE on desktop) Responsive Design isn't necessary (iphone+mobile is < 1% of users).

Have to admit I was disappointed the Ars re-design wasn’t responsive. Having completed a few in recent months I know it’s substantially harder than static design, but I find myself getting more and more annoyed at m.site.com or mobile.site.com especially when the developers blow it and I get the mobile experience on my iPad.

I was too. That said, responsive design is pretty easy when you serve the same content to every device. The problems start when you want to serve different content to different devices, e.g. a mobile site typically doesn't need all of the images that a desktop/tablet does and can even be served lower quality images. You usually want the stuff someone is downloading from a gsm/edge/cdma network to be as small as possible because their connectivity is likely slower than desktop and is likely capped. This usually requires that the backend can detect the difference and inject the different content in the page. This is still relatively new so it will take time for CMS's to build this functionality in and to get the detection accurate enough so that it doesn't cause problems.

Having the ability to resize my browser window from time to time without the page rearranging itself can be considered a bonus as well as easier on the eyes. Just my opinion though.

Hmm. Why? Assuming that the designs are actually done well, if you resize your browser for some reason why wouldn't you want an experience tailored as best as possible to that new resolution? Now if it's done poorly I see the point, but anything done poorly detracts from the experience -- that's why it's poor.

The only negative I can see is losing your place in the content, but it seems like a small annoyance to have a better overall experience. Then again I'm not much of a resize-the-window guy; if I do that I'm probably using something as a direct reference in which case the better usability on the smaller window would be appreciated more than having to find exactly where I was would be an annoyance. Maybe it's me though.

Have to admit I was disappointed the Ars re-design wasn’t responsive. Having completed a few in recent months I know it’s substantially harder than static design, but I find myself getting more and more annoyed at m.site.com or mobile.site.com especially when the developers blow it and I get the mobile experience on my iPad.

It seems especially hard to do a responsive design for multi-column chronological content. Our home page has 3 columns, each column is a separate block element with a list of chronologically ordered content inside. If we were to do a responsive design, these columns would probably need to be combined somehow as the screen gets narrower. The question is how do we merge these columns, not just stack them. It seems to me it would require some nasty javascript to pull off. I hope I'm wrong and someone has come up with a clever solution, but I sure can't think of one.

My issue with "responsive" design is that most sites simply adapt their content to fit screen width, forcing columns to roll above and below each other. This creates a ludicrous column of text and content that isn't very feasible to use on a small device. A truly adaptive design doesn't just focus on layout, but also on content presentation, increasing or reducing what is viewed based on what is practical for a given size. And yes, that includes scaling down or even eliminating certain types of ads (a giant banner just doesn't work on a phone, if one must, stick text with small images in there instead).

Plus, is this really new? Most quality site design and been handling their content in this manner for years. Heck, the very first incarnation of CSS gave one all the tools you need to do this somewhat gracefully across every browser.

I've recently done a few site redesigns using responsive layouts. I'm absolutely in love with it. Each of the sites has the same content being served. One of them gets about 1/3 mobile traffic. We have a small team maintaining the page content, and not having to worry about 2 forked designs is a huge game changer. I haven't found that the responsive design adds to complexity at all. In fact I've found it simplifies it significantly.

I've found for my sites that I've not been able to afford to ignore the mobile space. These aren't major scale sites, so the use of responsive design has been a huge benefit to me. If you do the layout from the ground up with responsiveness in mind it is really natural. I love that the design looks great on Firefox, Chrome, IE, my phone, and the iPad with one codebase.

I question that they do, in fact, stay sane. For example, using meta tags to prevent mobile devices from zooming is the work of a clearly demented mind that hates the users of the web site. Seriously, there's site after site with the "helpful hint" answering the question (and I paraphrase) "How can I hobble my mobile visitors and prevent them from viewing my page is the manner most comfortable to them?"

Having the ability to resize my browser window from time to time without the page rearranging itself can be considered a bonus as well as easier on the eyes. Just my opinion though.

There's no point to resizing the browser window on the Ars site, though - if you resize it smaller than 1024 pixels, you'll have to scroll horizontally to see it all, and if you resize it larger than 1024 you just have empty space on the left & right. The whole point about Adaptive Layout (which is a much better term than "Responsive") is that you'll still get the whole site, laid out in a way that takes advantage of the window/device size you're using.

One of the true challenges of responsive design is dealing with advertising. If you depend on it to survive, as a site like Ars does, then there are certain limitations you just have to deal with. It's very difficult to tell someone to run a campaign on your site if you say "look, you just resize your browser down slightly and all the ads disappear!"

You also cannot generally serve the same ads to your mobile and desktop readers.

I see these fun little responsive sites, but then you realize they're all brochure ware. No ads. Fixed content, no giant team of writers putting together massively varied daily editorial content. What happens when instead you've got a science story with a big image, some text, a sidebar, and a diagram? It's often quite a puzzle, and shifting the pieces around can lead to some pretty ugly results. Not impossible maybe, but awfully difficult and full of compromise you have to weigh against whatever potential benefits it might bring.

I've seen the Boston Globe's site, and remember thinking it was really clever, albeit compromised in ways many people can't get away with. Honestly though, it's the only example I can think of of a site with that kind of content and ads that uses responsive techniques. If anyone knows of any others I'd love to see them.

What are these differences in advertising systems? Why do they cause problems? Why is it particularly acute for editorial heavy sites? What are these "certain features and functionality" that don't translate well.

The difference is that mobile ads are typically deployed via native code API's.

His point was that the Article needs to elaborate on why - not get random answers for clarification from commenters after the fact.

What are these differences in advertising systems? Why do they cause problems? Why is it particularly acute for editorial heavy sites? What are these "certain features and functionality" that don't translate well.

The difference is that mobile ads are typically deployed via native code API's.

His point was that the Article needs to elaborate on why - not get random answers for clarification from commenters after the fact.

Have to admit I was disappointed the Ars re-design wasn’t responsive. Having completed a few in recent months I know it’s substantially harder than static design, but I find myself getting more and more annoyed at m.site.com or mobile.site.com especially when the developers blow it and I get the mobile experience on my iPad.

It seems especially hard to do a responsive design for multi-column chronological content. Our home page has 3 columns, each column is a separate block element with a list of chronologically ordered content inside. If we were to do a responsive design, these columns would probably need to be combined somehow as the screen gets narrower. The question is how do we merge these columns, not just stack them. It seems to me it would require some nasty javascript to pull off. I hope I'm wrong and someone has come up with a clever solution, but I sure can't think of one.

Having the ability to resize my browser window from time to time without the page rearranging itself can be considered a bonus as well as easier on the eyes. Just my opinion though.

Hmm. Why? Assuming that the designs are actually done well, if you resize your browser for some reason why wouldn't you want an experience tailored as best as possible to that new resolution? Now if it's done poorly I see the point, but anything done poorly detracts from the experience -- that's why it's poor.

The only negative I can see is losing your place in the content, but it seems like a small annoyance to have a better overall experience. Then again I'm not much of a resize-the-window guy; if I do that I'm probably using something as a direct reference in which case the better usability on the smaller window would be appreciated more than having to find exactly where I was would be an annoyance. Maybe it's me though.

@ Evan E as well: I guess I was trying to lead the issue around a bit because I didn't want to come out and state why directly. The reason is advertising. I whitelist Ars to help support the ads. Been known to click through on occasion to help out. On the old layout and to some extent the new layout, especially when reading an article, I like the browser to be able to snap to a predefined width which allows me to read articles without having to see some of the more annoying ads, like the LG one playing today that keeps distracting me and that I personally find really annoying. It would seem to me that with a responsive web design on the page, advertisements could be forced into almost any view. That's the real reason.

...I like the browser to be able to snap to a predefined width which allows me to read articles without having to see some of the more annoying ads, like the LG one playing today that keeps distracting me and that I personally find really annoying. It would seem to me that with a responsive web design on the page, advertisements could be forced into almost any view. That's the real reason.

And you've just made the most effective argument possible for Ars implementing adaptive design.

Personally, I would be happy if webdesigners *stopped* trying to be so clever and stopped trying to micromanage every bit of the experience.

Case in point the very text field into which I'm entering this comment.

Ars' is one of the few that work perfectly. It's quick. It's responsive. My cursor actually shows up where I'm typing. I can use the arrow keys to move around the text. When I click on text to move the text cursor, it actually moves the text cursor and it is visible!

But most other sites I'm using make text entry and editing a nightmarish experience. Typing slows the more you enter. You can't edit worth a damn. You can't see where you're actually typing half the time.

Then there's the elements that just stall every one of my browsers into the ground. LIke Flash. Like static adverts that are loaded from slow servers, but the rotator JS stalls the page until all ads are preloaded. Or scripts that are running so long and eating up so much memory that my *browser* is afraid of them and wants me to kill them. And so on.