Picture someone finding your number before an appointment or reading your offer on the way home. They do not have a large monitor, a mouse or much patience for a button that will not work. They need to complete a specific task.
Mobile design changes the available space, the controls and the circumstances in which the website is used. The checks below help turn “the mobile version feels wrong” into a concrete list of improvements you can discuss with a supplier.
Put the offer before unnecessary decoration
A small screen cannot show everything at once. Prioritise what the visitor needs first: the service, its audience and the next action. An impressive desktop illustration can push all the useful information several screens down on a phone.
Reorder and resize content rather than hiding essential details. If location or service scope affects the decision, mobile visitors need that information too. They should not receive a less accurate version of your offer.
Read without zooming or losing your place
Open a longer passage and read it normally. Small type, weak contrast and a dense block without breaks can make this uncomfortable. Short paragraphs and descriptive subheadings help people keep their place.
Increase the browser’s text size. Headings may wrap, but they should not extend off the screen or cover controls. Long email addresses and German compound words can reveal a layout problem that a short heading does not expose.
Give the menu a clear way in and out
A fullscreen menu can give links enough space for reliable tapping. It still needs an obvious close control and a predictable route back to the page. Selecting a link should take the visitor to the intended place.
On a short or landscape screen, not every item will fit at once. The menu content must remain reachable by scrolling. Check that controls do not disappear behind screen edges or overlap one another.
- Open the menu, reach the last item and close it.
- Choose a link and verify the destination.
- Try keyboard navigation, Escape and focus returning to the opener.
- Check that background controls cannot be activated accidentally.
Test forms with the keyboard open
The on-screen keyboard often exposes problems a desktop preview misses. Tap the last field, write a longer message and try to reach the submit button. The page should remain usable while an input has focus.
W3C recommends understandable labels, instructions and error feedback. A placeholder inside an empty field does not replace a persistent label once the person starts typing.
Check the keyboard type for email and telephone fields. Try an invalid submission, correct the mistake and finish again. Fixing one field should not unnecessarily erase everything already entered.
Watch what happens while the page loads
Large photographs and late-moving content can obstruct a page that looks excellent once settled. If a button shifts as an image loads, a visitor may tap something else. Try a mobile connection as well as a fast office network.
Core Web Vitals cover loading, interaction responsiveness and visual stability. They help identify technical issues but do not replace checking the complete task. A single laboratory result does not describe every real visitor’s experience.
Use the table, photograph and contact links
A price comparison that fits a monitor may become unreadable on a phone. Simple tables can often use fewer columns; complex information needs a considered layout. Readers must still know which price belongs to which service.
Check image crops so important faces or project details remain visible. Tap telephone and email links to verify their actions. Label downloads clearly and inspect the space between neighbouring links. A page is not finished merely because every element technically fits.
Walk through one complete scenario
Pick an important real task, such as making a service enquiry. Start on the home page and follow the ordinary route without shortcuts. A problem may occur between the menu and form even when each looks fine on its own.
- Repeat on a narrow screen and in landscape orientation.
- Include an open keyboard and a form error.
- Try larger text and visible keyboard focus.
- Where possible, compare an iPhone with an Android phone.
Prioritise fixes by their effect on the customer
Fix blocked tasks first: failed submission, an inaccessible menu or a hidden button. Then address unreadable text, overflow and confusing instructions. Refine decorative details after those obstacles are removed.
Report the device, browser, page and steps that produce the problem. “After opening the keyboard, I cannot reach Send” is more actionable than “Mobile is broken”. Repeat the same scenario after the fix to confirm the original obstacle has gone.
