However, the term responsive web design does in fact refer to something rather more sophisticated and this post aims to give you a quick introduction into what it means and why it might be relevant to you.
Responsive Web Design, or RWD as it is sometimes known, is a method of designing and coding a website so that it can adapt and change itself based on the specifications of the device being used to view it, whether it is a desktop PC, a laptop or a mobile phone.
Websites Before Responsive Design
It wasn’t that long ago that we all accessed websites on desktop computers, but in the last few years there has been a rapid change towards an increasingly wide range of internet connected devices including mobile phones, tablets, mini-laptops and TV’s. The consequence has been that people had a lot of issues trying to browse websites on these new devices. This was because they were made with a template or theme that was designed to look the best at a certain resolution. But since computer screens have grown from the initial 13-15 inches up to 25-30 inches at the most, while mobile phones have squeezed our internet browsing experience onto microscopic screens, there was a growing need for the websites to be customized so that they would look good on any screen size and with any resolution.
The original solution to this was to create separate interface designs for the same website, specifically for different devices. So you might have one version for desktop computers, one version for tablets and one version for mobile phones. The website can be programmed to automatically show the relevant interface for the device that your using, guaranteeing a good user experience for people of the devices that you have designed for. This is called Adaptive Web Design and is still a very effective option in many cases.
All in one solution – Responsive Web Design
The limitation of developing separate interfaces was that it was time consuming, costly and inflexible, because you need a different version for each device/screen size, and as there are so many different screen sizes, you can never fully account for every device.
This frustration has led to the development of a new web design technique, called Responsive Web Design.
This is how it works
A responsive website can resize itself to fit onto the screen of the device being used. So the full size website might be designed for a desktop computer, but if the screen is smaller than the elements on the page, the elements will literally re-arrange themselves and stack up as the screen gets narrower.
You might have a web design with 3 columns, but if the screen is not wide enough, it will re-arrange to show just 2 columns, and on a mobile phone it will show just one column. All of the content is still on the page and in the correct order, and the font size has not been reduced, but the content will be perfectly formatted for your screen size.
The screenshots below show the responsive Modulo WordPress Theme on a desktop and mobile browser. You can see that it is the same website, using the same theme, but when the website was viewed on the small mobile browser, the content was re-arranged as follows:
- The contact details in the header stacked up under the logo
- The main navigation menu was converted to a dropdown menu
- The main slider shrunk to fit the width of the screen
- The 3 image sections under the main slider stacked up one underneath the other
Is Responsive Web Design the perfect solution?
Many people have heralded responsive web design as a replacement for the older adaptive web design approach, but there is still a place for creating specific versions of websites for different devices, and in some cases even having more than one responsive design for the same website to more finely tune the user experience.
A few reasons why you might NOT want a Responsive Web Design are:
- If your users never visit your site on mobile devices, then the extra cost of a responsive design might not be worth it
- If you need a web design that just cannot be re-arranged easily (particularly more intricate, artistic designs)
- You might want one version for mobiles (touch screen optimised) and one version for computers (navigated via a mouse)
- You might just feel that you can do a better job of designing a specific interface for different devices than is possible to achieve automatically with a responsive design (and you may well be right!)
If you have any questions about responsive or adaptive web design, feel free to ask.
