What is mobile first web design and is it right for my website?

November 10th, 2018 by

Responsive Website Design has been around for a while now, ever since the massive boom in smartphones. In recent years a new approach to designing websites has starting gaining traction among UX designers: mobile first web design. So the question I get asked is: if responsive websites are meant to be designed for all devices, how does mobile first web design differ? And which approach is best for my website?

Website for London based event catering company Bovingdons

What is responsive web design?

Responsive web design has more or less become the norm. Many, if not more, people now browse the web on the phone than they do on desktop computers (stats). With the amount of people accessing websites on mobile devices, it would be hard for any UX designer to justify creating a website just for desktop browsers!

A responsive website is based on the graceful degradation approach. It has been designed and coded to respond to its environment, with first consideration given to the desktop design and user experience. For smaller screens, the experience then adapts and degrades, losing features along the way to become more suitable for smaller screens and slower loading times.  

responsive web design

So how does it differ from mobile first website design?

The simple answer lies in in its name. Mobile first websites are designed  to look good and work well first on the smallest screens, with second consideration given to larger browser windows. And it makes a big difference, both for design and usability.

How does a mobile first web design approach affect the design process?

Mobile first web design focuses on the mobile user experience: an app like user interface with bite-sized content: less text, larger fonts, some video and audio, one call to action per page, short forms etc.  In other words: the focus is on the content and user experience on a small screen: A well thought out content hierarchy and structure are key. With such a small amount of space available, and with slower loading speeds, everything has to be stripped back to the essentials.

mobile first web design

Progressive enhancement: As the screen get bigger, moving from mobile to tablet and desktop, additional content is added to the site. Yet with the main focus on the mobile design, the desktop experience is unlikely to be as rich as it would be in a desktop first responsive design.

So is mobile first design better than responsive design?

Not necessarily. It really depends on your target audience – will they be primarily accessing your site on mobile devices or on desktop computers? A first start to finding the answer is within your visitor stats on google analytics.

If you can see that most visitors are browsing your site on a mobile device, then a mobile first web design approach is your best bet. If however most visitors are accessing your site on a desktop, then a responsive web design approach is going to provide a much better user experience to the majority of your visitors. Either way, it is important to bear in mind that a good UX designer will always make sure that your website provides a good user experience to all users, irrespective of which device they access your website on.