Responsive websites: what to test beyond a smaller screen
A responsive site must support reading, navigation and form completion on a phone. Test the content, controls and loading behaviour during a real task.
Your website fits on a phone screen, but the menu covers the contact button. Opening the form brings up a keyboard that hides the error message. The page looks responsive in a screenshot and is still difficult to use.
Responsiveness needs to be assessed while completing a task. The layout should reorganise content and controls without making visitors guess where to tap, read incomplete sentences or abandon an action halfway through.
Start with a real request
Choose an important task, such as finding a service and sending an enquiry. Complete it on a phone without extra instructions. Note where you have to zoom, go back to recover information or dismiss something covering another control.
Repeat at different widths and in landscape orientation. You do not need a layout for every phone model. You need to find where the content stops working. Long headings, another language and validation messages often reveal problems that an empty demonstration page conceals.
Read the content, not just the headings
Check paragraphs, lists, tables and captions. Images containing text may become unreadable when reduced. An HTML explanation or an adapted diagram may be more useful than asking someone to magnify an entire figure.
The WCAG reflow criterion addresses preserving information and functionality without two-directional scrolling, with exceptions for content that requires that layout.
Increase text size in the browser and watch how components rearrange. A fixed height may cut off a button or message as the text grows. Persistent elements such as cookie notices, chat and advertising must also be included in this check.
Use menus and forms all the way through
Open and close the menu, change pages, return and try keyboard navigation. Focus should remain identifiable. For forms, inspect required fields, keyboards appropriate to the requested information and error messages near the problem.
Send a test enquiry and confirm it arrives. A button changing colour is not evidence of delivery. If the connection fails, the person needs to understand what happened and retry without reconstructing the entire message.
Observe loading in realistic conditions
Do not rely exclusively on fast office Wi-Fi. Watch when the main information appears and whether the page shifts as images, fonts and advertising load. Reserve space for these elements and investigate oversized files before adding new effects.
Performance tools can help locate problems, but one score cannot describe the entire experience. Record the page, device or simulation, network conditions and result. That makes comparisons after a fix more credible.
What this means for search and sales
Google says it uses the mobile version of content for indexing and ranking. Do not remove essential information merely to shorten the mobile layout.
The effect on sales must be measured within the business. Repairing a form removes an obstacle; it does not automatically create demand or guarantee revenue. Check whether people can complete their tasks and whether the enquiries received match the offer. Those observations give the next round of changes a purpose.
For campaign traffic, also examine the complete landing page journey.
About the author
Tiago F SantiagoComments
No comments yet
Share a question or an experience related to the article.
Related articles
