Mobile-Friendly Website: A Practical Checklist

Many of your customers will meet your business for the first time on a phone screen, often while walking, waiting or comparing you with a competitor. If your site is hard to read or tap, they simply go back and pick someone else. This checklist helps you test and fix the parts of a mobile-friendly website that matter most, without needing to be a developer.

Hand holding a smartphone in front of colorful blurred lights at night — Phone visitors are often busy and on the move, so every tap and second counts.

Key takeaways

A mobile-friendly site adapts its layout to the screen, keeps text readable without zooming and makes buttons easy to tap.
Test on real phones, not only a resized desktop browser, and walk through the tasks customers actually do.
Short forms, tap-to-call links and clear menus often make a bigger difference than design changes.
Google assesses Core Web Vitals separately for mobile, so check your mobile performance on its own.

"Mobile-friendly" used to mean the site did not break on a phone. Today the bar is higher. Visitors expect to find your opening hours, call you, book an appointment or buy a product with a thumb, in a few taps, on a patchy connection. A site that technically works on mobile but makes these tasks frustrating still loses customers.

Search engines care too. Google primarily uses the mobile version of a site's content for indexing and ranking, often called mobile-first indexing, so what phone users see is what counts. Your platform and theme determine many of the fixes below, so check your builder or theme documentation for the exact settings.

Part 1: Layout and responsive design

Responsive design means your website rearranges itself to fit any screen size, from a small phone to a wide monitor. Almost all modern themes and website builders are responsive by default, but the details still need checking.

No sideways scrolling. On a phone, you should only need to scroll up and down. If you can swipe the page sideways, something is too wide, often a table, image or embedded video.
Sensible stacking. Columns that sit side by side on desktop should stack in a logical order on mobile, with the most important content first.
Viewport setting present. Responsive pages need a viewport meta tag in the page code, which tells phones to use the screen's real width. Builders add it automatically. On custom sites, ask your developer to confirm it looks like this:

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

Mobile preview checked. Many builders have a mobile editing view where you can hide, resize or reorder elements for phones only. Use it, but do not hide important content just to make the page shorter.
Pop-ups under control. Full-screen pop-ups that are hard to close are especially annoying on phones. If you use them, make the close button large and easy to find, or use a small banner instead.

Common mistake

Designing and approving the website only on a large desktop monitor. The owner signs off on a beautiful layout, but on a phone the hero image fills the whole screen, the phone number is buried at the bottom and the menu hides key pages. Always review every new page on a phone before publishing.

Part 2: Text, buttons and navigation

Readable text

Body text is comfortable to read without zooming. As a rule of thumb, it should look about as large as text in a typical phone app.
Lines are not too long or too cramped, with enough space between them.
Text has strong contrast with its background. Light gray text on white is hard to read outdoors in sunlight.
Paragraphs are short. A paragraph that looks fine on desktop can become a wall of text on a narrow screen.

Tap-friendly buttons and links

Buttons are large enough to tap with a thumb, with space between them so visitors do not hit the wrong one.
Your main call to action, such as "Book now" or "Call us", is visible without much scrolling.
Phone numbers are tap-to-call links and addresses open in a maps app.
Links in body text are clearly marked, not just a slightly different color.

Simple navigation

The mobile menu, often a "hamburger" icon with three lines, opens easily and lists your most important pages first.
The menu is not so long that visitors must scroll through it. Group or trim items if needed.
Visitors can always get back to the home page, usually by tapping your logo.
Key information, such as hours, location and contact, is reachable in one or two taps.

Pro tip

Consider a "sticky" call or booking button that stays at the bottom of the phone screen as visitors scroll. For service businesses such as plumbers, salons and clinics, it puts the most valuable action within reach on every page. Keep it small so it does not cover content.

Part 3: Forms, checkout and booking on mobile

Forms are where mobile visitors most often give up. Typing on a small keyboard is slow, so every field you remove helps.

Cut fields to the minimum. Ask only for what you need to respond. A name, email or phone number and a message box is enough for most contact forms.
Use the right input types. Email fields should bring up a keyboard with the @ sign, and phone fields a number pad. Ask your developer or check your form tool's field settings.
Turn on autofill. Let the browser fill in names, addresses and emails. Fields labeled clearly work best with autofill.
Put labels above fields. Placeholder text that disappears when you start typing makes visitors forget what they were asked.
Show clear errors. If something is wrong, explain it next to the field in plain language, without wiping what was already typed.
Offer mobile-friendly payment. If you sell online, wallet payment options from your payment provider can save customers from typing card details. Check what your platform supports.
Test the whole journey. Fill in each form and complete a test booking or order on your own phone, then confirm the confirmation email arrives.

Three smartphones side by side showing different pages of a website — Check your key pages on more than one phone size, because layouts can shift between models.

Part 4: Images, video and speed

Phones often load pages over mobile networks, so heavy pages hurt more on mobile than on desktop.

Resize and compress images before uploading. A photo straight from a camera is usually far larger than a phone screen needs.
Use modern image formats such as WebP or AVIF where your platform supports them.
Lazy load images lower on the page, so they load only when the visitor scrolls near them. Many platforms do this automatically.
Avoid autoplaying video with sound, and make sure embedded videos shrink to fit the screen.
Limit extra scripts such as chat widgets, trackers and pop-up tools, which add weight to every page.

0.1 The threshold for a "good" Cumulative Layout Shift score, which measures how much content jumps around while a page loads, assessed separately for mobile and desktop Google Search Central

Layout shift is especially frustrating on phones: you go to tap a button and an image loads above it, pushing the button away. Giving images and ads a fixed size in the page code helps prevent this. Interaction to Next Paint (INP), which measures how quickly a page responds when you tap, is also worth watching on mobile, where processors are often slower than on laptops.

Part 5: How to test your mobile site

Combine real-world testing with free tools.

Method	What it tells you	How often
Your own phone	How the site feels to use: reading, tapping, forms, checkout	Every new page and monthly
Other people's phones	Problems on other screen sizes, operating systems and browsers	After major changes
Browser developer tools	A quick preview of different screen sizes from your desktop	While editing
PageSpeed Insights	Mobile performance scores, Core Web Vitals field data where available and suggestions	Quarterly
Lighthouse	Lab tests for performance and accessibility, run in Chrome	After design changes
Search Console Core Web Vitals report	How real mobile visitors experience groups of your pages	Monthly

Hypothetical example

Imagine a hair salon that wonders why online bookings are low. The owner asks three regular customers to book an appointment on their phones while she watches. Two of them struggle to find the booking button, which sits below a large image gallery, and one gives up when the form asks for a full address. The salon moves the booking button to the top, adds a sticky "Book now" bar and removes the address field. Booking becomes noticeably easier, and no redesign was needed.

Mobile-friendly website checklist

No sideways scrolling on any key page
Content stacks in a logical order, most important first
Text is readable without zooming, with strong contrast
Buttons are thumb-sized with space between them
Phone numbers tap to call and addresses open in maps
Mobile menu is short and lists key pages first
Pop-ups are easy to close or replaced by small banners
Forms ask only for essentials and use the right keyboards
Images are resized, compressed and lazy loaded
Core Web Vitals for mobile checked in Search Console
Full booking or checkout tested on a real phone

Frequently asked questions

Do I need a separate mobile website?

Usually not. A single responsive website that adapts to every screen is simpler to maintain and is the approach most modern platforms use. Separate mobile sites mean double the work and more chances for content to fall out of sync.

Is a mobile app better than a mobile-friendly website?

For most small businesses, no. Customers rarely download an app to book a haircut or check opening hours. An app makes sense mainly for frequent, repeat use, such as a loyalty program. Get the mobile website right first.

My theme says it is responsive. Is that enough?

It is a good foundation, but content you add can still break the layout, such as wide tables, huge images or embedded tools. Test your actual pages on a phone, not just the theme's demo.

How do I know how many visitors use phones?

Your analytics tool shows visits by device category, and Search Console lets you filter performance by device. Check both to see how important mobile is for your own audience.

The bottom line

A mobile-friendly website is less about clever design and more about removing friction: readable text, thumb-sized buttons, short forms and fast pages. Pick up your phone today, try to do what your customers do on your site, and note every moment of frustration. Fix those first, then work through the rest of this checklist each quarter.