Responsive Web Design vs Mobile Website vs Mobile App - Which Way To Go?

A little over two years ago Morgan Stanley predicted mobile would overtake desktop use by 2015. More recently in 2011 Microsoft suggested the changeover would take place by 2014. Now a report published by the China Internet Networks Information Center suggests both estimates were conservative, with more Chinese now connecting to the Internet via mobile phone (smart phone) than desktop computers. Despite the data being a little misleading (desktop and laptop users were counted separately, when combining them might have seemed more reasonable), the overwhelming shift toward mobile browsing is very clear.

Closer to home smart phones are quickly becoming a mainstream part of many New Zealanders’ lives. Astute businesses are taking note and we’re fielding a steady flow of enquiry from owners wanting to know how best to take advantage of the rising number people accessing their website via a mobile device.

When it comes to getting started with mobile there are several options, not to mention an abundance of buzzwords, all of which make it hard enough to understand the differences let alone know which route to take. In this post I’ll demystify each approach and offer up some pros and cons of each. By the end you'll know your 'responsive web design' from your 'dedicated mobile sites' and 'mobile apps', but more importantly you’ll be better placed to decide which approach is most appropriate for your business.

Eenie meenie minie mo...

Broadly speaking there are three main options when it comes to beefing up your approach to mobile:

1. Dedicated Mobile Website (aka ‘mobile website’)

As the name would suggest, a dedicated mobile website is a separate version of your website designed exclusively for mobile devices. Usually mobile websites add a prefix or suffix to the domain (e.g. 'm.examplesite.co.nz' or 'www.examplesite.co.nz/m') and users are automatically redirected to the mobile version when they access the website via a mobile device. Mobile websites often contain less content and a reduced feature set compared to their desktop equivalent.

When to use it:
If your users have significantly different goals when accessing your website from their mobile device compared to a desktop computer, then having a separate mobile website can often deliver a better experience that focuses purely on the needs of the mobile user.

Pros of a Mobile Website:

• Mobile specific sites make it easy to deliver a purpose built experience for mobile users, only presenting them with the most essential/relevant information. The objective of a desktop site is not always the same as the mobile version. Some businesses (e.g. a restaurant) might only need to provide mobile users with a limited amount of key information - phone number, address, map, menu etc. In this instance a mobile specific site might be the best option.
• Mobile dedicated sites are relatively easy to design and build, particularly when compared to a mobile app. Compared to responsive web design, mobile sites are also often faster to implement for an existing site.

Cons of a Mobile Website:

• Mobile dedicated websites rely on 'user-agent detection' to determine if a user is trying to access a site via their mobile device. As more devices become available (and more allow you to modify your user-agent) this method detection is increasingly unreliable. You should also factor in the cost of maintaining an up to date user-agent list that includes all of the latest devices.
• Higher ongoing maintenance costs. With a mobile dedicated site you'll most likely have one set of content for your mobile website and another for your desktop site. Any changes to the desktop version need to be duplicated on the mobile site, thus driving up costs. To combat this we've developed our CMS so that it does a great job of providing one central area from which to manage content for both desktop and mobile sites.
• Mobile sites are inherently poor at managing redirects between desktop and mobile versions. When browsing via a mobile device there's nothing more frustrating than clicking a link to an article and not being taken to the version of the website you expected to see.
• Due to the rapid and ongoing development of mobile Internet, mobile websites are difficult to future-proof.

2. Responsive Website Design (aka 'RWD', 'Responsive Design')

Responsive website design involves creating a website whereby the layout automatically adjusts and resizes according to the size of the screen it is being viewed on, whether that be a 3.5 inch screen or a 24 inch desktop monitor (or larger). Taking this approach creates a seamless user experience across all devices, plus as all content is served from the same URL regardless of device there is no need for a separate web address for mobile.

Check out these inspirational examples of what can be achieved using responsive web design.

When to use it:
Responsive web design works best when your website doesn't contain a substantial amount of advanced functionality and user intent is not significantly different for mobile users vs desktop users.

Pros of Responsive Website Design:

• Responsive websites are not tied to a single operating system or screen size, therefore offering flexibility and future compatibility with variety of screen sizes - don't just think handheld device, consider how your website might be viewed on a 40 inch TV screen.
• Responsive websites are simply a single website with a single set of content, hence ongoing development and maintenance costs are lower over the long-term.
• By having only one URL it's much easier to get an overall understanding of traffic to your site from all devices/platforms. Google Analytics’ built in advanced segments for mobile and tablet users make it super easy to view mobile traffic data.
• Having a responsive website means that all links pointing to your website (and the benefit of any social activity such as shares, likes, Tweets etc) are consolidated on one URL. In time this might not matter too much as Search Engines get better at determining the relationship between the mobile and desktop versions of a site, but for the time being Responsive Design is the approach recommend by Google and Bing, particularly from an SEO and social sharing perspective.

Cons of Responsive Website Design:

• It's not easy to alter the information architecture of a responsive design website, hence compared to a dedicated mobile website or mobile app, responsive websites don't always deliver the best possible user experience. Consider businesses that only need to provide mobile users with a few key pieces of information - to give the user the entire site might be overkill if they really just need to know the phone number, directions or address.
• Regardless of whether a user is accessing a responsive website from a desktop computer or a mobile device, they are essentially downloading the same site - i.e. the same code, scripts and so on. For mobile users reliant on 3G for Internet access this can have a detrimental effect on page load time.
• Initial development of responsive websites can take longer than creating a stand-alone mobile specific site, particularly when retrofitting responsive design to an existing website.

3. Mobile Apps (aka 'Mobile Application')

The easiest way to understand apps is to think of them as software programs for your mobile phone. These programs can range from a simple calendar application to a complex map tool that references your location via GPS. Mobile apps can be either downloaded to your smart phone from 'app stores' such Apple’s App Store or Google Play, or they can be accessed via your smart phone’s web browser.

When to use it:
Mobile apps are generally best suited to performing functions that use a mobile device’s processing power and sensors (such as the camera or GPS). They can be a good option if your target users are need access to your services/information regularly when they’re offline (i.e. not connected via Wi-Fi or 3G), or when a highly personalised or customised experience is required (e.g. mobile banking apps, NZ Met Service app).

Pros of a Mobile App:

• Mobile apps are generally faster than Dedicated Mobile Websites and Responsive Design Websites
• Apps can be more interactive by integrating with all kinds of smartphone features (e.g. camera, GPS etc)
• 'Native apps' make it possible for app content to be available to users when they’re offline (i.e. not connected to the Internet)

Cons of a Mobile App:

• App development costs can be expensive as each app needs to be custom-built for each smartphone operating system (e.g. Apple iOS, Android etc).
• Mobile apps are harder to test due to multitude of platforms and phones and operating systems
• The user life cycle of an app can be short as users can easily delete them

So, which approach do I prefer?

It's still early days for the mobile web and the development of the technology, the devices and  platforms is moving at breakneck pace.

When it comes to figuring out which approach to take it really boils down to is this; which approach is best for your target users and which will help you best achieve your business goals from going mobile. Ask yourself the following questions: What content needs to be served? What information do users want/need? How will the behaviour of your mobile users be different than those of your desktop users? What precisely are you trying to achieve with your mobile strategy?

As for me, I tend to favour responsive web design because it's simpler (one URL for all devices), easier to maintain, and is more future proof than its alternatives. Throw in the fact the Google and Bing are also supporters and my preference sits well with me, particularly from an SEO point of view. Of course, there's most definitely a time and a place for dedicated mobile websites and mobile apps; like with so many things in this industry there really is no one size fits all solution for mobile (not yet, at least).

How about you - what’s your preferred approach to mobile? Got an experience you'd like to share about using, designing or building responsive websites, mobile sites or mobile apps? If so drop a comment below. Alternatively, if you’d just like some help figuring out how to optimise your online presence for mobile, simply get in touch.