Mobile-friendliness is no longer optional. Google now uses Mobile-First Indexing, meaning it looks at the mobile version of your site first to determine where you should rank in search results. If your site works well on a desktop but is broken on a phone, your search rankings will suffer.
Follow these core principles to ensure your site is fully optimised for mobile devices.
1. Implement Responsive Web Design
“Responsive design” means your website automatically adjusts its layout to fit the screen size of the device it is being viewed on, whether that is a massive desktop monitor or a small smartphone.
- Use a Responsive Grid: Instead of fixing elements in place using pixels (e.g., “width: 900px”), use relative units like percentages (e.g., “width: 100%”). This allows content to flow naturally into narrower columns on mobile screens.
- Stack Your Content: On a desktop, you might have three columns side-by-side. On a mobile, these should “stack” vertically so the user can scroll down easily without zooming out.
2. Set the Viewport Meta Tag
This is a small piece of code that is absolutely critical. Without it, mobile browsers will assume your page is meant for a desktop and will try to shrink the whole page down to fit the screen, making the text unreadably small.
- The Action: Ensure the following line of code is in the <head> section of your website’s HTML: <meta name=”viewport” content=”width=device-width, initial-scale=1″>
- What it does: It tells the browser to set the width of the page to match the screen-width of the device, creating a native, readable experience immediately.
3. Design for “Thumb-Friendly” Navigation
Mobile users navigate with their thumbs, which are much less precise than a mouse cursor. You must design your buttons and links to accommodate this “fat finger” problem.
- Size Matters: Google recommends that touch targets (buttons/links) be at least 48×48 pixels.
- Spacing: Ensure there is adequate space between links. If a user tries to tap “Menu” but accidentally hits “Search” because they are too close, it creates a frustrating user experience.
- Avoid Hover Effects: You cannot “hover” a mouse on a touchscreen. Ensure all menus work with a simple tap.
Expert Insight: Google’s John Mueller has emphasised the importance of usability over just “fitting” on the screen. In a Webmaster Central hangout, he noted:
“It’s not just about ‘does it render on a mobile phone’, but ‘is it actually usable on a mobile phone?’… If users have to pinch-to-zoom, or if the links are too close together, that’s a negative signal.”
4. Ensure Font Readability
Users should never have to pinch-to-zoom just to read your text.Â
- Base Font Size: A good standard is 16px for body text. Anything smaller is difficult to read on a handheld screen in bright daylight.Â
- Contrast: Ensure high contrast between the text and background (e.g., black text on a white background). Mobile screens are often used outdoors where glare can make low-contrast text invisible.
5. Avoid Intrusive Interstitials (Pop-ups)
Google penalises sites that show giant pop-ups that cover the main content immediately after a user navigates to a page from search results.
- The Rule: If you must use a pop-up (for example, for cookie consent or age verification), it should be small and not obscure the main content.
- The Risk: Large “Sign up for our Newsletter” pop-ups that cover the whole screen are frustrating to close on mobile and can hurt your rankings.
Expert Insight: Google officially updated their algorithm to penalise intrusive interstitials. Their official search blog states:
“Pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as high.”
Salesforce
