Guidelines
When approaching any piece of work, it should be created using a small screen viewport, unless there’s a specific reason for it to be targeting larger screens (for example, a piece of work for the iPad).
For us, this is usually the size of the smallest, active iOS device (width-wise). As of 2022, the smallest resolution our team will be working for will be 375x812px.
Screen Sizes is a great resource for all resolution requirements. Once we have a level of agreement on the work, we can then look at fleshing out the larger screen variants – but the priority should always be on mobile.
This not only helps with a focus on the flows and experience – but also on clear and concise copy.
Why?
Smartphone usage in the UK has increased exponentially across all age groups in the last ten years – none more so than those over 55.
In the 55-64 age range, usage has increased from 9% in 2012 to an incredible 87% in 2020. And for the 65+ age range, it's increased from 3% in 2012 to 65% in 2020. [Source: Statista]
This usage will only have increased since then. In fact, many adults now only access the web on their mobile device with no access to larger screen devices.
What does this mean for us?
It’s more important than ever to maintain a small screen-first focus on the design of our customer experiences.
Scaling up experiences is often much easier than the ruthless focus that’s required to create a simple, elegant experience that meets our customers' needs.
Platform order
With so many platforms out there, it can sometimes be confusing where to start, especially if you’re designing across many.
Given our relative focus, we would suggest starting on iOS and using that as a template for mobile web and Android.
From there, you can move on to larger screens like iPad, which can in turn influence the large screen web.
Content first
Providing the optimal content to the user on each screen is key to a great user experience.
Identify and prioritise the user's primary goals, then provide secondary or tertiary needs as the user progresses down the screen.
Content is such a key deal-breaker in the mobile experience, and starting with a mobile-first approach will help manage stakeholders and writers' expectations and requests.
Identify user goals
The following questions can help to refine page layouts and content:
- What are they looking for?
- Why do they need it?
- Where will they want to go next?
Identify your user's path and then make it as easy as possible for them to get there. If your user doesn't need it, it shouldn't be there.
Designing for mobile quick tips
- Focus on content requirements: Supply the key content the user needs at that time – additional information can clutter the screen and add confusion
- Consider navigation and hierarchy: A user should always know where they are and be able to move through a section or up and down between pages
- Provide a clear hit state: Any controls that require a user to touch them should have enough whitespace around them (the guidelines between iOS and Android is 44px and this can include the whitespace around the element)
- Remember additional elements: For mobile web, always remember the browser chrome will add additional elements on your viewport, which decreases your overall size screen real estate
- Keep it simple, stupid: Usability, page load, low data usage and perceived speed all come from creating designs that present the user with what they need, at that time, as easily as possible