Designing for small viewports requires thoughtful layout decisions, robust font scaling, and touch-friendly interaction targets.
Make the layout work on small screens
Start with the narrowest layout and confirm that the main task remains possible without horizontal scrolling. Buttons need enough space to tap, text should remain readable, and forms should not require unnecessary typing. Check menus, dialogs, tables, and long headings, not just the homepage hero.
Improve the page’s loading behaviour
Use appropriately sized images, remove unused scripts, and avoid loading large libraries on pages that do not need them. Reserve space for images and embedded content so the page does not jump as resources arrive. Measure real pages rather than relying on a single score from a development machine.
Include people who use assistive technology
Give form fields visible labels, ensure keyboard focus can be seen, provide text alternatives for meaningful images, and maintain sufficient contrast. Use headings in a logical order and describe links by their purpose. Accessibility improvements make websites easier for everyone to use.
Usability review you can run today
- Ask a new user to complete the main task without coaching.
- Check keyboard navigation, visible focus, contrast, zoom, and touch target size.
- Test narrow screens, long labels, validation messages, and empty states.
- Make button labels describe the action and explain errors in plain language.
- Do not communicate important information through colour alone.
Turn feedback into improvements
Prioritise issues that block tasks or confuse multiple users. Fix those before decorative details, then repeat the same task to assess the result.