Mobile First
Luke Wroblewski’s book, MOBILE FIRST, was published nearly ten years ago. I remember being incredibly excited and inspired by the concept of “mobile-first” and put it to work right away.
Ten years on, you might think that this feels like a rather old fashioned or irrelevant strategy to be discussing. There are endless screen sizes and devices out there and some might argue that an omnichannel approach would be a better strategy.
The increase in mobile usage
Ten years ago, ”mobile-first” felt avant-garde because our visitor traffic statistics showed that less than 20% of traffic was on a mobile device. Just as you would expect, like most new concepts ahead of the curve, it’s not easy to convince others it’s a worthy investment.
Over time, more people started to hit the website on mobile. Perhaps in their lunch breaks, commuting or chilling on the sofa in the evening. Thus, checking the website simply “worked” on mobile was no longer sufficient.
According to our latest visitor traffic statistics, we have a 50/50 split between mobile and desktop, which marries up with the global average. In 2020, 84% of UK adults were reported to own a smartphone and 51% of the time spent online in the US is on mobile devices.
Even though the trend is showing higher engagement with mobile apps than websites, you might like to argue that mobile and desktop are equally important.
Rebuilding our app
In 2018 we began redeveloping our 12-year-old amazing, industry-leading accountancy application and with that came our strongest mandate for “mobile-first”.
The sort of accountancy-related tasks a Crunch user might do in the Crunch app varies considerably — from quick and simple tasks like raising an expense to doing a Self Assessment. Arguably some tasks are more suited to sitting down at a computer for an extended period of time. Additionally, some forms of rich data are most adequately presented in a large table on a larger screen. Lastly, the Crunch application is not solely used by our users who are business owners, but by independent bookkeepers and our in-house support team. Thus, it is still valuable for us to offer a folded out, expanded desktop experience.
The importance of the mobile experience was becoming more apparent and we were struggling to provide our paying clients with what they needed. We briefly pacified this with a mobile app with limited functionality. However, it became more and more important for Crunch to provide a truly useful and desirable mobile user experience.
With this in mind, we decided to rebuild our application in ReactJS as a PWA (Progressive Web App) taking a “mobile-first” approach. Even though we had already been practising a “mobile-first” strategy with our website and component library for some time, it was now it would become notably more effective, applicable and really come into its own.
What is “mobile-first”?
Without getting too much into usability fundamentals, when we use the term “mobile user” we might make some generalisations, among others, such as:-
- That the device viewport is predominantly in a portrait orientation and aspect ratio
- That the user’s connection to the internet is limited and unpredictable
- The user uses touch to interact with the UI, possibly one-handed or with the thumb alone, etc.
Below we will go into some more detail about what challenges these criteria bring to the table.
You know you are following “mobile-first” when you…
- Do not use many CSS breakpoints and those you do have are in an upward direction (min-width)
- You do not have code making exceptions specifically for mobile
- You do not have a “mobile version” of your site
- You primarily test your work on mobile
- You primarily demo your work on mobile
- The differences in your UI between small and large viewport sizes are few and far between
- You do not panic towards the end of a project to get things to work on mobile as this has been central to the project from the beginning.
Is there anything you would add to or remove from this list?
Like it sounds, “mobile-first” makes mobile “the boss”. Not just important or worthwhile — but first and foremost. It’s where you start, as opposed to being an afterthought. The result is an uncompromised mobile user experience.
Our experience and hope is that by putting the effort into achieving a fabulous mobile experience — desktop users can inherit a great experience too — and that it does not work the other way around.
A purpose-built native mobile app is intended purely for mobile, whereas a website or PWA welcomes all user types. Thus, deciding to purposely pursue a “mobile-first” strategy could be key to maintaining focus on and promoting mobile UX within all the teams concerned with developing the application.
Initially, even if we were all aware that we wanted to follow a “mobile-first” strategy, we often failed to keep this in mind at all stages of its developing, testing or reviewing. It was hard to change our habits, for example, we would often demonstrate our work to stakeholders on desktop and completely forget about mobile. When we started demoing work on mobile instead, the effect was dramatic — highly influential and indoctrinating.
Thinking critically
Photo by Markus Winkler on Unsplash
It goes without saying that the challenges of designing and developing a user interface for mobile devices are different from those for desktop, and arguably the challenge is a far greater one.
Limitations to this approach (or opportunities — you decide! ):
- When designing for a small, tall and narrow (portrait) viewport, you are confronted with considerable limitations.
- You should anticipate that the user will mostly interact with the UI using the limited reach of their thumb.
- You should expect the user’s device and an internet connection to be limited in some way.
Can you think of any other limitations?
Does having limitations make us better at what we do?
For me, it helped me to think outside the box and be more thoughtful — in a similar way to Accessibility (Inclusivity).
By focusing on the extremities of the spectrum we fortuitously increase inclusivity. “Mobile first” is another pillar of our values that promotes thoughtfulness and inclusivity.
Agile & LSD
The “Mobile-first” strategy is great for lean software development because it dramatically reduces development time and future maintenance.
Let’s take a look at a specific example from a project at Crunch. As part of the redevelopment of our application, a new button was designed to provide users with a shortcut to triggering primary actions within the app. On mobile, it would be a FAB (Floating Action Button) and something similar but significantly different on Desktop resembling a drop-down menu.
To cut to the chase, over a year has passed and we only implemented the FAB button, and we have no plans to deliver an alternative for desktop. The reason is simply that there is no perceived value in spending any further time or effort to do so since the FAB button works equally well on desktop and mobile. Doing it the other way around would have been at the expense of mobile UX.
When it comes to agile principles, taking the “mobile-first” approach has allowed us to quickly develop a PWA undercover, without needing any explicit or independent mobile work to be carried out.
Written by Benjamin Herbert — 14th December 2020
