Mobile-friendly vs. Mobile-first

The web is becoming increasingly mobile. Since 2007, smartphones, tablets, and other devices have accounted for more and more of the internet’s traffic. As early as 2011, new design strategies such as “responsive design” emerged to answer the challenge of smaller and varied screen sizes. In 2014, Google began labelling websites as “mobile-friendly” to indicate which ones were capable of displaying content without forcing users to “pinch and zoom”. And in that same year, mobile devices surpassed desktop computers, contributing more than 50% of all web traffic for the first time.

In a very short time, “mobile-friendly” has become a common term. But now with over 10 years of the mobile web behind us, there is a new trend in web design: “mobile-first”.

Mobile-friendly: the “make it work” solution

Consider this: your website can be “mobile-friendly” without being “mobile-first”. Mobile-friendly means simply that the website will present a layout appropriate to the size of your screen. But this might also mean that certain functionality not expressly designed for mobile screens is hidden. Or perhaps the elements of the website’s layout stack on top of one another so that a mobile user can view them vertically instead of horizontally (but perhaps with no particular thought given to their order).

This “mobile-friendly” strategy at least makes a website accessible to a mobile user, but does so as an afterthought. In a world where the mobile user is primary, “mobile-friendly” needs to be taken a step further.

Mobile-first: priority interaction design

When you look at a website on a large screen, you can survey a lot of information at once. You can scan the page for the heading you need, or run your eyes across the navigation menu to find your next step. But on a small mobile screen, all you’ve got is a tiny rectangle.

When the mobile screen is your starting place, your design needs to be linear. Instead of the question, “Does it work on a phone?”, we need to ask, “What do they need to do first?” If you put your website on paper, its mobile layout might be 4 inches wide, but 3 meters long. Which 4x6-inch portions of that 3-meter page do your users need to see first?

You might even consider doing this as a nerdy-but-fun activity with your team: Print out your website’s mobile view, cut all its components into individual pieces, and decide together in what order they ought to appear. What do your users need to accomplish on your website? What actions are most important for meeting your goals?

Now you’ll be discussing your business priorities. For instance, maybe the huge, beautiful picture in the website’s header looks unimpressive on a phone screen, and should be replaced with something simpler. Maybe the poorly-placed “About Us” paragraph completely hides the “Subscribe to our newsletter” button that drives your sales. Maybe the stack order of the page’s elements puts the in-page navigation right at the top, pushing your list of products out of view.

It’s about prioritizing interactions. With such limited screen space, in what order do you want your users to experience your website?

A mobile-first website is a better website, no matter the screen size.

Another important benefit of mobile-first design is that it will improve your website for all other screen sizes. When you have done the work of prioritizing your website’s content for linear consumption, the website’s layout will fall into place with greater ease, and will naturally support on your objectives. Ask any designer: it is a much simpler task to expand a layout as more screen space becomes available, and much more difficult to condense a large layout to a screen the size of a juice box.

So do yourself, your users, and your business a favour by taking a fresh look at your website through the eyes of a tiny screen.