How to Make a Website Mobile-Friendly

Pick up your own phone and visit your website as a stranger would. Can you read the text without pinching? Can you tap the menu without hitting the wrong link? Does the page load before your patience runs out? For many businesses, most visitors arrive on a phone, so a mobile friendly website is not an optional extra. It is the main version.

This guide takes you through the practical steps, from basic settings to testing. Some steps are for developers, but you can use the checklist to review any site or brief a web designer.

What “mobile-friendly” actually means

A mobile-friendly site is one that works well on small touchscreens. In practice:

• Content fits the screen with no sideways scrolling
• Text is readable without zooming
• Buttons and links are easy to tap
• Pages load quickly on mobile connections
• Navigation is simple
• Forms are easy to complete
• Nothing important is hidden or broken on small screens

Google uses the mobile version of your pages for indexing, so a poor mobile experience can affect search visibility as well as customer experience.

Step 1: Use a responsive design

Responsive design means the layout adapts to the screen size, using a flexible grid, flexible images and CSS media queries. It is the standard approach, and most modern website builders and themes support it.

If your site was built several years ago, check whether it is truly responsive or whether it simply shrinks a desktop layout. If the latter, you may need a redesign or a theme update.

Mobile first

When you design or rebuild, start with the small screen. That forces you to prioritise: what is the single most important information? Then add enhancements for tablets and desktops. It’s much easier to expand a clean mobile design than to squeeze a crowded desktop one.

Step 2: Set the viewport

Without a viewport setting, phones may display your page at desktop width and shrink it. The standard fix is a meta tag in the page head:

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

Most modern themes include it. If you are using a builder, check that it hasn’t been removed. Avoid disabling user zoom, because that harms accessibility.

Step 3: Make text readable

• Use a base font size of around 16 pixels or larger for body text
• Keep line lengths short enough to read comfortably on a narrow screen
• Use sufficient line spacing, roughly 1.4 to 1.6 times the font size
• Choose fonts with clear letterforms
• Ensure strong contrast between text and background, particularly outdoors in bright light

Avoid text that is baked into images. It doesn’t scale, can’t be read by screen readers and often becomes tiny on mobile.

Step 4: Design for fingers, not mice

Fingers are less precise than cursors. Make tap targets generous.

• Buttons and links should be large enough to tap comfortably. Common guidance suggests targets of around 44 by 44 pixels or more, and WCAG 2.2 sets a minimum target size
• Leave space between tappable items so people don’t hit the wrong one
• Put key actions where thumbs can reach them, such as a visible call button
• Don’t rely on hover effects, since phones have no hover
• Use phone links such as tel: so people can call with one tap

Step 5: Simplify navigation

• Use a clear menu button, often the familiar “hamburger” icon, labelled if possible
• Keep the number of top-level items small
• Make sure submenus can be opened by tapping, and closed again
• Put contact details and the main call to action within easy reach
• Include a search box only if your content justifies it
• Keep the logo linked to the homepage

Test by asking someone unfamiliar with the site to find your opening hours or a particular service on their phone. Watch where they hesitate.

Step 6: Optimise images and media

Large images are the most common cause of slow mobile pages.

• Resize images to the dimensions they will be shown at, not larger
• Compress them, and use modern formats where supported
• Use responsive images (the srcset attribute) so phones download smaller versions
• Lazy-load images below the first screen
• Avoid autoplay video with sound, and consider whether background video is worth the data
• Use descriptive alt text

Step 7: Speed up the page

Phone users may be on slower connections, so performance is critical. Google’s Core Web Vitals measure loading, interactivity and visual stability, and PageSpeed Insights reports them for your pages.

Practical improvements include:

1. Reduce the number of scripts, plugins and third-party widgets
2. Minify CSS and JavaScript
3. Enable caching and compression
4. Use a reliable host
5. Use a content delivery network if your audience is spread out
6. Limit font files and weights
7. Avoid layout shifts by setting width and height for images and embeds

Test on a mid-range phone with a normal mobile connection. Many problems only show up there.

Step 8: Make forms easy

Forms are where enquiries are won or lost.

• Ask for the minimum information
• Use the correct input types (email, phone, number) so the right keyboard appears
• Label fields clearly, with labels visible above fields rather than relying on placeholder text
• Make error messages specific and visible
• Enable autofill where appropriate
• Make the submit button large and clearly labelled
• Consider a click-to-call or messaging option as an alternative to a form

Step 9: Avoid intrusive pop-ups

Pop-ups that cover the page on mobile frustrate users, and Google has guidance about intrusive interstitials. Cookie banners are necessary where the law requires them, but design them to take up as little space as possible and make it easy to choose. Keep marketing pop-ups out of the way, or delay them until people have had a chance to read.

Step 10: Check layout and content parity

Make sure the mobile version contains the same important content as the desktop version. Hiding content on mobile can affect both users and search. Reflow tables, using scrolling containers or stacked layouts, since wide tables are painful on small screens. Test embedded maps, calendars and booking widgets.

Step 11: Test properly

Quick checks

• Open your site on a real phone, ideally two different devices
• Rotate the screen
• Use the browser’s developer tools to simulate different screen sizes
• Run Google PageSpeed Insights or Lighthouse
• Try tapping every button and link on key pages
• Complete a form and a purchase or booking, if you have them

Realistic conditions

Try on mobile data rather than office Wi-Fi, in bright light and one-handed. Ask a few customers or colleagues to try key tasks and watch what happens.

Common mobile problems and fixes

Problem	Likely cause	Fix
Sideways scrolling	Fixed-width elements or oversized images	Use flexible widths and max-width settings
Tiny text	No viewport tag or small base size	Add viewport, increase font size
Buttons mis-tapped	Targets too small or too close	Enlarge and space them
Slow loading	Heavy images and scripts	Compress, lazy-load, remove extras
Menu won’t open	JavaScript conflict	Test, update or replace the theme or plugin
Layout jumps	Missing image dimensions or late-loading ads	Set dimensions, reserve space

Keep it that way

Mobile-friendliness isn’t a one-off job. Each new page, plugin or campaign can introduce problems. Build a habit of checking on a phone before you publish. For the wider foundations, see Web Design Basics: What Makes a Site Work in 2026, and for inclusive design, read How to Improve Website Accessibility on a Budget. If you are deciding between a bespoke build and a template, Custom Website vs Template: Which Is Right for You? will help.

Frequently Asked Questions

Is a separate mobile site better than a responsive one?
In most cases no. A responsive site is easier to maintain and is the approach generally recommended.

How do I know if my site is mobile-friendly?
Browse it on a phone and run a tool such as PageSpeed Insights or Lighthouse. Check for readability, tap targets and speed.

Do I need an app?
Usually not. A well-built mobile site is enough for most small businesses.

Will being mobile-friendly improve my search ranking?
Mobile usability is one factor among many. It supports visibility, but content quality and relevance matter too.

Summary

To make a website mobile-friendly, use responsive design, set the viewport, size text and tap targets for thumbs, simplify navigation, optimise images, speed up pages, streamline forms and test on real devices. Check regularly, because phones are where most of your visitors will meet you.