Why You Should Consider the Mobile-First Design Principle

In 2016 StatCounter released a report that showed mobile internet usage had surpassed desktop usage for the first time. At that point mobile users outweighed desktop users 51.3% to 48.7%. Since then we've seen a little more rise in mobile usage, especially so in emerging economies. China has nearly a billion internet users with 98% of those users coming from mobile platforms. Even in the U.S. 51% of users are accessing the web via mobile. Mobile is here and it's taking over. More people than ever have smartphones. The older generation had no choice but to use a desktop to connect to the internet. 

One statistic that is important to recognize is engagement. It appears that desktop users are engaging with content more than mobile users. However, the cause isn't clear. It could be that the people still using desktops are using their devices in more focused ways. It's possible that mobile users are less engaged due to differences in the platforms. For example, desktops can open tabs and these open tabs may skew engagement statistics even if they aren't active. Even knowing this, it's still clear that mobile usage is on the rise.

With all this said I still believe there are cases where focusing on the desktop experience makes more sense. If you're building an app for professionals that will be working at a desktop it doesn't make sense to build your experience around the mobile clients first. 

For years we've designed websites around the desktop experience. As smartphones became more popular we started using responsive web design to modify how our content looked on mobile devices. While this is better than having a desktop only layout for your website, it's still not prioritizing the experience of most of your users. 

In 2010 Eric Schmidt announced that Google would develop apps using a mobile-first approach where instead of developing apps for desktop and then modifying the experience for mobile users they would flip that on its head. They now develop apps for mobile users and then modify the experience for desktop users. With smaller screens it's important to reduce clutter which includes reducing navigation items, producing content optimized for less real-estate, and smaller responses. Hopefully we'll soon remove the need for reducing response sizes with the advances of mobile internet connections but it may be a long time before all of your users are capable of downloading Mbs of data in a reasonable amount of time.

In March 2020 Google announced that their search engine would start indexing mobile-first, starting in September 2020 (currently delayed until March 2021). This means Google will primarily rank your website based on your mobile content. This new ranking system will affect your discoverability if you don't take mobile content seriously. 

Mobile-first is primarily a content-first approach. In some contexts you will need to serve content tailored to the device. These days there are plenty of tools available to serve customized content based on the type of browser making the request. Often just approaching content from the mobile-first perspective is enough as mobile content often works well enough on desktop clients.

Let's take a look at a few UI standards for mobile-first websites.

Element Prominence: With less real-estate to work with you need to be more careful with your layouts. It's important to take care to place the most important elements where they are more visible and/or more accessible.

Don't Rely On Desktop UX Features: The most obvious one here is the absence of a mouse. This in turn means no more hover events on links, no more dynamic mouse pointers to hint at the type of action that can be performed on an element (e.g. grabber is commonly used to show an element can be dragged to resize)

Portrait Images and Large Graphics: Portrait Images and Large Graphics: Portrait images tend to take up the entire screen on mobile devices, and similarly, large graphics eat up valuable real-estate. Avoid using these as they can produce an unpleasant experience for users trying to read or navigate content.

Sticky Headers and Footers: Sticky headers and footers can make websites more usable on large screens where we have lots of real-estate to work with. However, on smaller screens they often leave suboptimal real estate for the content. There's nothing worse than finding a website with the information you need but you can only view it through 1/3rd of the screen because the navigation is in the way. If you need the navigation to be available consider making it sticky but hide it when the user scrolls down and reveal it when the user starts scrolling back up. 

Small Buttons: When using a mouse it's really easy to pinpoint a pixel to click. With fingers it's much harder. Try to avoid using small buttons where possible. Make the touch areas as large as possible.

Building an application that works great on mobile doesn't mean it won't work well on desktop. Often you'll find that building the experience primarily around mobile will lead to a great desktop experience as well. However, if you do find that you need to offer more to your desktop users you might consider building a customized experience for users coming from desktop clients. This can range from something as simple as adding more columns to a table on larger screens to revealing additional features. As always the decision needs to be made based on the specific requirements of an application.

OOZOU has been designing beautiful bespoke products for close to a decade. If you would like to understand if mobile-first design makes sense for your product get in touch. We have a team of product managers that would love to go over your ideas with you to see if we're a good fit.