Responsive design vs separate mobile website
These days, it seems like everyone is surfing the web on their smart phones and tablets. However, as this is quite a recent phenomenon, many business websites are not equipped to offer a good user experience for smart phone users yet.
In this article, we’ll review the options available to business owners wanting to ensure a good user experience for their mobile visitors.
Option 1: Responsive Design
A responsive website changes dynamically for different browser sizes. Images and text scale accordingly, and website elements are repositioned or hidden depending on the screen size. This ensures that, no matter whether the website is viewed on a desktop, laptop, tablet, mini tablet or any smart phone, it will always look great.
Try it! If you’re not sure what I’m talking about, just look at this very page and change the size of your web browser window. You should see the text adjusting to fit into a smaller space, and the boxes on the right hand side will shrink and eventually move below the text to accommodate a smaller screen size.
Pros of responsive design
- Consistent user experience on all screen sizes, from smart phone to tablets and laptops / desktops
- Less maintenance – only one website to maintain and update for all devices
- Future proofs your website for new devices, e.g. tiny tablets or oversized phones
- Google endorses responsive design as a best practice
Cons of responsive design
- Load speed – even if website elements are hidden for certain screen sizes, they still have to load, which can be an issue on slow mobile phone connections
- Technical difficulty – responsive design is technically more difficult to implement than a standard website as the code is more complex, images need to be optimised etc, therefore it costs more than a standard website
- User experience compromises as the content is reused across all device sizes
- Can be difficult to implement for existing websites with lots of content, especially if they include lots of information tables, and may require a redesign of the website
Option 2: Separate Mobile Website
The other option is to build a separate mobile website. Users are redirected to this separate website if the browser detects that they are viewing it on a mobile phone.
Before responsive design came along in the last couple of years, mobile websites were the standard. However, in the last few years tablets (especially iPads) have become very popular, and there are now lots of new in-between screen sizes apart from smart phones and desktops. These are better handled with responsive design.
Separate mobile websites are useful if you need to provide specific functionality to mobile users, and they can be a good alternative to an app. For example, you might have a complex quote form or eCommerce functionality that needs to be tailored to mobile users, rather than just resizing the desktop functionality.
Pros of separate mobile websites
- Tailored mobile user experience – design, button sizes, images, content etc can be created specifically for mobile users
- Faster load speed as you only load the content you need on the mobile
- Allows you to implement specific features only used on mobile devices and tap into mobile features such as geolocation detection
Cons of separate mobile websites
- Specific to device size, not great on tablets or other “in-between” sizes
- Separate website to maintain – duplicate content to update, increased maintenance costs and time
- Tricky cross linking and redirects between the desktop and mobile site (e.g. you might Google from your mobile phone, click on a desktop result but are automatically redirected to the mobile home page as the content does not exist on the mobile site)
In general, most small businesses are better off with a responsive website than with a separate mobile website. Responsive design future proofs your website and means less maintenance in the long run.