Website planning & design

Can visitors complete key tasks on mobile?

Review responsive behaviour through navigation, reading, product data and form tasks. A narrower desktop layout is only a starting point.

A page without horizontal overflow may still be difficult to use. Test whether a visitor can find a product, understand its conditions, review evidence and make contact on a phone.

Check order and navigation

Use clear menu names, visible open and close states, and predictable return paths. Review scrolling and focus behaviour when menus are open. Give direct arrivals enough context to continue without visiting the homepage.

Keep detailed information readable

For specifications, choose grouped values, lists or a deliberately scrollable comparison table according to the task. Shrinking an entire table until it is illegible does not solve the content problem.

  • Test long names, units and translated controls.
  • Keep the important product detail within image crops.
  • Check that sticky elements do not cover content or actions.
  • Explain downloadable documents and their purpose.

Exercise forms and feedback

Check visible labels, instructions, errors and confirmation. Try the form with the mobile keyboard open. Preserve entered information after an error and explain the problem in text. Include empty, invalid, long and failed-network cases.

Use several input conditions

Test the agreed browsers and representative widths, keyboard operation and magnified reading. Emulation is useful for layout; actual devices reveal touch and keyboard issues. Record reproducible steps and results.

Reference: W3C WAI: forms tutorials.

Should mobile pages always be shorter?
No. Preserve the information needed for the task, with clear hierarchy and accessible next steps.
Can window resizing replace device checks?
It helps with layout but does not fully test touch, mobile keyboards or actual loading behaviour.

Website design notes

Continue reading