What is Responsive Web Design?

Responsive Web Design or RWD is a relatively new & simple approach to creating websites that allows easier navigation & improved user experience by automatically adjusting the layout depending on the resolution of the screen the site is being viewed on. It can improve usability on mobile devices and is also quite cost effective when compared to the development of separate mobile applications used to help make a mobile site run effectively. If you don’t want to spend out on a separate mobile site to be developed for smartphones & tablets then this may be just what you need.

How does it work?
Without getting too much in depth with the technical stuff, RWD works on the fluid grid concept. The site is dissected into elements or ‘blocks’, which then reposition themselves when a different device or screen resolution is detected. The order in which they reposition themselves depends entirely on which order you or your programmer has given them. It won’t be random, so you won’t have to worry about important blocks like the navigation ending up at the bottom of the screen (unless of course you order it that way). For example, on your standard desktop monitor, you may see the header, the navigation running from left to right, an image carousel underneath and lets say three cells, again running from left to right. If you were then to view this on your smartphone, you may notice a ‘stacking effect’ where the cells containing information will be ‘stacked’ on top of each other, to stop them from becoming too small, which may result in text becoming unreadable unless you manually zoom in.

Unlike conventional websites, the elements or ‘cells’ are sized using percentages instead of the standard pixel measurements. This allows them to readjust using the programed percentage, which allows them to adapt to the resolution of the screen instead of being stuck at a certain pixel width, which can decrease quality and often make usability much less pleasant – And of course let’s not forget how it will look. The percentage ratio is aimed to keep the site looking attractive and in proportion with itself. Using fixed pixels to size each element may cause display problems, potentially harming your brand by not getting the correct image or message across to users.

But don’t worry, this doesn’t mean that your website will become like an elastic band and start pinging cells all over the place whenever the resolution changes slightly. There will always be an order (as long as you’ve programmed it that way) and you will only see the effects on screens that are usually very different such as PC monitors, tablets & smartphones.

The benefits
One of the key benefits of RWD is that you won’t have to arrange an additional budget to pay for completely separate mobile applications. Once upon a time you would only have the choice when it came to mobile, to buy or develop yourself one or more mobile sites to suit the screen resolution of phones and tablets. This would not only be fairly expensive but also very time consuming if you were to develop them yourself. Where as with a responsive design, you can sit back & enjoy peace of mind in knowing that your one site is all you will need. RWD is also the perfect way of keeping your brand identity intact, as although the site may not offer the same layout at different resolutions, the design, colour scheme, font, logos etc. will be the same. This saves you from having to go over your separate mobile sites again & again to make sure it represents you and your brand properly.

Do I need a responsive website?
With RWD giving you greater control of how your website is displayed at different screen resolutions, choosing it for your business can only be a good thing. It also helps to make the design much more recognisable to the average user, where as mobile sites can be laid out in a completely different way, often making it more difficult for your average Joe to find what they’re looking for. The lack of separate mobile applications also means that you will only have one website to look after and maintain, so if an error occurs somewhere along the line, you will only have to deal with fixing your one site & once it is fixed & tested, you will know that it is displaying correctly across all devices. Updating your site is also much easier with just one website, as you won’t have to change the same info on the mobile sites. No matter what you decide, we’re sure you’ll make the right decision for you & your business.

Author Adam Dougherty

More posts by Adam Dougherty