Open your website on a phone and try to complete the task you most want a customer to finish. Can you find the right service, understand the offer and make an enquiry without zooming, fighting the menu or losing information?
A website can fit a narrow screen and still be awkward to use. A useful mobile audit checks the whole journey, including content, navigation, forms, loading and accessibility.
What mobile-first indexing means for your content
Google primarily uses the mobile version of a site’s content for indexing and ranking. Mobile-first indexing is established practice, rather than a future experiment. Google’s current mobile-first indexing guidance recommends responsive design and explains the importance of equivalent content across devices.
Your layout can change on a phone. Your main service information, meaningful headings, images, metadata and relevant structured data should remain available. Do not remove the explanation customers need simply to make a page shorter. An accordion can organise content, but important content should not depend on a visitor clicking or swiping before it loads.
Compare a main service page side by side on desktop and mobile. Check that the mobile version still explains what you do, who it is for, where you work and how to contact you. Hiding those details may make the layout look cleaner while making the page less useful.
Start with a small set of realistic journeys
Choose tasks that reflect the business. For a builder, that might be checking renovation experience and requesting a consultation. For a retailer, it might be finding a product, selecting a size, checking delivery and reaching checkout.
Test the homepage, an important service or category page, a detail page and the contact or checkout journey. Try several widths, including 360, 390 and 430 pixels, and rotate a real phone. Browser tools are useful for repeatable checks, but a real device can reveal keyboard, touch and loading problems that a desktop preview misses.
Check the mobile header and navigation
- Make the menu obvious. A recognisable control with an accessible name should open and close reliably. Check that it is comfortable to tap without hitting a nearby phone or account link.
- Keep important choices easy to find. Clear service names are more useful than vague labels. Do not bury contact details under several layers of navigation.
- Test the open state. Long menus should remain usable on short screens. Check scrolling, submenu controls, the close button and what happens after following a link.
- Allow for keyboard use. The menu needs a visible focus indicator and a sensible focus order. Opening an overlay should not leave the user navigating invisible links behind it.
- Check sticky headers. They should not cover headings, form errors or most of the screen when the keyboard opens.
Branding still matters, but a large logo should not push the menu off-screen or leave very little room for the page. Look for balanced spacing at narrow widths rather than fixing one screenshot only.
Make enquiries easy to complete
A mobile enquiry often happens between other tasks. Ask for information you need to respond, and leave detailed project questionnaires for later if they are not essential to the first conversation.
Use visible labels rather than relying on placeholder text that disappears as someone types. Choose suitable input types for email and telephone fields, allow helpful autofill, and make required information clear. W3C’s accessible forms guidance covers labels, instructions, validation and useful feedback.
Deliberately make a mistake during testing. Does the form explain what needs fixing? Does it preserve the information already entered? Can you reach the problem field without hunting through the page? Then confirm that a successful submission displays a clear message and reaches the intended inbox.
Check phone and email links as well. A prominent “Call” button should dial the right number. A map, booking tool or file upload should work on a phone, not just in the developer’s desktop browser. Plan any live test enquiry so it is clearly labelled and does not create misleading business or analytics records.
Readability and accessible controls
Read a few paragraphs at the default zoom. Text should be comfortable to read, with useful headings, reasonable line spacing and contrast against its background. Avoid long centred paragraphs and text placed over a busy photograph.
Buttons need descriptive wording and enough space between them. “Request a quote” gives a clearer expectation than several identical “Learn more” buttons. Do not rely on colour alone to identify an error or selected option.
Try zooming the page and increasing text size. Important information and controls should remain available. Also check captions and alternative text where images convey information. These checks help reveal problems, but they are not a substitute for a full accessibility assessment when one is needed.
Look for common responsive layout faults
| Symptom | What to investigate |
|---|---|
| The whole page scrolls sideways | A fixed-width section, oversized image, table, embedded video or long unbroken text. |
| Cards feel cramped | A desktop column layout that has not stacked, or inconsistent side gutters. |
| A heading overlaps its image | Fixed heights, absolute positioning or text that becomes longer at narrow widths. |
| A useful detail disappears | Content hidden at a breakpoint instead of being rearranged. |
| A button is covered | Sticky chat, cookie, header or promotional elements competing for the same space. |
| Tables are unreadable | Columns squeezed too tightly; use a clearly labelled horizontal scroll area or a better small-screen presentation. |
Check a little above and below each main breakpoint. A layout that works at exactly 390 pixels may still fail when a longer menu label, browser setting or different device changes the available space.
Keep images and loading under control
Mobile users should not have to download an enormous desktop photograph to see a small card. Use responsive image sizes and appropriate compression, reserve space to reduce layout movement, and check that crops preserve important product or project details.
Test on a slower connection as well as Wi-Fi. Notice whether the page responds while other resources load. Heavy video backgrounds, sliders and third-party widgets can add cost without helping the enquiry. Use PageSpeed Insights alongside real-device checks; a performance score alone does not tell you whether a form is usable.
Fix the layout or redesign the website?
Targeted improvements are often enough when the content and underlying structure are sound. Examples include correcting a menu’s spacing, stacking a few sections, resizing images and simplifying an enquiry form. Retest shared templates so a local fix does not create problems elsewhere.
A redesign becomes more sensible when the same problems run through the whole site: an inflexible layout, difficult editing, confusing navigation, unsupported software or a buying journey that no longer matches the business. Compare the cost and durability of repeated repairs with rebuilding the structure properly.
A1’s web design service starts with what customers need to do on your site. If an existing website needs broader changes, our website redesign service can help assess which useful content and features to keep and which obstacles to remove.