With everyone walking around with their smart phones and tablets in hands these days, designers and developers have had to rethink how they plan and set up websites. It really has become unacceptable to pull up a site on these devices and find that the design is set up to be viewed on a desktop/laptop. No one wants to go through the hassle of zooming in to read the information, or scroll about the screen to finally land on what they need to see. This is where responsive website design comes in. The site is designed and set up to be scaleable so that no matter what size device you are viewing on, everything is clearly visible and easy to navigate. This set up, though more complicated and time consuming is the best option out there since there are SO many mobile and tablet devices all with varying screen sizes. Before responsive design, developers would create a separate style sheet (CSS) for different devices that would change the text size depending on what kind of device was opening it. This is not the best option, because there is plenty of room for error, but in a pinch it will do.
The image above is a nice visual to see how exactly a responsive site changes depending on the device. When designing and applying content to a page, one really has to think about the order in which they want the viewer to see things, and set the site up accordingly. For example, say there was some crucial information about your company in the far right light blue box, when it translates to mobile, that box is the third one seen by a viewer on a mobile device. So if that information is what you want your viewer to see first, then you would make sure that when you put the content in, you make sure it goes into the far left light blue box.
Want to see a responsive site in action? While on my blog page change the browser size and see how the page transforms, or you can open it up on other devices and see it as well.