Responsive web design (or mobile-friendly) describes a website that reformats itself depending on the size of the screen you are viewing it on.

With so many people using mobile phones to browse the web these days, there is nothing more frustrating than trying to extract information from a website that is too tiny on your screen to be able to read.

Mobile Phone showing a non-responsive website

Non-responsive

Mobile Phone showing a responsive website

Responsive

As of April 2015 Google have announced that they will be using the responsiveness of your website as a ranking factor – ie responsiveness will contribute to how well your website does in Google searches. You can check how responsive Google finds your website with their new mobile-friendly test.

While there are a few different ways of making your website responsive, the most standard (and I think effective way) is to use media queries. This is effectively testing the size of your screen and formatting accordingly.

A typical example would be as follows.

A website where the logo is top left and the main menu is top right, would, once reaching a certain width, reformat so that the logo centres itself at the top of the screen and the main menu centres underneath. Depending on the content in the sidebar of the website, this may drop down below the main content or it may disappear altogether.

The sections of the site adjust in width and length accordingly to the screen size.

On a mobile screen the main menu turns into an internationally recognised icon (see image).

Menu Icon

Menu Icon

A footer with columns would stack the columns on top of one another. Images would reduce in size to fit the mobile screen where necessary. Images only for aesthetic reasons may disappear.

Whilst this is a typical example, options for adjusting a website to make it more usable for another device are endless. And the sole purpose for building responsive, is to make the website more user friendly.