Mobile-First Web Design

Mobile-First Web Design

Aug 28
mobile-first design
August 28, 2018

Building websites on desktops and downsizing them to fit smaller screens, almost as an afterthought, has been commonplace in the web design industry. With advances in technology and the way society harnesses that technology to access information, it is far past time we reevaluate that strategy.

 

image2

 

More than 70% of people are using their mobile device to browse the internet at least some of the time, and of that 70%, around 20% of them are exclusively browsing the web via their phone or tablet. That’s a lot of people seeing your mobile website and never viewing your desktop site! So why not turn the traditional design strategy on its head to ensure all of your visitors are getting the best experience possible.

 

image3

 

With more companies exploring the benefits of a mobile-first approach “graceful degradation” and “progressive enhancement” have emerged as buzz words for this movement. The idea is that starting with a design for a large screen, leads to having to come up with a scaled down, lack lustre version when it’s time to fit it into the limitations, such as smaller screen size and processing system, presented when building for smaller devices. By starting the project on a small device, you are forced to streamline your message and prioritize your content, putting exactly what the visitor came to your website for front and centre. From here you can enhance your website instead of having to decide what you are able to cut out of your design while still keeping it functional. You get to build on the crucial framework you have already set out with all of the added features a larger device offers.

 

image4

 

What is the difference between “responsive” and “mobile-first”? With a responsive website, your desktop website automatically resizes to fit whatever device it’s being viewed on. There are two downsides to this method. The first, is that visual aspects of your website may translate poorly on a smaller screen. Too much content, difficult navigation, slow loading time, and poorer overall aesthetic value, are all problems you can come across with a responsive design. Secondly, it can affect your SEO poorly. Some search engines will rank your website lower if it’s not optimized for mobile so you want to ensure that your website works across all devices as seamlessly as possible. With the mobile-first approach, you are creating a different website specifically for mobile users so you know your website is optimized in every area to be user-friendly.

All of this doesn’t necessarily mean mobile-first is the right choice for your brand. Take into consideration situational context. What’s your typical customer base, and what device are they using to search for your product/service? Use the answers to those questions to guide you to delivering a positive user experience.