Responsive Design and the Mobile First Approach

Responsive design is a widely accepted strategy for those looking to maximise their website’s exposure to users across multiple browsers and devices. On the surface of things this sounds great but as a technical exercise this can be challenging, especially if the design and navigation of the website was not initially designed to be viewed on mobiles.

Adapting a desktop driven design to fit on mobiles can be, at times, an extremely challenging process. Naturally when you design for a platform, you want to take advantage of what that platform has to offer and maximise the ‘wow factor’ of the design. However this can lead to issues when you’ve designed to include functionality which doesn’t scale well between platforms.

If we take top menu navigation as an example, ‘on hover’ drop down menu functionality works brilliantly on desktop machines where the user has access to a mouse, but how does this translate to mobiles, tablets or touch screen PCs where hover effects are not supported?

When approaching responsive design it is small factors like this that have made it a minefield, but what is the solution?

There are two schools of thought when approaching this issue:

• Graceful Degradation
  This approach starts with looking at the best possible experience (usually desktop devices) and then considering each possible degradation to ensure that even with the lesser possible functionality available on smaller devices, the website remains navigable and functional.
• Progressive Enhancement
  This is effectively the opposite of graceful degradation – you start with the minimal size/enhancements and then as you move up through larger platforms, you add enhancements to the site as you are freed from the constraints of smaller platforms.

On the surface of things these two approaches are very similar, however due to the differing starting points there can be a dramatic effect on the design process. The issue with graceful degradation is that although in theory it is a sound idea, more often than not, the mobile product feels like an afterthought which is a watered down version of the full product rather than a full product in its own right. So for this reason alone, I believe that progressive enhancement is the way forward.

How does this fit in with responsive design?

Responsive design is built around the concept of media queries targeting different devices and viewport sizes and this plays into the hands of progressive enhancement as you would design for the smallest size first and enhance your design for the larger devices. This is what the mobile first approach advocates and an increasing majority of the web industry have started adopting this approach. There are also frontend frameworks such as bootstrap have been rewritten to take advantage of this approach.

Are there downsides to the Mobile First Approach?

The first thing to say here is that doing mobile first is neither easy nor is it fun. Responsive design is tricky at the best of times when you’re designing one website for multiple view ports but this does typically allow a designer to explore more options and find the best fit for each device.

When designing from a mobile first approach, you instantly find yourself challenged by constraints and although I’m not a designer I can appreciate that being told/realising that you are limited in what you are able/allowed to do is not a fun place to be in.

For the seasoned designer who is used to designing for desktop first and using this design to scale down, designing mobile first is a large shift in direction and sometimes that change can extend the design process whilst you are still adapting.

Looking objectively at the mobile first approach it is definitely a mixed bag which is very different to how designs were traditionally created. But it serves to highlight and reinforce certain principles which in my opinion has been somewhat lost in the web.

By utilising a mobile first approach, you are forced to examine your website/project with only its bare essentials and prioritise the content. Also, by considering mobile devices first you are able to reduce load times as you load in only the elements required for that device, as opposed to loading in the bloat that is often associated with responsive design. And this can be really important as Google takes page speed into account for their search rankings.

Ultimately the mobile first approach aims to give all your users a consistent experience across multiple platforms and the benefits are there for everyone to see as large companies like Google have also adopted this approach.