Tag: design

list-image

Mobile-first, mobile-last, mobile everything

By Dave Haygarth   November 12, 2020  

You don't need me to tell you that smartphones are becoming a bigger part of daily life for us all with almost every breath, Users of mobile phones reached 3 billion users worldwide back in 2019, with the figure - fairly predictably - set to climb over the next few years, with nearly 4 billion by the end of 2021. [source: Newzoo]

But your traditional perception of a web user interface designer  - sitting behind a very large Mac screen is probably pretty much bang on. The nature of user interface design is visually intensive and if someone's going to site 'pushing pixels around' all day, then they need a decent workstation.

But that leads to a problem.  And it extends far beyond the designer. Right down the chain of people involved in commissioning, prototyping, testing, designing, tweaking, coding ... we're pretty much all sat with comfortable large screens and that's why the idea of designing a website (or even just small parts of the user interface) has tended to err towards a desktop experience, and mobile experience - when it came along in the first part of the last decade - was 'bolted on'.  People had got into bad habits that with the growth of mobile usage, were on a course towards disaster.
The big G.
The course we're being steered on here, inevitably, is being spearheaded by Google.  They have numbers, algorithm, and what basically amounts to a bit of common sense. THEY know the deal.  THEY know that people use mobiles. So they introduced the 'mobile-first' concept - firstly as a ranking signal in 2015, then rolled out more publicly back in 2016.
So what does 'mobile-first' mean?
To us, it's a culture. We started to use different tools back in 2016.  We started to 'release' bespoke designs to some clients as 'mobile' but, soon had to back-pedal on that, as it confused the heck of some people who were checking the design - sat in their office - on that comfy chair and big screen!  Still, however, the concept rules. Our design team use tools that are based around mobile - and frameworks in the templating systems that stem from mobile.  (Think: big thumbs on small buttons, and all those kind of no-no things)

We proudly switched to Invision for user interface prototyping and concepts. At the time, it was a relative gamble, but worldwide, it proved a good horse to back, and is pretty much indispensable now.
Mobile-first: Not just about mobile
It's so much more about whether your site looks and feels good at people's fingertips. By making a site work well on small screens, the side-effect is to force us to make sites more accessibility-friendly. If a site works well on mobile, it is likely to work well on all devices.

Smaller screens also have a tendency to make you think about pushing important things to the top of a screen.  [Think: "sidebar"] - with limited display space, you have to really work out what is important and what is less so.

Your branding also had to evolve as we got onto smaller screens. Logos that move out of the way once you've seen them. Menus that only appear when you need them. Space is of a premium.

Take a look at the image below.

Mobile-first best practice design
Mmmm... burgers
One final thought. The good old burger menu. Contrary to popular belief, the hamburger menu actually originated way, way before smart phones. If any of you are old enough (like me!) to remember those state-of-the-art Xerox Star, the 'system' menu actually came from those.

... but there is something just so "right" about how some things just work on limited space. And the burger is one of them.

McDonald's even got one designed for them

On that note, I'm off for lunch.
Dave.