What is Responsive Web Design & Why Should You Use It?
With the number of different devices used everyday, having a mobile site is crucial for many businesses to be able to compete effectively. In todays’ society, it is not safe to assume that a website will be viewed on a desktop computer, especially considering the number of different devices people use everyday, from their smartphone, netbooks and ipads or even a web-enabled TV. People expect to be able to navigate your site on their phone as easily as they would on a desktop, and if your companys’ website does not look good on the device of their choice, the probability that the user will move on to another site is high.
According to Nielson, 44% of smartphone owners access the internet from their mobile device, and that number grows every day. A study shows that smartphone users spend an average of 37 minutes a day on mobile apps. That could be your website! It is also estimated that by 2013, mobile phones will overtake desktops as the most common web access device worldwide. It is not cost effective for companies to build and maintain multiple versions of their website for each device. A more reasonable and cost effective solution to ensuring you reach your customers no matter which device they use is to use Responsive Web Design.
A site built with Responsive Web Design will automatically adapt its content to a wide variety of screen sizes and resolutions, from smartphones (320px) to desktops (1600px), tablets(768px) and anything in between. Responsive Design is achieved through the use of Fluid Grids and Media Queries. A fluid design is designed in terms of proportions instead of rigid pixels, so when a layout is viewed across a variety of screens the elements in the layout resize their widths in relation to one another. Media Queries allow you to gather data about the site visitor and use it to conditionally apply different css styles. By using these elements, the design, layout and navigation will resize smoothly without falling apart.
Before the introduction of Responsive Web Design, web designers had to build multiple sites for each device and end users would be redirected to a different site depending on their device. (example: m.google.com vs. www.google.com) Each site had to be monitored separately and often had different links. The main advantage of using Responsive Web Design is only having one site to maintain, and no redirects. Responsive Web Design also greatly improves your website's SEO since your URLs will be more consistent and you will avoid duplicating content.