Introduction to responsive web design

You have probably heard the term responsive web design – but what exactly does it mean?

A responsive web design changes and adapts to fit with different screen and browser sizes. Over the past few years there has been an explosion in demand for different smartphones, tablets and notebooks. Each of these devices has its own browser size, screen resolution, and orientations.

This trend is unlikely to go away – experts predict that mobile browsing is expected to overtake desktop-based access within the next few years. Designers are faced with a greater number of devices, input modes, and browsers than ever before. Users are expecting their web experience to translate on to each of the devices they use.

History of responsive design

The term Responsive Web Design (RWD) was introduced by Ethan Marcotte in 2010 in his article on A list Apart. He used the example of responsive architecture, where physical spaces respond to the presence of people passing through them. Architects considered structures that bend, flex and expand as crowds approach them and other things such as automatic climate and lighting control related to the space and occupants in a room.

Based on the idea of a responsive environment, he suggested that rather than creating disconnected designs for different web devices, responsive design caters for them all in the same experience. The design becomes flexible and adaptive to the device and browser it is viewed within.

If you view a website designed for use on larger screens on a smartphone, you will find that you have to do a lot of zooming, panning and scrolling to find the information you need. Responsive design aims to minimise the need for this, giving optimal user experience however you choose to view the website. It takes away the need to create separate mobile sites.

How does it look?

The aim in making a website responsive is to present the website and its content in the optimum way for the device the user is viewing it on. When a site is responsive, desktop users get one view and then users on alternative devices see the site in a different way, according to the screen size. For example, the navigation will become a vertical list rather than a horizontal bar once the screen size reaches to a certain width.

  • Restore down buttonOne of the easiest ways to gain a better understanding of responsive design is to look at some examples of responsive websites.
  • If you have a smartphone or tablet as well as a PC, you can try looking at sites on each to see the difference.
  • Another handy trick on your PC is to click the restore down icon on the top right of your browser and then drag the sides of the browser towards the centre to create different widths. You will be able to see the design change as you do. Check out your favourite sites to see if they are responsive.

Here are another couple of examples of effective responsive design.



leave a comment

Your email address will not be published. Required fields are marked *.

Benefits of responsive web design Getting started with Google Analytics