Responsive or reactive web design is a particular web design methodology that has come about due to the importance of making ones website accessible on as many different devices as possible.
With more and more users accessing the internet on their mobile devices all the time, it is important to ensure that your website is accessible not just on the desktop but on tablets and smartphones too.
Responsive web design is a technique whereby the website reacts to the size of its containing browser. Resizing the browser will automatically adjust the layout of the website to optimize the content for its new surroundings. This might mean making images smaller or changing column widths; even removing columns entirely. So no matter whether you're on a desktop computer, tablet or mobile device, the same website will display the same content using a layout most suited to that device. The idea is that no matter what your reading preference is, you will have a view of the content that is optimized for you.
The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size.
The advantages of going responsive is: You only have one site to manage with regards to content. Update your website once and the changes will reflect on your website no matter whether you're viewing it on the desktop or a mobile. You're pretty much covered for future devices with new and different screen sizes and resolutions, a concept know as future proofing. Your website will respond to any resolution even if it does not yet exist today.
The disadvantages of going responsive is:
- It takes longer to plan and design for a responsive website (you have a lot of different screen sizes to consider) which will naturally have an effect on cost.
- You can't optimize your content specifically for the mobile - no matter whether you're on a desktop or mobile, they same content will be displayed.
Besides responsive web design, there are a number of other ways you can cater for mobile users, you can create:
- A separate mobile version
- An adaptive website
- A web application
- A native application
- Or do nothing (like Apple do!)
Oh and one last point, not to throw a spanner in the works but the term responsive website design has been used quite loosely. In many cases a more accurate term would actually be "adaptive", which in a way is a cheaper version of responsive.