Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
A responsive website changes its appearance and layout based on the size of the screen the website is displayed on. Responsive sites can be designed to make the text on the page larger and easier to read on smaller screens. They can also be configured to make the buttons on the phone’s screen easier to press. More sophisticated ways of using responsive design on a mobile device include: formatting the website to hide or present entirely different information, radically changing the graphics and colors, or even reducing the site to emphasize just its most important piece.
A designer creates a Web page that “responds to” or resizes itself depending on the type of device it is being seen through. That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen.
The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.
Google claims that it prefers responsive web design as the recommended mobile configuration, which was confirmed by Google’s Pierre Farr in June 2012.But why does Google prefer responsive design? For starters, it’s more efficient for Google to bot crawl the site and then index and organize all the content that is online. The reason for this is that with responsive design, all sites have just one URL and the same HTML across all devices. When a business has both a mobile site and desktop site, there will be a different URL and different HTML for each. This forces Google to crawl and index multiple versions of the same exact site.When there is just one website and URL, it’s much easier for users to share, engage and interact with the content on that site as compared to a site that has different pages for mobile and desktop users.