Why Responsive Websites

With mobile Internet usage skyrocketing over the last few years, the approach towards website design and user experience has revolutionised and having a mobile-friendly website is becoming essential. According to a Morgan Stanley report, mobile internet usage is expected to overtake desktop usage by 2014. Even with this striking evidence, the vast majority of websites are still not mobile friendly. This is indeed a loss in business opportunity especially where a business hugely relies on SEO. Now the million dollar question is, why responsive design is so important for the future of a website these days? But before we delve into that discussion, let's understand the concept behind responsive design. What is responsive web design The Responsive Web Design (RWD) term itself was coined, and largely developed, by Ethan Marcotte, a web designer/developer/speaker/author from Boston, Massachusetts. RWD is essentially an approach of designing and coding a website such that the website provides an optimal viewing experience by displaying correctly on a wide range of devices, from mobile/smartphone to desktop. In other words, RWD ensures that the website's navigation elements, screen-layouts, text, images, audio/video players and other UI elements re-adjust themselves on a variety of devices so that the user experiences ease of reading and navigation with a minimum of resizing, panning, and scrolling. A responsive website means there is no need to have a separate website for smaller devices e.g. mobiles and tablets. By using a single content base and a single code base, RWD can render the website to a variety of screen resolutions and device types.
Responsive Website Design
How does responsive web design work Responsive websites are fluid which means the content moves freely across all screen resolutions, just like any fluid spreads out to fill its alloted space in a container. A responsive design targets the width of the browser opened on a device to determine the amount of space available and how the website should be displayed. The website adapts to the layout of the viewing environment by using fluid grid layout, flexible images and CSS3 media queries:
  • A layout is said to be fluid when most of the components have their width set in percentages (unline pixels or points in fixed layout) so that the components can adjust themselves based on the screen resolution
  • Flexible or fluid image is an image that renders at desired size as long as it's narrower that the container element. The latest version of browsers are capable of resizing images proportionally - so when the flexible container shrinks or enlarges depending on screen size, the image's aspect ratio remains the same.
  • CSS3 media queries allow the website to use device-specific CSS style rules so the layout can adapt to smaller screen resolutions.
Benefits of a responsive website
Cost Effective
It is a fact that developing a responsive website is more expensive than a regular or non-responsive website. However, this applies only and only for the initial cost. With mobile usage exploding it's only practical for any business to have a device-friendly website but the expenses to duplicate a website for all possible screen resolutions and the cost to maintain them can be a significant overhead. A responsive website eliminates the additional development and maintenance costs as it involves just a single website rather than multiple versions of the same website. Hence, even if the initial cost may seem high for a responsive website, it turns out to be cost-effective and the smartest decision taken in the long run.
Usage of Mobile Devices Exploding
With a growing number of people, ranging from students to busy professionals, using mobile devices to access the Internet, a responsive website can only help increase the number of potential customers for any business. Businesses that fail to utilise the significance of mobile devices are at a risk of losing out to their competitors. If you haven't made the switch to RWD, don't let your competition get ahead of you. Talk to your web designer, and make the transition to responsive web design.
Enhanced User Experience
As per an article published by Google, consumers these days are more likely to connect with a business only if its website has the potential to provide the customers with what they need, be it on a desktop as well as on any mobile device. This translates to the fact that User Experience is the key factor when it comes to attracting users to a business through the device of their choice and preference. This is where a responsive website wins over a traditional website as is it designed in a way such that it provides the optimal user experience irrespective of the device in use, from a smart phone to a smart TV.
Improved SEO
In June 2012 at SMX Advanced during the iSEO panel, Google Webmaster Trends Analyst, Pierre Farr, officially announced that Google prefers responsive web design over mobile websites. A responsive website with one single URL makes it easier for Google bot to crawl the site which in turn results in an improved SEO and enhanced performance for the website.
Recommended by Google
As per Google there are three basic configurations when going mobile:
  • Responsive websites, i.e. websites that serve all devices on the same set of URLs, with each URL using same HTML and device-specific adjustments in the CSS
  • Websites that dynamically serve all devices on the same set of URLs but each URL serves different HTML and CSS depending on the device in use
  • Websites that have separate desktop and mobile versions.
Out of the three options Google strongly recommends the responsive design approach because of the following reasons:
  • Single URL makes it easier for users to interact with the website
  • Single URL and HTML make it easier for Google bot to crawl the pages once to retrieve the content, as opposed to multiple times for websites built with the other approaches
  • Single URL makes it easier for Google's link algorithms to assign the indexing properties for the website content.
Easy Maintenance of Website
As a responsive website runs on same URL and same HTML, webasite administrators find it easy to maintain the code and content because they will need to make the changes once. If the content of a website has to change frequently then a responsive website can lead to substantial savings due to low maintenance costs.
Limitations of a responsive website
It's easier to make a website responsive from scratch but making an existing website responsive can pose some challenges. For example, the existing website design may not be suitable for mobile devices which will only mean that several parts of the website may need to be redesigned and redeveloped.
A responsive website might take a tad bit longer time to load when viewed on a mobile device. However the differences are negligible, and if right techniques are applied then there should be no negative impact on the performance of a responsive website.
There are chances that some customers may get confused with a responsive website when viewing on mobile wondering how to land on the main website. What they may not realize is that they are at the main website already, except that it has a slightly different layout - a mobile-adjusted layout - than the main one.
It takes longer to code and test a website which is required to work on a wide variety of screen sizes and devices, and hence the initial cost of building a responsive website is usually higher than building a conventional website. A responsive website can be worth the money spent where a business has reliability on people on the go, but it may not be the cheapest solution for a business which has nil or little dependability on mobile users.
Should a transition be made to responsive website The pros of having a responsive website definitely outweigh the cons. With the increase in mobile users a business cannot afford to ignore the needs and expectations of the mobile audience by not having a responsive website. A responsive website offers many benefits and is gradually becoming the standard design approach in the web world. However, before simply taking a step forward towards responsive website, it is important to understand whether a business can reap the the benefits of this approach, and whether it fits into the business' overall web strategy. It's entirely up to you to decide if responsive design is right for your business, and we at A-Cubed will be more than happy to lead you in the right direction.