Multiple Device Web Design: Responsive, Mobile, Native App or 4th Way?

With mobile browsing set to overtake the desktop this year, optimising your website for multiple devices is no longer a luxury but a necessity. When you start designing a new site one of the first things you need to do is decide which approach to mobile optimisation is best for your website. As ever, there is no one solution that fits every scenario and you will have to weigh up some pros and cons of each potential solution every time you need to make this decision.

To help make the process a little easier for you, let me draw up a list the good and bad in the three main approaches to mobile optimisation – responsive design, mobile websites and native apps. I’ll also wrap up with a fourth alternative – basically an updated version of the first option we’re going to look at.

1. Responsive Design

Responsive design allows you to develop a single website that changes to accommodate devices of different sizes. Normally this means using CSS3 media queries to determine the size and type of the devices to adjust the layout, navigation and other forms of content accordingly. The aim is to design a single website that displays and functions effectively on all devices to create a smooth user experience and maximise your conversion rate.

Pros:

  • Low cost is a major advantage when mobile internet is still quite young and solutions like these are constantly evolving.
  • Versatility means your websites is optimised for a wider range of devices – not just mobile.
  • A single website means less work down the line in terms of maintenance and content creation.
  • Single URLs might not be so important for SEO anymore, but they still save mobile users from waiting for redirects.

Cons:

  • A single website can make it difficult to optimise layout and content for smaller devices – especially if you have a lot on the page.
  • User experience can actually suffer when you attempt to optimise one website for multiple devices, rather than specific user needs.

Here are some examples:

Vacation Equality Project

Desktop:

vacation-equality-full

Responsive:

vacation-med-mob

Locomotive

Desktop:

locomotive-full

Responsive:

locomotive-med-mob

2. Mobile Websites

A mobile website is designed specifically for smartphone users, which means you don’t have to compromise on user experience for other devices. Generally this means a single column layout with concise content and navigation options to make your mobile website as quick to load and navigate as possible.

Pros:

  • Cost isn’t as cheap as responsive web design, but considerably more affordable than the native app approach.
  • User experience is designed purely for smartphones, which means you can offer the best UX for mobile devices.
  • Speed is a major plus for mobile sites, which are generally light and snappy to cater for weak connections and data usage.

Cons:

  • Limited user experience as you only optimise for mobile.
  • Limited lifespan when the future of web lies in devices of all sizes – including TV screens and wearable tech.
  • Multiple websites mean you need to create more content, optimise them for search engines and maintain them separately.
  • Multiple URLs can hurt the speed of your mobile site when you have to redirect users.
  • Content basically has the opposite problem to responsive design – you have to strip content to fit it all on the page, which means some users can’t access the information they’re looking for.

Here are some examples:

Dove Men

dove-mob

Adidas:

adidas-mobile

3. Native App

Native apps arguably offer the best user experience of the options we have looked at so far – assuming they are developed correctly. Not only that, but they mean you can take all the content from your desktop site and transfer it to your native app, while integrating mobile device features like NFC, stored data or camera functions.

By nature, these apps are developed for specific operating systems – like iOS, Android or Windows Phone – where users can download them directly from the relevant app store. This means you need to create independent applications for each mobile OS you want your application to feature on.

Pros:

  • User experience from a killer native app offers the best mobile user experience available.
  • Accessibility couldn’t be any better if your application runs without an internet connection and users can access your content anywhere, anytime.
  • More accessibility for people who love your application and stick it to their home screen or quick menu – a constant reminder your app is ready to use.
  • Features – touchscreens and other mobile hardware give you a chance to get creative and come up with a UX to make your app unique.

Cons:

  • Cost might be an issue if you’re on a budget – native apps are the most expensive approach to mobile optimisation, especially when you have to publish on multiple OSs.
  • Support is limited to OS platforms, which means only certain users can access your application.
  • Accessibility takes a hit when users have to download your app – especially if it isn’t free.
  • Updates need to be approved by individual app stores, which means fixing bugs can take time and requires more downloads from the user.

Examples include:

alarmclock

phoneui

4. The Mobile First Approach

Responsive design has come a long way in its short time and its most recent incarnation solves enough problems that it deserves a mention in its own right. The mobile-first approach starts with a design optimised specifically for mobile, then using media queries, adjusts to suit devices as they increase in size. This is basically the opposite approach to the early responsive sites that degrade “desktop” websites down as devices get smaller.

The advantage is a website specifically optimised for mobile devices that grows into a desktop design, without the need for multiple sites or native apps. The challenge for designers is to come up with a design that allows content to scale or increase as devices get bigger. This is an issue every designer needs to address now though, as the introduction of new technology means we are no longer designing purely for desktops, laptops and mobile devices.

Pros:

  • Low cost makes a comeback if you can find a designer who buys into the mobile-first approach.
  • User experience is better for mobile than the traditional approach to responsive design.
  • Versatility breaks away from the concept of designing for the devices we use today and moves into websites that respond to all devices – present and future.
  • Future-ready in that mobile-first designs should work on future devices, meaning less money spent on redesigns down the road.
  • A single website means one URL, less maintenance and content creation.

Cons:

  • User experience isn’t purely focused on mobile devices like separate sites or native apps.
  • Content means designers have to come up with creative means to grow elements on the page as displays get bigger in a way that maintains usability, while keeping all content available to everyone.

Conclusion

Each project comes with its own specific requirements and they will largely decide which approach to mobile is best for you. If budget is no issue, there is no reason you can’t go for a responsive website as well as a native app across the major OS platforms. Meanwhile, if budget is an issue then you might have your answer right there – responsive design is the cheapest option and it offers a strong user experience across multiple devices.

Personally, my pick of the bunch is the mobile-first approach because it keeps code nice and clean and forces us to really think about how content and layout works across different screen sizes. As the Internet of Things works its way into our cars and wearable technology, the sooner we forget the notion of designing for computers and mobile devices, the greater longevity our design principles will have. Despite the name, mobile-first is the closest we have come to this concept so far and that is why it gets my vote amongst the options.