Responsive design is a style of web design that responds to the user as they arrive at the web page. Rather than forcing a mobile user to see a desktop site, a laptop user with a small screen to scroll horizontally to see a wide-screen monitor site, or a wide-screen monitor to view a site as a mobile customer might like, instead the design looks at each of these scenarios and adapts to display the content most effectively.
Web Pages Must Be Flexible and Adapt
I've said it many times, the web is not print. And with more and more different types and sizes of devices coming online, the sooner you accept that your pages will look different, no they must look different depending upon what is displaying them, the happier you will be.
The best web designs are the ones that make things easy. But not just easy for the website customers. The best web designs make things easy for the client as well. And responsive web design does that, but the down side is that it's not exactly easy for the web designers.
Creating a Whole Separate Website is a Bad Idea
It can be tempting, and I admit I've done it myself, to create a “mobile” site with a separate sub-domain or site location. Then you just slap up all the mobile friendly site features like single-columns, limited content, and reduced navigation in that one location and point mobile users there.
In the short term, this can work, as it gets up a mobile site quickly. But eventually it will start to cause problems. The first pain point comes when the site owner realizes that he has to post every article twice—once to the main site and once to the mobile site. This realization usually comes months after you trained them in how to maintain their new mobile site, and they have forgotten what they need to do to make the articles mobile friendly and they probably have dozens of articles that need to be ported.
Many web developers, at this point, start thinking of ways to programmatically copy files posted to the “real” website (the one for desktop browsers) into the mobile site. This can result in very complicated scripts and programs and ultimately the mobile user is still treated like an afterthought.
Responsive Design Treats Mobile and Desktop the Same
A responsive web design uses the exact same content to create a page that works whether you are viewing it at 1800 pixels wide or 320 pixels wide. But the pages that are created may look vastly different, while containing the same content. This means that whether you come to the site on an iPhone or a 27-inch iMac, you will get the same content, in fact you will go to the same URL. But on the iPhone you might see the page with only one column while the iMac gets five. But they are both considered equally important when delivering the content.