What is Responsive Web Design?

A Simple Guide

Guest post by Richard McMunn of How2become.com

A website is a group of World Wide Web pages usually containing hyperlinks to each other and made available online to present data on a display device. Until recently, this displaying device was usually a computer screen, and until not so long ago, the size of the screen was the same all over the world — simply because it was the only one available! Today of course, the situation is completely different. Nowadays, the sheer variety of platforms that we use to access the internet is quite staggering.

Why use responsive design?

We use different devices like PCs, laptops, tablets, phones and PDAs, with screens of different widths, heights, and resolutions. A website that is developed to display optimally only on a certain screen size will probably end up looking strange on some other platform. How often it is that we see a website displaying incorrectly, with photos that appear blurred, or text that is too small to read. The fact is that web design and development must change with the times, and offer a way to create websites that are truly flexible and that can be customised according to the device, and display environment they are being loaded on.

This is exactly what responsive web design is. It is an approach to web design that aims to create sites that are fluid in the sense that they have no absolute proportions that can constrict them to one single platform. Responsive web design allows a website to be loaded on multiple platforms with minimal need for resizing photos and text and displays websites so that they are optimised for that particular platform.

This involves using a fluid grid concept — which looks are page resizing in terms of proportions rather than absolute values. By dealing with resizing in terms of percentages, pages can be instantly adapted to any display size without cumbersome resizing of grids and tables in terms of pixels.

The same principle is also applied to photos in responsive web design, where a photo will be sized in relative terms. This will allow pictures to be displayed in a flexible manner and displayed correctly in terms of design irrespective of the device or screen size and resolution.

How responsive design works

Responsive websites are designed to have different CSS style sheets that are used in different display environments. For instance, depending on the width of the browser, the website will be able to use the correct style sheet and display optimally for the browser. So, a mobile site can instantly display the way it is supposed to by detecting the device it is being loaded on, or if accessing on a smaller computer screen, the website will not require sideways scrolling but will display optimally on the smaller screen.

The main thing to understand with responsive web design is that everything is made flexible on the website. This means the grid that makes up the layout of the website, as well as images. This means that photos and mainly the width of the website can adapt to different sizes. For hugely different screen sizes and proportions it becomes necessary to have a completely new layout altogether. For instance while switching from horizontal to vertical display — this is where flexible CSS style sheets become useful.

There was a time in the recent past when it had become essential to have a mobile version and a standard version of a website. Today, even this may not be enough — as we have more resolutions, screen sizes and devices than we can count that are increasingly being used to browse the internet. As such, responsive web design offers a way to make web design truly flexible and adaptive to any device or platform.

Richard McMunn is the director and founder of How2become.com and the author of this article. Richard spent 17 years in the Fire Service and now provides insider recruitment training for those looking to join the fire service, police service and also the armed forces. You can also connect with How2become on Twitter