Mobile Compatibility Problems and Solutions
The great majority of web traffic comes from mobile devices; yet many sites are still designed desktop-first. The result is text that can't be read on mobile, buttons that can't be tapped with a finger and pages that open late.
Why does my site look bad on mobile?
The three most common reasons: the page is designed at a fixed pixel width and doesn't adapt to the screen, the viewport tag is missing, or large images prepared for desktop load late on a mobile connection. Keeping the font size no smaller than 16 pixels and clickable areas at least 44×44 pixels solves most complaints on its own.
What "mobile-friendly" means, and what it doesn't
Not: the site opening on a phone. Every site opens on a phone; the question is how it opens.
It is: the content being readable without zooming or scrolling sideways, buttons being comfortably tappable with a finger, forms being fillable and the page loading in a reasonable time.
Google evaluates a site based on its mobile version. So a site that looks perfect on desktop but has problems on mobile is judged in search results by its mobile state.
How to check yourself
No expensive tools needed. Do the following in order:
1. Browse from your own phone. Home page, a service page, the contact form. Behave like a real user: fill in a form, tap the phone number, open the menu.
2. Check for horizontal scrolling. Try dragging the page left and right. If it moves, an element is overflowing the screen — the most common cause is a wide table, a long link text or an image given a fixed width.
3. Watch for jumping. Does the content shift while the page loads? It usually comes from images not being given dimensions, and the user taps the wrong place.
4. Measure speed. See your mobile performance with the Site Speed Test tool. Even if the desktop result is good, mobile can be seriously low.
5. Try different screens. Open the device view in your browser's developer tools and check at small (360px), medium (768px) and large screens.
The most common problems
Slow loading
This is where the real difference on mobile shows. The causes, in order:
Unoptimised images. The biggest share. A 4 MB photo uploaded straight from the camera locks the page on its own on a mobile connection. Reducing images to the size they'll be used at and converting them to WebP cuts page weight by more than half on most sites — you can do it in bulk with the Image Converter.
Unnecessary plugins. Every plugin loads its own CSS and JavaScript file. Removing unused ones brings a direct speed gain.
Too many external services. Live chat, map, embedded social media content, analytics tools... Each one means a separate connection and extra load. Keep the ones that are really needed.
Fonts. Loading five different font weights is unnecessary; two weights are enough for most designs.
Touch targets
A link that's comfortably clicked with a cursor on desktop can be too small to tap with a finger. Practical rule: tappable elements should be at least 44×44 pixels with space between them.
The places that cause the most trouble: small links in the footer menu, social media icons, links inside tables and small buttons lined up side by side.
Unreadable text
Body text on mobile should not go below 16 pixels. Smaller text forces the user to zoom. Line length should also not be too wide, and line spacing should be generous.
Forms
Filling in a form on mobile is already a chore; make it easier:
- Reduce the number of fields to a minimum. Every extra field lowers the completion rate.
- Define the right keyboard type: a numeric keyboard for the phone field, an email keyboard for the email field.
- Support autofill.
- Show error messages right next to the field.
- Don't let the submit button disappear off screen.
Fixed elements
When a menu fixed at the top or bottom of the screen, a cookie banner and a chat bubble combine, almost no space is left to read on a small screen. Simplify these elements on mobile.
Pop-ups
Full-screen windows that appear the moment you enter the page are both annoying on mobile and the close button often ends up off screen. The user leaves the page.
Order of priority
If your time is limited, proceed in this order:
| Order | Task | Why first |
|---|---|---|
| 1 | Optimise images | Biggest speed gain, least effort |
| 2 | Fix horizontal overflow | Directly breaks usability |
| 3 | Enlarge touch targets | Directly affects conversion |
| 4 | Remove unnecessary plugins/services | Lasting speed gain |
| 5 | Simplify forms | Increases the number of enquiries |
| 6 | Reduce fixed elements | Readability |
Mobile-friendly vs. a "separate mobile site"
Separate mobile sites like m.yourcompany.com used to be built. This approach is no longer recommended: two separate sites double the maintenance, the content diverges and it creates confusion for search engines.
Today's correct method is responsive design: a single site that arranges itself according to screen size. Same address, same content, same management.
Frequently asked questions
My site works on mobile, do I still need to redo it? Not if it works and is fast. The problem is in the difference between "works" and "usable". Try filling in a quote form from your own phone; you'll get the answer there.
Is mobile compatibility an extra charge? It shouldn't be. Responsive design is now a standard requirement, not an extra service.
Would it be better to have an app made? Different jobs. An app makes sense if you offer a service that's used regularly. For presentation and collecting enquiries, a good mobile site is sufficient and far more economical.
Should I use AMP? No longer necessary. Speeding up your site directly is a more lasting solution.
The fastest way to measure is this: take out your phone and try filling in a quote form on your own site. Every point where you struggle is the point where your customer gives up.
The four sections that break most often on mobile
- Tables. A wide table that sits fine on desktop either overflows on a phone or shrinks until it's unreadable. The solution is making the table horizontally scrollable within itself; the whole page should never be allowed to scroll sideways.
- Forms. Narrow fields and the submit button ending up off screen when the keyboard opens are the most common reasons for form abandonment.
- Menu. The dropdown menu covering the whole screen isn't a problem; the close button being out of thumb reach is.
- Fixed top bars. If there's an announcement at the top, a cookie banner at the bottom and a chat bubble too, the space left for content on a phone is halved.
A practical way to test
An emulator is useful but doesn't replace a real device. The fastest real test is this: take your own phone, turn on mobile data (not wifi), go to your site and fill in and submit a quote form.
This single trial tests speed, readability, touch areas and the form flow at the same time. Every step where you struggle is the step where your customer gives up.
You can measure your mobile load time with the Site Speed Test.