How a Responsive Website Works

Here's what Google has to say about why Responsive Web Design is its preferred method of building modern websites. Click here for original article:

Why responsive design

We recommend using responsive web design because it:

Makes it easier for users to share and link to your content with a single URL.
Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
Requires less engineering time to maintain multiple pages for the same content.
Reduces the possibility of the common mistakes that affect mobile sites.
Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience.
Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh.

So how does it work?

When your website is built responsively, it detects the screen width of the device the viewer is using to look at the website. For example, a typical laptop might have an effective screen width of 1440 pixels, an iPad in portrait mode 768px or an iPhone in portrait just 310px.

Rather than just squeezing your whole website down into a tiny illegible version of the full sized website, a responsive website is set up to reorganise the content in such a way that it optimises how it is seen on different devices.

Here's a simulation of how it works, taken from the Murrayshall House Hotel website which we recently completed. We are assuming here that you are looking at this website on a laptop or desktop for this demo to work properly! At full width, it looks like this:

Whereas on a tablet, it will look like this:

...and on a mobile phone, like this: