Mobile-friendly website: what does your site need to get right?

The foundation is responsive design: one site that adapts its layout to the screen width, rather than a separate mobile version. Columns stack, menus collapse and images scale along. Technically it starts with the viewport setting in the page; without it, the phone shows a zoomed-out desktop site nobody wants to read.

On top of that come the details that separate workable from pleasant: text large enough to read without zooming, buttons with enough space around them, forms that trigger the right keyboard per field (digits for a phone number) and no content wider than the screen forcing horizontal scrolling.

Google has used mobile-first indexing for years: the crawler primarily views and assesses the mobile version of your pages. Content hidden or omitted on mobile therefore does not count. A site that looks complete on desktop but stripped-down on a phone competes in the search results with its weakest version.

Speed also weighs heavier on mobile, because connections are less stable and devices slower. The Core Web Vitals are measured on real visitors, and on most sites more of them are on phones than on desktops. Mobile-friendliness and speed are two sides of the same job.

The problems scans find most often are rarely spectacular. Tap targets placed too close together, so you hit the wrong one: a navigation link above a button, two icons touching. Font sizes below 16 pixels that become unreadable on a small screen. Tables or wide images that make the page overflow. Pop-ups that occupy a corner on desktop but block the entire screen on mobile without a reachable close button.

For tap targets there is a concrete lower bound: the WCAG 2.2 guidelines require at least 24 by 24 CSS pixels for a touch target, and in practice designers aim for roughly 44 to 48 pixels for comfortable thumb use. This is where mobile and accessibility meet: what is hard to hit with a thumb is even harder with a tremor or limited vision.

The quickest first check is your own phone, not your browser's developer view. Open the site on a real device, preferably an older model, and try the three most important tasks: finding something through the menu, filling in a form, reading a page. Wherever you zoom, misclick or wait, so does your visitor.

For a systematic check, WebYes scans your site within the mobile pillar on the measurable points: viewport configuration, readable font sizes, tap targets and content overflowing the screen. The findings are listed per page in the report, so you can improve deliberately instead of guessing.