Responsive Website Design versus a Mobile Specific Website

A lot of people have been asking us which is better – a responsive website OR a mobile site?

First off, what actually are they?

Responsive Website

Using a responsive design all devices access exactly the same website and the code uses “media queries” to tailor what is displayed for each device and screen resolution/dimensions.

Specific elements of the website can also be hidden in order to improve the user experience on smaller screens, e.g. not showing ad banners on a mobile phone.

A mobile website is a completely separate site that is specifically optimised for smartphones. It will usually have its own separate design and may contain custom content and functionality or features.

So, which is best?

Well it really depends on your needs and what your current website is like. Here we compare both options:

	Responsive website design	Mobile website design
Cost	Converting an existing website to a responsive design is potentially a lot of work and so can be more expensive.	Building a mobile specific site can be less expensive depending on the design and what functionality is required.
Support & maintenance	Supporting a responsive site is no more effort than supporting your current website.	With a mobile site, you now have two separate code bases to maintain as well as two different content areas for your business to maintain. This results in additional time and expense going forward.
Search engine optimisation - SEO	Google has officially stated that it recommends responsive design - see their blog post here. Maintaining a single shared site preserves a canonical URL, avoids complicated redirects, and simplifies the sharing of web addresses. Any existing “link equity” (i.e. the SEO value of back links) is also retained.	Mobile sites require their own domain, e.g. mobile.yourwebsite.com. Google will treat these as two separate websites which can adversely affect organic search rankings.
Page load times	Responsive websites adjust what is displayed “on-the-fly” depending on the device being used. Although the media queries can hide certain elements on a browser they may still be loaded behind the scenes. This can sometimes cause higher page load times on devices than a mobile specific site would.	Mobile sites are specifically built with one job in mind, i.e. working on a smartphone. Therefore, suitable page sizes and image resolutions can be used to ensure they are optimised as much as possible.
Consistency	Although the layout and some content may differ depending on the device being used, the core functionality of the website will be consistent.	The mobile site can differ significantly from the main website in the way it works. This can be a disadvantage or introduce additional complication where the user experience is different between the two sites, e.g. when the same person uses the version they are not familiar with, or for your staff answering customer enquiries.
Future planning	With media queries dealing with resolutions and screen sizes (rather than specific device types and versions) a responsive design will continue to work with little or no amendments in the future. HTML5 and CSS3 can also be used adding longevity to the site.	Each generation of smartphone and mobile browser may require the mobile site to be reworked.

Are there any other options?

Yes, there is an alternative “hybrid” approach….

For some clients we are now creating a Mobile website separate to their desktop version, with fresh code, but we are building it with responsive design in mind using mobile media queries.

The intention is to add the desktop media queries as a phased approach, replacing the current website with this new code base for desktop display at a later date.

The main benefit being we can potentially get a mobile website launched sooner than if we went down the full responsive route and it gives us a chance to review and replace and legacy code as we go.