How Can I Tell If My Website Is Mobile Friendly?
Check mobile friendliness by completing real visitor tasks on phones, then inspect layout, navigation, forms, accessibility and loading behaviour.
Part of our guide: Mobile-Friendly Websites: The Complete Guide for Businesses
The best way to tell whether a website is mobile friendly is to complete realistic tasks on actual phones and at varied narrow widths. Check whether people can understand the offer, navigate, read, use controls and submit forms without zooming, horizontal scrolling or accidental taps.
Start with priority tasks
List what mobile visitors need to do: find a service, check a location, call, request a quotation or book. Test each journey from its likely landing page.
Use the complete mobile-friendly website guide as the wider standard.
Thinking about your own rebuild?
Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.
Check content width
No ordinary page should require horizontal scrolling. Inspect images, tables, code, embeds and long words. Rotate the phone and test continuous widths in browser developer tools.
web.dev’s responsive design guidance recommends a viewport setting and flexible content that stays within the available width.
Read without forced zoom
Body text, labels and error messages should be comfortably readable. Browser zoom must remain available. Check contrast in bright and dim conditions.
Enlarge text and confirm that headings wrap, cards grow and controls remain usable.
Test the menu
Open and close navigation with touch and keyboard. Check focus order, submenu access and whether content behind the menu behaves correctly.
Important destinations should use familiar labels. Contact details must remain discoverable.
Test every form
Enter valid and invalid values, use autofill and open the on-screen keyboard. Confirm that labels, errors and the submit control remain visible.
Submit a real test and verify delivery. The visible layout is only one part of the journey.
Inspect buttons and links
Targets need enough space for touch. Nearby actions should not be easy to activate accidentally. Labels must describe destinations.
Check telephone, email, map and booking links. Avoid interactions that require hover.
Compare mobile and desktop content
Important information, metadata and structured data should remain equivalent. Google warns against offering less primary content on mobile in its mobile-first indexing guidance.
Collapsing content into accessible sections can be appropriate; removing it merely to shorten the page is not.
Review images and video
Images should fit, load efficiently and retain meaningful subjects after cropping. Video controls must remain usable and captions available where needed.
Avoid autoplay media that consumes data or disrupts the visitor. Reserve dimensions to prevent layout movement.
Measure performance
Test representative pages with PageSpeed Insights and browser tools, then review real-user data where available. Focus on slow resources and unstable interactions rather than one score.
The website speed guide explains how to investigate performance in more detail.
Check accessibility
Use keyboard access, screen-reader spot checks, zoom and large text. Confirm visible focus, labelled controls and clear errors.
W3C notes that WCAG applies to mobile web content in its mobile accessibility overview.
Use a repeatable checklist
Record device, browser, page, task, result and evidence. Prioritise blockers to contact, purchase or essential information, then retest after fixes.
Automated tools can find overflow and contrast issues, but human task testing reveals unclear language and awkward interactions.
Start with the essential journeys
List the tasks that matter most to customers and the business. These might include finding a service, checking opening hours, requesting a quote, booking an appointment or completing a purchase. Test each task from its likely entry page rather than always beginning on the homepage.
Record whether the task can be completed, how much effort it requires and where hesitation occurs. A page can fit within the screen and still be unfriendly if the menu is confusing, the form loses data or the next step is hidden. Use the same realistic test details each time so results can be compared after changes.
Check several viewport sizes and orientations
Drag a desktop browser window narrower for a quick first pass, then use its responsive design mode to examine common widths. Look for sudden layout changes at breakpoints, not only the exact device presets. Content should adapt smoothly between the named sizes.
Check portrait and landscape orientations. Pay particular attention to fixed headers, cookie controls, chat launchers and video players because they can occupy a large proportion of a short landscape viewport. Confirm that rotating the device does not lose entered form data or trap the page in an unusable state.
Browser emulation is useful but incomplete. Physical devices behave differently around touch, the virtual keyboard, browser chrome, safe areas and processing speed. Test the most valuable journey on at least one real phone from each major operating-system family available to the team.
Inspect text, zoom and reflow
Read a complete page without pinching to zoom. Body copy, captions, error messages and footer links all need to remain legible. Increase the browser’s text size and zoom to see whether containers grow with their content. Watch for clipped headings, overlapping buttons and labels that disappear.
The page should reflow instead of forcing horizontal scrolling for ordinary content. Deliberately wide material, such as a data table or code example, needs a clearly bounded alternative. Verify that essential information is not presented only inside an image, where it cannot adapt to user preferences.
Test touch and keyboard interaction
Try every navigation item and important action with a thumb. Small targets, tightly packed links and hover-dependent controls are warning signs. Check that a tap produces immediate, visible feedback and does not accidentally trigger a neighbouring action.
Then connect a keyboard or use desktop keyboard testing at the same narrow width. The focus indicator should remain visible, the focus order should follow the visual reading order and menus or dialogs should open and close predictably. This also catches interaction problems that affect switch-device and screen-reader users.
Complete every important form
Do not stop after confirming that form fields appear. Enter realistic details, make a deliberate mistake, correct it and submit. Labels should remain available while typing, error messages should identify the field and previously entered information should be preserved.
On a phone, confirm that the keyboard does not hide the active field or submit button. Appropriate keyboards should appear for email addresses, telephone numbers and numeric information. Autocomplete should help rather than placing information in the wrong field.
Follow the submission beyond the browser. Check that the confirmation page is useful, the acknowledgement arrives, the business receives the message and any attachment survives. A visually mobile-friendly form that does not deliver the enquiry is still a failed journey.
Review speed under realistic conditions
Test with a fresh browser session and a constrained network profile. Large images, custom fonts, video, maps and third-party widgets may be invisible as problems on a fast office connection. Observe when useful content becomes available and whether the page moves while loading.
Automated performance reports can identify likely causes, but a score is not a pass or fail certificate. Relate each finding to the visitor’s task. A delayed decorative image is less serious than a contact button that cannot be used until a large script completes.
Compare content across mobile and desktop
Google primarily uses the mobile version of content for indexing. Confirm that important headings, service information, links, structured data and image descriptions remain available on the mobile layout. Responsive presentation may rearrange content, but it should not silently remove the information needed by customers or search systems.
Check page titles and descriptions in the source as well as visible copy. Verify canonical links, language settings and robots instructions after any platform migration. These technical checks do not replace usability testing, but they prevent a mobile presentation decision from becoming a search visibility problem.
Include third-party and exceptional states
Embedded booking systems, payment services, maps and consent tools are part of the customer experience even if another supplier provides them. Test their narrow-screen behaviour and ask the supplier for a remedy if their interface blocks completion.
Also test empty results, validation failures, expired links, unavailable services and slow responses. Error pages should explain what happened and provide a safe way forward. A website often appears robust on its ideal path while failing as soon as real life interrupts it.
Turn findings into a repeatable audit
For every issue, record the page, device or viewport, steps to reproduce, expected result, actual result and a screenshot where useful. Rank problems by their effect on task completion, accessibility and business value. Fix blockers before cosmetic inconsistencies.
Repeat the audit after meaningful content, design or integration changes. A short release checklist covering the main navigation, one key page and every critical form is more valuable than an extensive review performed only once every few years.
Frequently asked questions
Is resizing a desktop browser enough?
No. It is useful for layout checks, but real phones reveal touch, keyboard, browser chrome and performance issues.
Should a mobile page look identical?
No. Presentation can adapt, but content and functionality should remain equivalent where users need them.
What should I test first?
Test high-value landing pages, navigation and contact journeys on the devices your audience commonly uses.
Test tasks on real phones
A mobile-friendly website helps people complete tasks across varied conditions. Combine flexible layout checks with real-device, accessibility and delivery testing.
Afterworks includes that testing throughout its website rebuild process.
