Responsive design is a way for a website to deal with the plethora of different device types that are now used to browse the site. Increasingly people are using mobile devices such as smartphones and tablets to browse the web, with laptops and PCs taking a back seat. The problem arises because many of these devices have limited capabilities and small screens.
Not long ago it was common practice to have two separate websites operating under different URLs, typically www.website.com and m.website.com. This could be combined with detection of the device type to direct the user to the mobile version of the site or the main site as appropriate. The problem with this scheme is that each of these two URLs is treated differently as far as SEO is concerned and so it has largely been superseded.
An alternative approach is to use a common URL but to have a mobile sub-site of the form www.website.com/mobile or to serve up the normal pages but using a different set of page templates which are optimised for mobile devices. Rather than detect the individual device type it is common practice to categorise mobile devices into groups such as smartphones or tablets. This can still present some difficulties however because of characteristics which may be unique to one particular type of device.
Responsive design aims to get around these problems by linking the behaviour of the website, not to the type of device, but to the width of the screen or more precisely to the width of the viewing rectangle.
The basic idea is to define a set of break points, say 480, 768 and 1024 pixels, and to produce different page designs and layouts for the ranges in between them. So for example one design might cover screen widths up to 480 pixels, a second for screens between 480 and 768 pixels, third between 768 and 1024 and finally one for screens of over 1024 pixels. Typically the page content remains the same for all of these design variants and the various layouts are imposed using different CSS style sheets, one set of which is selected conditionally on the width of the viewing rectangle.
Responsive design can greatly simplify the problems of dealing with all of the various different mobile devices on the market and expected in the near future. However there are still a few words of caution. Simply looking at the width of the viewing rectangle can be insufficient. Generally speaking, users on computers do not want the site to behave responsively when resizing their browser window and so it is good practice to use device detection such as to only behave responsively of the user is not using a PC.
Very often the site will be configured to behave differently when viewed on a mobile device. Usually this is achieved by altering the navigation elements on a page based on the breakpoint or by obscuring such things as links or buttons depending on the screen width. Great care should be taken when doing this however, since users are likely to get frustrated if they find that features with which they are familiar on the PC version of the page are no longer available on the mobile variant.