How to make your website mobile friendly

What "mobile friendly" actually means

A mobile friendly website is one that works well on a smartphone or tablet without the user having to pinch, zoom, or scroll sideways to see content. Text is readable without tapping to zoom. Buttons and links are large enough to tap with a finger. Forms are easy to fill out. The entire experience feels natural on a small screen.

This is different from having a mobile app or a separate mobile site. Modern best practice is to build a single responsive website that adapts to any screen size. Google calls this approach "responsive web design," and it is the method they recommend.

Since Google switched to mobile-first indexing in 2019, the mobile version of your site is the primary version that Google uses to determine your search rankings. If your desktop site works fine but your mobile site is broken, your rankings will suffer.

Use a responsive design

A responsive design uses CSS to adjust the layout of your pages based on the width of the screen. The same HTML content is served to every device, but the styling changes to make it look right on each one. On a phone, a three-column layout might stack into a single column. On a tablet, it might use two columns.

Most modern website builders and CMS platforms use responsive design by default. Squarespace, Wix, Shopify, WordPress with a current theme all handle responsiveness automatically. If you are using a custom-built site, your developer should have built it with a responsive framework or a CSS grid system.

The simplest way to check if your site is responsive is to open it in a browser and resize the window. If the layout changes and rearranges itself to fit the narrower width, your site is responsive. If it stays the same and you get a horizontal scroll bar, it is not.

Test on real devices

Browser developer tools let you simulate mobile screen sizes, but nothing beats testing on an actual phone. Pick up your own phone, open your site, and navigate through it. Do the same with a tablet if you have access to one.

Things to look for: can you tap all the buttons without accidentally tapping the wrong one? Does the text overflow off the screen? Do images look stretched or squashed? Can you fill out a contact form without having to zoom in? Does the menu work with a tap instead of a hover?

If you do not have multiple devices to test on, Google's Mobile-Friendly Test tool (search for it in Google Search Console) will analyse your page and tell you if it passes Google's mobile friendliness criteria. It also shows you a screenshot of how your page looks on mobile.

Fix touch target sizes

A touch target is any interactive element on your page that someone taps with their finger: buttons, links, form fields, menu items. On desktop, a mouse cursor can accurately click a tiny link. On mobile, fingers are much less precise.

Google recommends that touch targets be at least 48 by 48 pixels, with adequate spacing between them. If your navigation links are crammed too close together, or if your buttons are too small, users will accidentally tap the wrong thing, get frustrated, and leave.

Audit your site for links and buttons that look fine on desktop but are too small on mobile. Pay special attention to the navigation menu, footer links, and call-to-action buttons. If you need to increase the size or add more padding, do it in your site's CSS.

Optimise for mobile page speed

Mobile connections are often slower and less reliable than desktop connections. A page that loads in two seconds on a fast office WiFi might take six seconds on a 4G connection in a busy area. Mobile users are also less patient. Studies show that the average mobile user will wait about three seconds for a page to load before moving on.

The most impactful changes you can make for mobile speed are the same ones that help desktop speed: compress images, minimise code, use a CDN, and enable browser caching. But there are a few mobile-specific considerations as well.

One of them is eliminating render-blocking resources. These are CSS and JavaScript files that the browser has to download and process before it can display anything on the screen. On a slow mobile connection, render-blocking resources can add several seconds to your load time. Tools like PageSpeed Insights will tell you exactly which resources are blocking the render.

Another is reducing the size of your above-the-fold content. The less data the browser has to download before it can show the user something meaningful, the faster the page feels. Prioritise the content that appears at the top of the page and defer everything else.

Make navigation work on small screens

Desktop navigation menus that display all options horizontally across the top of the page do not work on mobile. The screen is simply not wide enough.

The most common solution is a hamburger menu: a three-line icon that expands into a full-screen or sliding navigation panel when tapped. This saves space while keeping all your navigation options accessible. It is familiar to users and works well on any screen size.

If your site has a multi-level navigation structure with submenus, make sure those submenus are tappable on mobile. A submenu that only appears when a user hovers over a link will not work on a touchscreen. Use a tap-to-expand pattern instead.

Avoid pop-ups and interstitials

Pop-ups that take over the screen are even more disruptive on mobile than on desktop. Google explicitly penalises sites that use intrusive interstitials on mobile, especially ones that cover the main content or require the user to dismiss them before they can read the page.

This includes full-screen email signup forms, large cookie consent banners that block the content, and app install prompts. If you must use a pop-up, make sure it is dismissable with a single tap and that it does not cover more than a small portion of the screen.

A better approach for mobile is to embed your email signup form within the content itself or use a small sticky bar at the top or bottom of the screen. These patterns get the same result without annoying users or hurting your Google rankings.

Set the viewport meta tag

The viewport meta tag tells mobile browsers how to scale your page. Without it, the browser will assume your page is designed for a desktop screen and will try to shrink it down, resulting in tiny, unreadable text.

If you use a modern CMS or website builder, the viewport tag is almost certainly already set. If you have a custom site or an older template, check the head section of your HTML for this line:

<meta name="viewport" content="width=device-width, initial-scale=1">

If it is not there, add it. Without it, your site will never look right on mobile regardless of anything else you do.

Use readable font sizes

Text that looks perfectly readable on a 24-inch monitor can be uncomfortably small on a phone held at arm's length. A good rule of thumb for mobile is to use a minimum font size of 16 pixels for body text.

Avoid using viewport units (such as vw) for font sizes unless you have carefully tested them. A heading set at 5vw might look great on a 375-pixel phone but enormous on a 414-pixel phone. Use clamp() or media queries to set font sizes that work across a range of screen widths.

Line height matters too. On mobile, text with tight line spacing is harder to read. A line height of 1.5 to 1.6 improves readability significantly on small screens. And keep your line lengths reasonable: aim for roughly 40 to 60 characters per line for body text.