Content updated and sources checked on 19 October 2026. The original publication date has been retained.
Mobile-first design means starting with limited screen space and the user’s most important task. It does not mean cutting all the text until only a button remains. For a service provider, the core task might be helping someone understand what you do, whether you work in their area and how an enquiry works.
1. Choose a task before drawing a screen
Write down what a visitor needs to be able to decide on the page. Gather the information needed for that decision: the offer, conditions, evidence and next step. Then create a simple mobile sketch. If the content order is wrong, a desktop design with more space will not solve the problem.
2. Keep the main content available
Google uses mobile content for indexing and ranking. The mobile and desktop versions should be equivalent in content.[6] Do not simply remove service information or answers to questions to make the screen look calmer. A different layout is fine; keep the necessary information available.
3. Build controls that do not rely on touch alone
WCAG 2.2 AA specifies a minimum of 24 by 24 CSS pixels for pointer targets, with exceptions including sufficient spacing and links within text.[17] Larger buttons can be more comfortable, but 44 by 44 is not the general AA minimum requirement. Also ensure that menus and forms can be used with a keyboard and visible focus.
4. Make forms understandable
Only ask for information needed for the next step. Label fields, explain unclear questions and show how to correct an error. Test with the on-screen keyboard open. Check that the submit button remains reachable and that a failed submission does not unnecessarily erase the information entered.
5. Add space on larger screens
Use extra space for clarity, not automatically for extra distraction. A second column can improve comparison between options; a large animation can interrupt the task. Start with a working foundation and add only elements that support the content. The same contact journey should remain recognisable on every screen.
6. Test zoom and real content
WCAG describes reflow for vertically scrolling content at 320 CSS pixels, with specific exceptions for two-dimensional content.[7] Test with long titles, error messages and your own copy, not just a short demo. Go through the page with zoom enabled and check that fixed bars do not cover content.
7. Going further: use a handover task
Ask a colleague to find a service and prepare a test enquiry without explanation. Note where they hesitate. Combine these observations with technical checks of images, forms and different screen widths. A list of small improvements is more useful than the general conclusion that mobile needs to be better.
Frequently asked question: is mobile-first a ranking factor?
Do not confuse the design approach with Google’s mobile-first indexing. Good mobile design supports users but offers no guaranteed search position. Read more about web design for your business. Want to clarify the most important mobile task? Discuss your website.
