Mobile Website Design: The Fixes That Matter Most, in Order

Key takeaways

• Fix what stops people first. A call button that fails, a form that fights the keyboard, or a pop-up that covers the page costs more than any visual polish.
• There is no single tap target number. W3C's AA level asks for 24 by 24 CSS pixels and its AAA level asks for 44. Apple lists a 44 by 44 point default on iOS with a 28 point minimum. Google's Material Design suggests 48 by 48dp.
• Aim for 44 or more on main controls. Keep 24 as the hard floor for smaller links.
• Google's Mobile-Friendly Test no longer exists. It and the Mobile Usability report were retired on 1 December 2023. Guides that still send you there are out of date.
• Your mobile page is the one Google reads. Google says it uses the mobile version of a site's content for indexing and ranking, so hiding text on phones hides it from search as well.
• Test on a real phone, then measure. Use PageSpeed Insights and the Core Web Vitals report for numbers, and your own thumb for everything else.

The short answer

Good mobile website design means a visitor can read, tap and finish their task with one thumb, on a slow connection, without zooming. Build one responsive site, since Google recommends that as the easiest pattern to implement and maintain. Then work through the list below from the top. If your budget or your afternoon runs out halfway, you will still have fixed the parts that lose enquiries.

The fixes, in order

The order is our judgement, based on how much of a visitor's task each problem blocks. Nothing here is a ranking factor list.

1. Make the main action work

Decide the one thing a phone visitor most wants. For a plumber, it is calling. For a studio, it may be a short enquiry. Make that action visible without hunting, and make your number a real tel: link so a tap starts the call. Then try it on your own phone. It sounds obvious, and it is the first check in our website audit checklist for that reason. Our guide to call to action examples covers the wording.

2. Remove sideways scrolling

If a page moves left and right under a thumb, something is wider than the screen. The usual causes are a fixed-width image, a table, a long unbroken word or an embedded widget. Wide comparison tables should scroll inside their own box and not push the whole page sideways. Set body text large enough to read without zooming. Lighthouse used to fail pages where 40% or more of the text was under 12px, and Chrome's docs say that audit was removed in Lighthouse 13, so nothing automatic may warn you now. Your eyes have to do this one.

3. Fix the form for thumbs

Forms are where mobile costs the most money, because the person has already decided to contact you.

• Ask for less. Each field is more typing with one thumb. Our contact page guide goes through what to keep.
• Trigger the right keyboard. MDN documents inputmode values such as tel for a phone keypad, email for a keyboard with @, and numeric for digits.
• Keep labels visible. A placeholder that vanishes while typing leaves people guessing what the field wanted.
• Set field text to 16px or more. Several developer write-ups report that Safari on iPhone zooms the page when a smaller field is tapped. We did not find this in Apple's own documents, so treat it as reported behaviour and test on an iPhone. Do not block zooming for the whole page to stop it, because people need zoom.
• Test the submit. Send a real enquiry from a phone, and check that it arrives.

4. Keep pop-ups out of the way

Google's guidance is to avoid covering the entire page, and to use banners that take up a small fraction of the screen. Its only stated exception is an interstitial that is legally required, such as an age gate, and even then it suggests overlaying the content. So a full-screen newsletter box on arrival is a poor trade on a small screen. Show an offer as a small banner, or after someone has read a while.

5. Size tap targets properly

This is where guides disagree, and they rarely say why. They quote different standards in different units:

So when one guide says 44 and another says 48, neither is wrong. They are quoting different makers. WCAG's 24 is the accessibility floor at AA. Apple and Google give platform guidance for designers. Here is the rule we would use on a marketing site:

• Main buttons, menu items and form controls: 44 pixels high or more, 48 if the design allows it.
• Footer links and small secondary links: at least 24, with clear space between them.
• Links inside a sentence: these are an exception in WCAG, so size the text well and do not stack them.

The tappable area can be larger than what you see. Material's example is a 24dp icon whose padding makes a 48dp target. So a small icon does not have to mean a small target, and you can keep a design delicate without making it hard to use.

6. Rewrite the first screen for a phone

On a phone, a desktop hero often becomes a large photo, a long headline, and a button below the fold. Cut until the visitor can see what you do, for whom, and what to do next, within the first screen or close to it. Our hero section guide goes deeper, and homepage design ideas covers what follows it.

7. Lighten images and scripts

Google's Core Web Vitals give clear targets, measured at the 75th percentile of visits, split by mobile and desktop: LCP within 2.5 seconds, INP of 200 milliseconds or less, and CLS of 0.1 or less. Because mobile is reported separately, a site can pass on desktop and fail on phones. Our website speed guide has the fixes, so we will not repeat them here.

Motion deserves its own mention. An effect that feels smooth on a laptop can drag on an older phone, so simplify or turn off heavy scroll effects at the phone breakpoint. If you build on Webflow, our Webflow Interactions guide shows how to do this per breakpoint.

8. Shorten the menu

A long desktop menu rarely survives on a phone. Put the few pages that matter most at the top level, and make the phone number or main action reachable from the menu as well. A hamburger icon is fine, as long as the items inside are well spaced and easy to read. A dropdown tree three levels deep is not much use to a thumb.

9. Keep content the same as desktop

Google says to make sure your mobile site contains the same content as your desktop site, and warns that it will not load content that needs a tap, swipe or typing to appear. So do not delete text on phones to make a page look shorter, and do not lazy load main content behind a button. Reorder, restyle and collapse with care instead. Check this before any redesign goes live.

How to test a mobile site in 2026

Plenty of pages still point to Google's Mobile-Friendly Test. Google's own blog notes that the test and the Mobile Usability report were retired on 1 December 2023. Use this routine instead:

Device mode is a good first pass, not a final test. It cannot tell you how a button feels under a thumb, or whether you can read the page in daylight.

What we measured on our own site

We ran a small check on four live amariq.com pages on 2 November 2026: the home page, the contact page, a service page and a blog post. Each loaded in a frame 390 pixels wide, and a script measured the page width and every button, form field and standalone link. Links inside sentences were left out, since WCAG treats those separately.

This is one simple script at one width. It does not replace a real phone. You can run the same idea on your site, or ask a developer to, in a few minutes, and the output gives you a list of controls to look at.

Do you need a separate mobile site or an app?

Usually not. Figma, Wix and others still answer the old "mobile URL vs desktop URL" question, because separate m. sites used to be common. Google recommends responsive design, and one set of URLs is simpler to keep correct. A web page also opens without an install, which suits a business people find through search. An app is a separate product, worth the cost only if people return often enough to keep it on their phone.

Which platform makes this easier?

Webflow, Framer, Wix, Squarespace, Shopify and WordPress can all produce good phone pages. The platform matters less than whether someone checked each page at phone width. Our website builder comparisons cover the wider decision, and we would not move platforms purely for mobile reasons.

How we help at Amariq

We design and test every page at phone width as part of the build, on whichever platform suits you. If an existing site loses enquiries on phones, we can review it and give you a ranked list of fixes, or carry out the fixes as part of a conversion-focused redesign. Work is priced from scope, never by the hour. See also web design and UI/UX.

Frequently asked questions

What is mobile website design?

It is planning a website so people can read it and use it comfortably on a phone. In practice that usually means one responsive site, a clear main action, forms that suit a thumb, and fast loading.

What size should buttons be on mobile?

Aim for 44 pixels or more on main controls. W3C's AA floor is 24 by 24 CSS pixels and its AAA level is 44. Apple's iOS default is 44 by 44 points, and Material Design suggests 48 by 48dp.

What is the difference between mobile-first and responsive design?

Responsive describes the result: one site whose layout adapts to the screen. Mobile-first describes the working order: you start with the phone layout and add to it for larger screens. You can have both.

Is the Google Mobile-Friendly Test still available?

No. Google retired it, along with the Mobile Usability report, on 1 December 2023. Test on real phones, use browser device mode, then check PageSpeed Insights and the Core Web Vitals report.

Does mobile design affect SEO?

Yes. Google says it uses the mobile version of a site's content for indexing and ranking. If a section exists only on desktop, assume Google may not count it. Mobile and desktop Core Web Vitals are also measured separately.

What screen width should I design for?

There is no single best width, as phones vary. Check a narrow phone, around 360 to 390 pixels wide, then a larger one and a tablet. Let the layout flow between them and do not design for one device.

Are hamburger menus bad?

Not on a phone, where space is short. The risk is hiding your main action inside one. Keep the call or enquiry button outside the menu wherever you can.

How do I stop my site zooming when someone taps a form?

Set the field text to 16px or larger and test on an iPhone. Avoid viewport settings that block zoom for everyone, since people with low vision rely on it.