Having a mobile-friendly website means more than making your desktop website shrink down to fit a phone screen.
People interact with websites differently on a phone. They tap instead of click, scroll with their fingers, type on a small keyboard, and may be viewing your website in bright sunlight or while using one hand.
A website can technically be responsive and still be frustrating to use on a phone.
Use this checklist to review your website on mobile and catch the problems that are easy to miss.
1. Make sure the website works without horizontal scrolling
A visitor should not have to swipe left and right to see the page.
Check your pages on smaller phones and make sure:
- Text stays within the screen.
- Images and videos resize appropriately.
- Tables don’t force the entire page wider than the screen.
- Forms don’t extend beyond the viewport.
- Navigation and other elements don’t create unexpected horizontal scrolling.
If visitors have to constantly move the page sideways, something needs to be fixed.
2. Make links and buttons easy to tap
Small links and buttons can be surprisingly difficult to use on a touchscreen.
As a practical target, aim for interactive elements that are around 44 × 44 CSS pixels or larger, particularly for standalone buttons and controls. W3C’s accessibility guidance recommends 44 × 44 CSS pixels for enhanced target size, while WCAG 2.2’s Level AA minimum is 24 × 24 CSS pixels when its exceptions are taken into account.
The important point is that the clickable or tappable area should be large enough, not necessarily that the visible text itself has to be 44 pixels tall.
For example, a small text label can still have generous padding around it to create a much easier tap target.
3. Don’t put links too close together
Even if individual links are technically large enough, they can still be difficult to use if several links are packed tightly together.
Check:
- Navigation links
- Lists of links
- Social icons
- Previous/next controls
- Form controls
- Buttons placed next to one another
A visitor should be able to tap one without accidentally tapping the one beside it.
WCAG 2.2 specifically addresses target size and spacing because closely packed controls can result in accidental activation.
4. Make text readable without zooming
Visitors shouldn’t have to pinch-zoom just to read normal website content.
Check your body text on an actual phone rather than relying only on how it looks in a desktop browser resized to a narrow window.
Look for:
- Text that is too small
- Extremely tight line spacing
- Long blocks of text with little spacing
- Text that becomes difficult to read against its background
- Headings that wrap awkwardly
Responsive design should adapt both the layout and the readability of the page to smaller screens.
5. Keep paragraphs and sections easy to scan
Large walls of text become even harder to read on a phone because the screen is narrow.
Break up content with:
- Shorter paragraphs
- Descriptive headings
- Lists where appropriate
- Adequate spacing between sections
This isn’t about making every paragraph only one or two sentences. It’s about giving the reader enough visual separation to quickly find what they’re looking for.
6. Make your navigation easy to use
Your mobile navigation should be easy to open, understand, and close.
Check that:
- The menu button is easy to tap.
- Menu items have enough space between them.
- The menu doesn’t extend off the screen.
- Submenus are usable on a touchscreen.
- Visitors can easily tell which page or section they’re viewing.
- Opening the menu doesn’t make the rest of the page unusable.
Don’t assume that a desktop navigation bar will automatically make a good mobile menu.
We recommend you use the UltimateWB built-in Responsive app to utilize the hamburger menu icon for mobile. You can customize the icon and other visual aspects, such as the popup menu size and color.
7. Make buttons obvious
Buttons should look like buttons.
A visitor should be able to quickly distinguish a button from ordinary text or a decorative element.
Use consistent styling for actions such as:
- Buy
- Sign Up
- Submit
- Continue
- Log In
- Add to Cart
- Contact Us
The button’s text should also clearly describe what will happen when it is tapped.
8. Give forms enough room
Forms are one of the easiest places to discover mobile usability problems.
Check:
- Text fields are large enough to tap.
- Labels are easy to read.
- Fields aren’t crowded together.
- Checkboxes and radio buttons have sufficiently large clickable areas.
- Buttons are easy to tap.
- Error messages are visible and understandable.
- The keyboard doesn’t make the form difficult to use.
Where possible, make the label or surrounding area clickable too. W3C notes that larger clickable areas around controls make them easier to use, particularly for people with limited dexterity and on touchscreens.
9. Don’t make visitors fight the keyboard
Tap into a form on your phone and see what happens.
Does the page automatically scroll so the field you’re typing into remains visible?
Can you see what you’re typing?
Does a fixed header or footer cover the field?
Does the form require excessive scrolling?
These problems can be easy to miss if you only test a form on a desktop computer.
10. Make phone numbers and important actions easy to use
If your website displays a phone number, consider making it tappable so visitors can call without having to copy and paste it.
The same principle applies to other important actions. If something is important to your visitors, don’t make them hunt for it or perform unnecessary steps.
11. Check popups and overlays
Popups that look reasonable on a desktop can take over an entire phone screen.
Test:
- Newsletter popups
- Cookie notices
- Login windows
- Promotional offers
- Chat windows
- Exit-intent messages
- Video overlays
Make sure visitors can clearly see how to close or dismiss them.
Also check that important content and controls aren’t hidden underneath fixed overlays.
12. Check sticky headers and footers
Sticky navigation can be useful, but it takes up a much larger percentage of a phone screen than it does on a desktop.
Ask:
How much of the screen is left for the actual content?
A large fixed header combined with a large fixed footer can leave surprisingly little room.
Also make sure that important content or controls don’t become hidden behind fixed elements. WCAG 2.2 includes a requirement concerning content that can become obscured by author-created fixed content when it receives keyboard focus.
13. Make sure images work on mobile
Images should resize appropriately without:
- Extending beyond the screen
- Becoming distorted
- Making the page unnecessarily wide
- Making important information impossible to read
Also consider whether an image contains text that becomes too small to read on a phone.
14. Check videos and embedded content
Don’t forget about things embedded inside your pages.
Test:
- Videos
- Maps
- Social media embeds
- Calendars
- Forms
- Charts
- Interactive tools
- Third-party widgets
An otherwise responsive page can still become unusable if one embedded element is wider than the mobile viewport.
15. Don’t rely on hover effects
A desktop visitor can move a mouse over an element. A phone visitor can’t.
If important information or functionality appears only when someone hovers over something, make sure there is an appropriate way to access it on a touchscreen.
Mobile users should not need a mouse-like interaction to use your website.
16. Make links descriptive
Avoid filling your website with links that simply say “Click Here” or “Read More.”
Instead, use link text that tells visitors where the link goes.
For example:
Less useful:
Read More
More useful:
Read the Complete Website Speed Guide
Descriptive link text is also recommended by W3C’s accessibility guidance.
17. Check both portrait and landscape
Most mobile visitors will use portrait orientation, but don’t ignore landscape mode.
Rotate your phone and check:
- Navigation
- Images
- Videos
- Forms
- Tables
- Popups
- Fixed headers and footers
Your website shouldn’t suddenly become difficult to use simply because the visitor turns the phone sideways.
WCAG includes an orientation requirement that generally calls for content to work in both portrait and landscape unless a particular orientation is essential.
18. Check your most important content first
Don’t just test the homepage.
Check the pages that matter most to your website, such as:
- Home page
- Product pages
- Service pages
- Contact page
- Checkout
- Sign-up or registration pages
- Forms
- Login pages
- Search
- Blog posts
- Important landing pages
A website can have a responsive homepage while an important form or product page has serious mobile problems.
19. Test on an actual phone
Desktop browser tools are useful, but they aren’t a substitute for using the website on an actual mobile device.
Pick up your phone and use the website normally.
Try tapping links with your thumb.
Scroll through longer pages.
Open the menus.
Fill out a form.
Try to complete the actions a normal visitor would take.
You’ll often notice problems immediately that weren’t obvious on a desktop screen.
20. Test the website at different screen sizes
There isn’t one universal “mobile screen.”
Phones come in different sizes and resolutions, and visitors may also use tablets or resize their browser windows.
Check your website at several viewport sizes and make sure the layout continues to work as the available space changes.
Responsive design should adapt the presentation of the page to different viewport sizes rather than simply creating a separate fixed-size mobile layout. W3C specifically recommends designs that adapt to different viewport sizes and zoom states.
You can actually check your website on different device sizes on the free UltimateWB Responsive Check Tool. This is especially useful if you don’t have access to various devices for testing.
Also, when you build your website with UltimateWB, you can just resize your browser window to various sizes to check how it reformats automatically. Then, if you are using a device with a tapable screen, you can also test out how well you can tap everything.
Quick Mobile-Friendly Checklist
Before considering a website mobile-friendly, check:
☐ No horizontal scrolling
☐ Text is readable without zooming
☐ Buttons have sufficiently large tap areas
☐ Links and buttons aren’t packed too closely together
☐ Navigation is easy to open and use
☐ Forms are easy to fill out
☐ Form fields don’t get hidden by the keyboard
☐ Phone numbers are easy to tap
☐ Popups are easy to close
☐ Sticky headers and footers don’t take over the screen
☐ Images resize correctly
☐ Videos and embedded content fit the screen
☐ Important functionality doesn’t depend on hover
☐ Links clearly describe where they go
☐ Pages work in portrait and landscape
☐ Important pages have been tested, not just the homepage
☐ The site has been tested on an actual phone
☐ The site has been checked at multiple screen sizes
Mobile-Friendly Doesn’t Just Mean Responsive
Mobile-Friendly Doesn’t Just Mean Responsive
Responsive design is an important part of making a website mobile-friendly, but it isn’t the whole thing.
A website can be responsive and still have tiny links, cramped forms, oversized popups, difficult navigation, or buttons that are frustrating to tap.
The best test is simple: use your website the way a mobile visitor would use it.
Tap. Scroll. Search. Fill out a form. Open the menu. Buy something. Contact the business.
If any of those actions feels unnecessarily difficult on your phone, fix it.
Ready to design & build your own mobile-friendly website? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.
Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.