Designing for a mobile web experience in 2019 is no longer about having a ‘mobile-first’ mindset.
This might sound odd to anyone who has read a blog post on the subject over the last couple of years. Indeed, we have written pieces about this very subject and used the phrase ‘mobile-first’ on more than one occasion. And that’s fine, because Google’s decision to place a greater emphasis on the mobile experience offered by websites when deciding rankings can only be described as a mobile-first mindset.
However, when it comes to design, things are rather different. They’ve evolved. Now, it’s not about mobile-first design any more; web developers and designers are taking a step back and beginning to design separately for mobile once more.
This is a very good thing indeed.
Let us explain.
Clearly, you want a website that is light on its feet, uncomplicated, non-cumbersome from a hosting perspective and which requires zero work from the user when transitioning from a desktop to mobile experience.
This is where responsive design excels; it automatically adjusts the layout of a website based on the screen size in use.
However, that doesn’t mean you can get lazy as a web designer. Far from it. If you rely solely on responsive to create a mobile browsing experience, you’re missing a trick. Instead, you need to consider every type of device and design for each screen.
For instance, as the website scales, how is that CTA button going to look on an iPhone XR? And will the colour scheme you’ve picked really work well on the vibrant screen of the latest Samsung?
People interact with websites on mobile devices very differently to those of the desktop variety. Typically, they’ll be after an answer, fast, and will therefore have a very goal-oriented browsing experience in mind.
When designing a website to work on small screens, it’s therefore vitally important that the most common goals are there, immediately, within the upper third of the screen - even if they’re not on a desktop screen.
It’s virtually impossible to scale web content for a desktop down to a mobile screen.
This sounds like we’re going against every principle of responsive design, but that really isn’t the case. Just like a user’s goal will be different while browsing your website on their phone, so too will their expectations be when it comes to content.
Modern web designers take into account the screen size of each device and how content will best fit in each instance. That might mean removing certain content on mobile or adjusting the layout so the more cumbersome, desktop-ready stuff isn’t as prominent. And, on pain of death, it certainly means avoiding horizontal scrolling at all costs!
Think about the way you use your own phone when browsing the web. Chances are, you’ll simply scan websites rather than digest them as wholesomely as you might on your laptop or desktop computer.
When building a website, it’s important to take this factor into account. As content scales down to smaller screens, it needs to become ultimately scannable, therefore the order in which it appears is vitally important, along with sometimes prioritising content over user interface elements.
Predictable navigation is important for modern mobile web design. Often, this will mean taking the lead from smartphone operating system design when it comes to buttons, content placement and the way in which the website allows a user to flow through the various pages.
It’s also common to reduce the number of navigation options on mobile compared to desktop. A mistake we regularly still see is the same long menu wedged into a tiny drop-down ‘burger’ button on mobile screens. People just don’t have the time to navigate those kinds of interfaces on mobile.
We’ve all been on mobile websites that make a ham-fisted attempt at contact forms - it’s an incredibly frustrating experience.
When designing for mobile in 2019, pain-free form-filling is the cornerstone of a great browsing experience. You can create this by using autocorrect, auto-capitalisation, no drop-downs, reducing the number of fields and automatically moving the user from field-to-field on completion. This element should be tested to the nth degree, too.
While designing for mobile is invariably different to the desktop these days, it’s still important to retain consistency. The mobile browsing experience should still feel like that of the desktop, albeit more appropriate for a smaller screen.
Most importantly, the mobile version of your website shouldn’t feel like that; it should work naturally and provide the user with everything they need to reach the goal the business desires. That way, everyone’s happy!