A mobile website checklist you can use on your own phone

Check the parts that matter: reading, navigation, forms, images, and the next action.

UI & UX design
2 min read
By BuoWeb
A smartphone being held and used

A desktop layout compressed into a narrow column is not necessarily a good mobile experience. The smaller screen changes what is visible at once, how people use controls, and how much effort a form requires. Start with the tasks your customers need to complete.

Read without adjusting the screen

Open the website on your phone and read the main heading and first paragraph. You should not need to pinch to zoom or move the page sideways to read an ordinary line. Check long service names, email addresses, tables, and buttons; these often reveal layout problems that a short headline hides.

Pay attention to text placed over photography. A photo crop may change on mobile, bringing a bright or busy area behind the words. Check the actual mobile composition rather than assuming the desktop contrast still applies.

Use the menu as a visitor would

Open and close the navigation. Make sure the current state is clear and the menu does not cover the only way to dismiss it. Follow a service link, return, and try the main contact action.

A smaller menu is useful only if the labels remain understandable. Avoid replacing familiar names with vague words to save a few characters. Test the longest label and allow space around controls so neighbouring actions are easy to distinguish.

Complete a form

Use the on-screen keyboard to enter a name, email address, and a realistic message. Confirm that the active field remains visible and that the page does not jump sideways. Labels should remain understandable after the placeholder disappears.

Try a missing required field and an invalid email. The feedback should identify what needs attention. Test the successful submission path too, using a clearly marked test enquiry and checking that the intended recipient receives it.

Check the page on an ordinary connection

Load the page again outside your usual fast office connection. Watch whether images push content around as they appear and whether a large decorative effect delays the information you came for.

Use responsive image delivery and reserve image space where practical. These implementation choices help the browser choose suitable files and keep the layout more stable. For the business review, the useful question is simple: can a visitor read, navigate, and act while the page is loading?

Mobile website design checklist

  • No unwanted horizontal scrolling
  • Readable text over the mobile image crop
  • Menu opens and closes predictably
  • Forms work with the on-screen keyboard
  • Primary actions remain reachable

Further reading

If your review reveals problems with navigation, forms, or page layout, use our website redesign planning guide to prioritise them. Explore BuoWeb’s website redesign service for the next step.

Keep exploring.

More ideas for planning, designing, and caring for your website.