Mobile responsive
Why it matters
A large share of web visits come from phones, and many B2B visitors first see a site on one, for example from an email or a social post. A page that is hard to read or a form that is hard to fill in loses the visitor at the point of conversion. Google also indexes the mobile version of a page first, so a weak mobile page can drag down search visibility as well. Mobile pages must also load quickly on slower connections, which ties into page speed.
How to apply it
- Design the phone view first, then add to it for larger screens.
- Check on a real phone as well as in a browser simulator. Thumbs and glare show problems simulators miss.
- Make buttons and links easy to tap. A target of about 44 to 48 pixels is a common guide.
- Keep body text readable without zooming, and keep line lengths short.
- Cut forms to the fields you need now. Ask for the rest later.
- Test the whole path, from landing to submitting the form, on a phone.
What it is
A mobile responsive site has a single set of pages whose layout adapts. Columns stack, menus collapse into an icon, images scale and text sizes change as the screen narrows. This is done with flexible grids and rules in the page's stylesheet, called media queries, which apply different styling at different widths. Website builders handle most of this, usually through breakpoints where the design is edited for desktop, tablet and phone.
It differs from a separate mobile site on its own address, which means keeping two sites in step. It also differs from simply shrinking the desktop page, which leaves text too small and buttons too close together.
Common mistakes
Hiding important content on mobile instead of redesigning it. Using heavy images that load slowly. Pop-ups that cannot be closed on a small screen. Pages built with AI tools that look right on desktop and are never opened on a phone.
