Appearance on a smartphone

What we check

We open the home page in a browser that imitates a smartphone with a width of 375 pixels and a touch screen. Then we measure:

• Sideways scrolling: if the page is more than 10 pixels wider than the screen, this is a serious defect.
• Small text: if more than a quarter of the visible text is smaller than 12 pixels, there is a warning.
• Small buttons: if more than five links and buttons are smaller than 24 × 24 pixels, there is a warning. Links in running text, text fields, disabled buttons and skip links that only appear on keyboard focus do not count.

In addition we show in the report the rating from Google Lighthouse for font sizes and buttons, as well as screenshots in smartphone, tablet and desktop view.

Why it matters

For most websites more than half of the visitors come from a smartphone, for offers that people use on the move often considerably more. Anyone looking for a phone number, opening hours, a timetable or a product on the move gives up quickly if the page does not play along.

• Sideways scrolling looks broken. Usually a single element that is too wide, such as an image, a table or an embedded video, pushes the whole page over the edge. The navigation shifts, and visitors no longer find the content.
• Small text forces zooming. Many do not read on at all then.
• Small buttons are hard to hit with a finger. You tap next to them, land on the wrong page and get annoyed.

Google rates websites by their smartphone view. Problems there affect the position in the search results.

How to fix it

Sideways scrolling

Find the element that sticks out over the edge (see "How to check it yourself"). Common causes and solutions:

• Images with a fixed width: max-width: 100%; height: auto; in the CSS.
• Tables: put them in a container with overflow-x: auto so that only the table can be swiped.
• Embedded videos and maps with a fixed width in pixels: set the width to 100 %.
• Long words or addresses such as email addresses: overflow-wrap: anywhere.

Small text

Set the base font to at least 16 pixels. In WordPress themes and page builders there is usually a global typography setting for this, often separate for desktop and smartphone.

Small buttons

Links and buttons should be at least 24 × 24 pixels, better 44 × 44. This often concerns icons in the footer, social media symbols and text links that are close together. Increase the inner spacing (padding), then the area grows without the look changing much.

Website builders

Wix and Squarespace have a smartphone editor of their own. Check every page there, because elements that were moved in the desktop view sometimes land in an unfavourable place on the smartphone.

How to check it yourself

Open the developer tools (F12) and click the smartphone icon ("device toolbar"). Choose a narrow device such as the iPhone SE. If the page can be swiped sideways, something is too wide. In the console this command helps to find the element:

[...document.querySelectorAll('*')].filter(e => e.getBoundingClientRect().right > innerWidth)

Frequently asked questions

Everything looks good on my smartphone. Why does the check report something?

We measure on a narrow smartphone with a width of 375 pixels, such as an iPhone SE or mini. Larger smartphones show more room. Many visitors have smaller devices or a larger font set, though.

How large should the text be on a smartphone?

At least 16 pixels for body text. Smaller type is fine for footnotes, not for the text people are meant to read.