UX & performance
Design a readable, fast mobile-first website
A mobile-first website begins with a small screen and the possibility of interrupted use. It requires more than stacking desktop columns. Content, images, controls and loading behaviour should let someone understand the page and complete a task comfortably.
Make the content hierarchy work on small screens
Start with visitor questions: what is this page about, why does it matter and what can I do next? Specific headings, a concise introduction and clearly named sections make a long article easier to navigate. Mobile use does not require removing helpful explanations; it requires organising them well.
Do not keep shrinking type to preserve a desktop composition. Allow headings to wrap and give paragraphs comfortable line spacing. Use lists for steps or comparable items, while retaining explanations where they are needed. Check long words, addresses and translated text as part of the layout.
Adapt navigation, forms and media
Links and buttons should be identifiable and separated enough for touch. An action that depends entirely on hover does not work the same way on a phone. Provide visible focus and test keyboard navigation on computers too.
Keep form labels readable and place errors near the relevant fields. Test with the keyboard open, because it can hide actions or reduce the usable viewport. Enlarged images, documents and video should be easy to close. A viewer should fit the screen and release scrolling correctly when it closes.
Deliver images suited to their displayed size
A phone does not always need the maximum-size source prepared for a large display. Provide several image sizes and let the browser choose an appropriate source. Preserve proportions and reserve space to reduce layout movement while images load.
Prioritise content visible at the start of the journey. Images further down can be deferred. A cover image and click-to-load player can avoid immediately downloading an external video embed. Keep the information usable, however: excessive compression or an undersized interface capture can make a lightweight image unreadable.
Measure loading, responsiveness and visual stability
Core Web Vitals describe three aspects of experience: main-content loading through LCP, interaction responsiveness through INP and visual stability through CLS. They help locate particular problems. They do not completely describe an offer’s clarity, a form’s usefulness or the accessibility of an entire page.
Distinguish laboratory tests from real-visit measurements. Check several page types and representative conditions. One result on a fast computer is not enough. Identify the cause before optimising: oversized media, blocking resources, JavaScript work or server response. Prioritise changes affecting an important user journey.
Connect performance with content and discoverability
A lightweight site also needs useful information, descriptive titles, internal links and consistent addresses. Keep essential content available on mobile. A guide collection is less useful when visitors cannot reach it from the rest of the site or its pages repeat the same material.
After changes, check horizontal overflow, enlarged text, menus, forms and media viewers. Performance supports user experience but cannot guarantee search rankings. Combine technical measures with observation of the tasks visitors are actually trying to finish, then use those findings to choose the next improvement.
Your checklist
- Organise headings, introductions and sections for mobile reading.
- Test touch, keyboards, focus and form errors.
- Provide appropriately sized images and reserve their space.
- Measure several journeys under representative conditions.
- Check internal links, useful content and horizontal overflow.
Frequently asked questions
Does mobile-first mean every page must be short?
No. Detailed content can be useful when it has a clear contents list, descriptive headings, readable paragraphs and simple navigation. Length should follow the subject and the answers readers need.
Is a good performance score enough for SEO?
No. Technical measurements complement content quality, structure, indexability and links. A score alone cannot guarantee rankings or conversion results.
A project to explore
Hush Messenger
Hush Messenger presents interfaces for iOS, Android, macOS and the Web. Its project page illustrates presenting a shared purpose through different devices, journeys and formats.
Explore the project