Websites & patient experience · Practical guide

Keep phone pages usable when the screen is wide but short

A phone in landscape has limited vertical space. Large sticky headers and action bars can consume most of it, leaving only a narrow slit for reading or form entry.

Healthcare website and appointment calendar displayed on devices at an empty clinic reception.
Make the website useful for the people who use your practice.

What to change

Ask your supplier to adapt fixed page elements to limited screen height, including landscape use with the phone keyboard open.

A worked example

Illustrative example

A visitor can read a full form question in landscape because the tall navigation area stops occupying a permanent portion of the small visible screen area.

Healthcare website design showing connected desktop and mobile service and enquiry layouts.
Make the service and next step clear on every screen.
Healthcare website accessibility illustrated by a focus outline, keyboard key, contrast samples and form.
Review keyboard access, contrast and understandable form fields.

Why this matters to your practice

A landscape phone is wide but short. Treating it like a roomy desktop can leave little space between a tall fixed header and a bottom action bar. Ask your supplier to complete a real form in that orientation with the keyboard open. The current question and a route to continue must remain reachable. It may be sensible for some fixed elements to become ordinary scrolling content when height is limited; judge the result by usability rather than preserving every decoration.

A practical review example

A phone rotated sideways may be wide enough to trigger a desktop-style header but leave very little room beneath it. Add a bottom action bar and keyboard, and the form becomes a narrow strip. Ask your supplier to complete a fictional enquiry under those conditions, including an error. Important fixed elements may need to shrink or scroll with the page. Judge the ability to read the current question and continue, rather than whether every decorative element keeps its original size.

How to check the result

Accept when the available reading and interaction space remains useful throughout the task, including while typing or viewing errors.

A mistake to avoid

A layout that responds only to screen width can incorrectly treat a short landscape phone as a spacious desktop screen.

Turn reading into a next step

Your action checklist

Work through these checks with your team or supplier. Tick the ones you have resolved and leave unknowns open.

Checks to discuss

Record what you know, what is still missing and the answer you need from your team or supplier.

Use project decisions only, without personal, patient or confidential details. Entries stay in this page and are not submitted to Kay & Co. Copy or download before leaving; this page does not save your notes.

Further reading

These sources provide background for the topic. The practice examples and checklist are illustrative planning suggestions from Kay & Co.

Related guides

Need help with this?

Tell us what is getting in the way. Kay & Co. can help you understand the options and turn the next step into something that works for your practice.

Explore websites & patient experience services or discuss your project.

Try the free Healthcare Digital Planner to find your starting priority.