Responsive web design is the only practical design for a modern business web site. Google is encouraging businesses that use separate web sites for computers and mobile devices to combine them into a responsive web page. This article gives five reasons business should switch to responsive web design.
Life was so much easier when, as a web developer, all you had to worry about was Internet Explorer and a minimum screen resolution. Nowadays there are a plethora of devices, large and small, and an almost infinite array of screen sizes to code for. This is where Responsive Web Design comes in.
Simply put, responsive web design as a design pattern that allows the website appearance to adapt itself according to screen size. With one HTML document and responsive media queries, a website can adapt itself to look good on a small mobile device, a tablet and on desktop. This not only saves time, money and resources developing individual desktop and mobile sites but it also provides a much better customer user experience, thus increasing sales and conversion rates.
In these two pictures we can see the difference between a traditional web design and a responsive web design. In the image above, the website is not responsive. The smaller the window or device, the smaller the website is and the more difficult to read. In most cases the users would have to zoom in to read the text and scroll around to see anything else that does not fit on the page.
In the image below, you can see that the layout of the site and the font size have responded to the size of the screen and ensures that the content remains visible. For example in the tablet and mobile views, the side navigation has been removed and replaced with a drop down at the top to save space.
Mobile devices account for almost 15% of online traffic (2014, source) and this is expected to double or even triple. Update in 2014 - Mobile devices now account for nearly 60% of online traffic (source).
Traditionally, a site would redirect to a "mobile friendly" version of the website. This meant that companies had to develop and maintain two separate sites - one for desktop users and another for mobile users. A responsive website design allows all devices, regardless of screen size to show an optimised view, all from the same website.
Here are some more reasons to upgrade to a responsive web design.
Another solution is to implement the Twitter Bootstrap framework which handles responsive design.
This site is fully responsive. Try resizing your browser window if your on a desktop, or if your on a mobile or tablet you should already see an optimized view of the site.
My website and its content are free to use without the clutter of adverts, tracking cookies, marketing messages or anything else like that. If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.