I’ve read many articles over the years about always designing for mobile-first, and met many designers who mention it with pride as best practice. Mobile traffic has been on the rise for years now, and with 5G coming in fast, it’s only going to increase. So is it right to focus on mobile for all platforms and let the desktop and tablet screens follow?
The difference between responsive design and mobile-first design
You will hear the terms ‘responsive design’ and ‘mobile-first design’ used a lot and sometimes together. Traditionally designers design for desktop first, and then design how it responds down to mobile. They might even skip tablet designs altogether. This is called ‘responsive design.’
When we design ‘mobile-first’ – you guessed it – we start with mobile and then work our way up through the most used screen sizes.
There are perks to both methods in terms of process. When you start with the desktop designs I personally think you can visualise the content a lot more easily, because you have more space. If you start with mobile, it can sometimes be tricky to work your way back to desktop and stack the sections you have into a much larger grid. But designers are not the focus here – users are.
Mobile vs desktop traffic
In the last seven years, mobile traffic has increased worldwide by 222%. This is an incredible increase, but currently, in the UK, approximately 52% of internet usage is via mobile devices and the rest comes from tablets, laptops and desktops.
Google recently announced that they are switching to mobile-first indexing for the whole web as of September 2020, which puts more pressure on companies to prioritise the mobile version of their sites to rank the highest they can on Google. This has been a long time coming – Google started penalising websites that weren’t mobile responsive a few years ago now, but they’ve now made the final switch. They are protecting their users, who typically use their phones to search for quick results to their immediate daily needs.
Does this mean that your users will definitely use mobile-first to view your platform? The answer is – it depends.
Knowing your audience
I spend nearly 8 hours a day on a laptop for work, and hours (don’t shame me) scrolling on my phone at night. I also have an iPad which I grab when I want to see something more clearly instead of my phone. Which device I pick for each situation depends on so many variables and many that are sub-conscious. It mostly depends on what job I am trying to achieve – am I browsing or do I have a specific goal?
If I am searching on Asos (other retailers available 🤷♀️) for example, I’m probably going to open the app up on my mobile and have a browse. If I was to self-analyse I would say it’s because it’s easier to scroll with my thumb than a mouse or trackpad. It’s also quicker to flick between items and back to archive pages. In comparison, if I was looking at my Google Calendar, I would prefer to see it on my laptop or iPad because it’s easier to see the bigger picture than on my phone. They can improve the UX as much as they like but seeing it on my computer screen will always win.
This isn’t just about ease. Devices change for users dependent on the time of day too. If you are commuting on a crowded train you are not going to open up your laptop and balance it on your neighbour’s knee. We’re looking to capture users and reach their needs at different times.
As a design team, we always consider our client’s demographic first. That might seem obvious, but if you have a platform that is most likely to be used by desktop users, then design for desktop first, and create a seamless tablet and mobile experience to follow. Generally speaking, business-to-business is still heavily dependent on desktop devices, compared to business-to-consumer, for example. That being said, digging deep into your platform’s analytics to see what devices are used most is much more helpful than making assumptions.
We recently had an automotive client that knew their audience mostly used desktop to search on their platform. This was a great opportunity to focus on the UX for desktop. This insight into their customers allowed our team to create a robust design system that worked across the platform and adapted responsively, in the right way for their users.
Why responsive should be designed and not just developed
Whichever screen size you choose to design first, you should always have the opportunity to design as many screen variations as you think are appropriate, whether that is desktop down to tablet and mobile or vice versa.
Many years ago, I often found myself without the design time or budget to do this, so developers had to adapt desktop designs responsively themselves. This approach really devalues the user as a priority. Their experience on all variations of the platform is important, and it should be seamless from one to the other.
This brings me on to the question of whether the desktop and mobile view of the platform need to be ‘the same’. When smartphone use started to rise, we would often see a link on websites to view mobile version. This would take you to a responsive design, which would often miss functionality that the desktop version had. I remember clicking view desktop version on websites on my phone just so I could find a section I was used to seeing 😡.
Google are not only crawling websites mobile-first, they are also checking that the website works across all devices, and that the content is the same. They don’t want a completely different experience on mobile and desktop, and neither do users. Users often switch from mobile to desktop one day to the next, or even within the same journey, and they need familiarity and intuitive experiences. Naturally, the website is not going to be mirrored completely from desktop to mobile – we’re dealing with fingers, not mice, after all – but seamlessly moving from hover states to haptic feedback could be the difference between a platform and it’s competitors.
If the reward for a user going to a different device is important, an indicator for them to switch for a better experience can do the job. Take Instagram, for example – if you open up a link to an account in your browser, they will tell you to switch to the app.
Where do mobile apps fit into this?
The e-commerce sector is a great example of how experiences in the browser can move onto native mobile apps without user confusion. If a platform has a native app equivalent, this should be designed to work well with the mobile view of the website. Coherence is key.
On the back of this, a native mobile app should only be created if users need quick access and an isolated experience – for example, if they order consistently from a retailer and want to maintain saved items or track orders, with quick access. Nobody wants or needs a native app that they click once in a blue moon, and could do everything for them in a browser.
So, what about designing web apps? (You still with me?)
Web apps still need to be designed to consider all device types. Whether its a web app or a progressive web app – a great in-between of a native app environment within a browser – designing responsively works in the same way. Start with the device your demographic use most frequently.
"The user's experience on all variations of the platform is important, and it should be seamless from one to the other."
The moral of this long story is that the internet is constantly changing, and demographics and audiences evolve alongside. Users decide which device to use depending on the time of day, their routine, when they want to procrastinate, during a commute or when they are sat on the loo.
Whilst we can never account for every use case, the focus for any product or website should be its users, and designing for mobile vs. desktop-first should be no different.
Get to know your users first, look at your demographic and the common variables, and the rest will follow.
