Website mobile optimization

What mobile optimization covers

Mobile and search

Google's documentation states that it uses the mobile version of a site's content, crawled with a smartphone agent, for indexing and ranking. If information is hidden or missing on mobile, or titles and descriptions differ between versions, search engines may not see what you intended. Keeping mobile and desktop content equivalent, while adapting layout, avoids this.

Responsive design, where one set of pages adapts to every screen, is the approach Google recommends and the simplest to maintain.

Tap targets and touch

• Minimum size

  WCAG 2.2 asks for targets of at least 24 by 24 CSS pixels, or enough spacing around smaller ones.

• Spacing

  Links close together lead to mis-taps, especially in menus and footers.

• Phone numbers

  Make them tappable so visitors can call directly.

• Hover effects

  Information shown only on hover is unavailable on touch screens.

Mobile-friendly forms

How mobile optimization is approached

1. 01

   Review

   Key pages and journeys tested on real phones.

   Output: Issue list

2. 02

   Prioritise

   Problems ranked by how they affect enquiries and sales.

   Output: Action plan

3. 03

   Fix

   Layout, navigation, forms and speed improved.

   Output: Updated templates

4. 04

   Retest

   Checked on several devices and screen sizes.

   Output: Verified mobile experience

Why real devices matter

Shrinking a desktop browser window shows layout changes, but not how a page feels on a phone: touch accuracy, the on-screen keyboard covering form fields, slower processors and variable connections. Testing on at least one recent phone and one older or mid-range model reveals problems that desktop previews miss.

Navigation on small screens

Desktop menus with many items rarely work well when collapsed into a single mobile menu. Visitors on phones often want a few things quickly: services, prices, contact details, booking. Putting those within easy reach, for example a call or enquiry button in the header and a short, well-ordered menu, reduces the effort needed to act. Long dropdown menus nested several levels deep are particularly hard to use with a thumb.

Checking analytics for what mobile visitors look at most can guide which items deserve prominence.

Pop-ups and banners

Cookie notices, newsletter pop-ups and promotional banners take up much more of a phone screen than a desktop one. Several at once can hide the content visitors came for. Keeping necessary notices compact, delaying or removing optional pop-ups on mobile and making sure every overlay is easy to close improves the experience considerably.

Images on phones

Large images designed for wide screens may load slowly and crop awkwardly on phones. Serving appropriately sized images and checking how key images crop at narrow widths keeps pages fast and meaningful, so a product or team photo does not lose its subject on a small screen.

Orientation and zoom

Some visitors hold phones sideways or zoom in to read. Pages should work in both orientations and allow zooming rather than blocking it, which matters especially for people with low vision.