Tuesday, 23 September 2014

A Brief Overview Of Responsive Web Design

Responsive Web Design, in short also known as RWD, is a technique in which a web site is designed in such a way that one website fits all devices. It makes use of CSS3 media queries to load a different set of CSS rules depending on the device on which the website is being viewed. Primarily the width of the browser is used to make a decision as to which CSS to load to display the website. So in essence if the website is being viewed on a smaller screen like on a smart Phone, the website layout would be different than when viewed on a desktop. The layout is optimized in such a way so that the site is optimal for that screen size in terms of readability, panning and scrolling. This is made possible with the use of media queries, fluid grids, and flexible images that automatically re-size with your browser width.
Responsive Web Design (RWD) is different from mobile sites where separate websites were designed for separate devices. A program would be used to detect the device and redirect the user to the separate mobile website for that device. A redirect takes longer and is therefore undesirable. Mobile device detection is not always perfect and is prone to errors, therefore, sending the user to the wrong website optimized for a different device altogether. Another major disadvantage is the change of URLs for each of the website versions built with this method. Separate URLs in a way would be considered as separate sites by the Search Engines, causing a lot of unwanted complications like content duplicity, SEO issues, difficulty in managing the websites, etc. Also, with time, the numbers of devices has grown manifolds, and are continuously on the rise. It is not practical to have a website for every device.
Responsive Web Design is therefore the answer. A RWD website does not have any of the disadvantages we discussed above for a mobile site. With RWD, it is one website for multiple devices. Maintaining one site is much easier than multiple sites. Since it is one website changing layout for multiple devices, therefore, you get one set of URLs only. Managing content also becomes much easier for the website owner is this case.
In the coming two to three years from now, there will be more people accessing the internet on their handheld devices compared to desktops. So your website needs to be able to cater to this segment, otherwise, you lose out on significant web traffic and potential customers. I don’t think there is much of a choice really. In the coming years Responsive Websites would become more of a necessity rather than a luxury.