What is Responsive Web Design?<!-- --> | BlueFusion021 027 05450
HomeBlogWhat is Responsive Web Design?

What is Responsive Web Design?

What is RWD

Responsive Web Design ( RWD ) is how a web site is made to display well across a range of modern devices - and those that have yet to be invented.

Once upon a time there was the desktop computer and it had a screen that came in one of two basic sizes - 800x600 and 1024x768. That meant that a single site design could be used comfortably on both screen sizes1 - there was no need to adjust the design to handle each monitor size.

That's no longer the story. Your web site will now be viewed on a diverse range of screen dimensions & pixel densities - new manufacturers & devices arrive continually and add new resolutions to the mix.

How does RWD work?

In brief - your site detects the size of screen that it is being displayed on, it then shifts elements around, hides and/or displays elements as required. Navigation, images and text all adjust so that they can be read on the screen being used, so that any user interaction is functional and so that the core purpose of the site/page is retained. Other features that aren't strictly layout issues may come in to play as well - forms can be configured to offer mobile & tablet users the correct buttons for the form field they are filling out eg presenting a number pad when filling out a phone number, a keyboard with an @ sign when filling out email etc.

That, in brief is what RWD is: web sites displaying well and being usable across a full range of modern, screen based web devices.

Why does any of this matter?

Check out our follow up article "Top 10 Reasons for building a Responsive Website"

Notes:
1. Of course, while the lack of differing screen sizes was nice to work with there was the nightmare of trying to get things to render acceptably on Netscape Navigator and Internet Explorer. Internet Explorer has been getting it right since version 9 was released, which is been a great relief to all web devs as IE8 is almost dead.

Image of responsive screen sizes on this page courtesy of Muhammad Rafizadeli licensed under Creative Commons Attribution-Share Alike 3.0 Unported