Guidelines
When approaching any piece of work, it should be created using a small viewport, unless it targets larger viewports or devices e.g. iPad.
Currently in Compound this is usually the size of the smallest, active native device (width-wise). As of 2025, the smallest resolution squads will be working with, will be:
- iOS - 375x812px
- Android and Web - 360px x 640px
Due to larger viewports on web and native platforms it should always be considered that the maximum viewport size isn’t always what the user chooses to view an UI at.
Screen Sizes is a great resource for all resolution requirements.
Once the work has been agreed, larger viewport variants can be created – but the priority should always be on small-viewport first.
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 – especially those over 55.
In the 55-64 age range, usage has increased from 9% in 2012 to an 93% in 2024. And for the 65+ age range, it's increased from 3% in 2012 to 77% in 2024. [Source: Uswitch]
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 generally?
It’s more important than ever to maintain a small viewport-first focus on the design of customer experiences.
Scaling up experiences is often much easier than the ruthless focus that’s required to create a simple, elegant experience that meets customers' needs.
Platform order
With so many platforms out there, it can sometimes be confusing where to start, especially if the requirements include designing across many.
When designing for web, start with the smallest viewport and iterate through the breakpoints for that platform.
When the platform is React Native, work on the smallest view port for the main feature. From create variants for the platform differences, particularly in navigation and information architecture.
From there, you can move on to larger screens like tablet or desktop, which can in turn influence the largest web displays.
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 the user's path and then make it as easy as possible for them to get there. If the user doesn't need it, it shouldn't be there.
Designing for mobile quick tips
- Supply the key only - content the user needs at that time – additional information can clutter the screen and add confusion
- Design clear navigation - A user should always know where they are and be able to move through a section or up and down between pages
- Ensure controls have a 44px minimum touch target - This includes whitespace around the element
- Account for browser chrome on mobile web - it reduces the overall viewport size
- Keep designs simple - focus on usability, load time, and presenting essential information