A mobile template should let visitors complete the same main tasks as the desktop site. Check navigation, content, and forms with realistic examples. Use a real phone before you publish. A responsive label does not show whether the complete visitor journey works.
Start with a short list from template categories. Keep a record of the device, page, and action for each problem. This makes the result useful when you compare templates or contact a creator.
Start with one visitor task
Choose the action that matters most for your site. For a portfolio, this can be finding a project and sending an enquiry. For a product site, it can be understanding an offer and opening its purchase page.
Write the route as a short sequence. Include the starting page, destination, and successful result. Complete this sequence before you inspect small visual details.
Use this record for every candidate:
| Page | Action | Expected result |
|---|---|---|
| Home | Open the menu | Navigation stays within the screen |
| Project | Open an image | The useful content remains visible |
| Contact | Send incomplete data | The form identifies each missing field |
| Contact | Correct the data | The entered text remains available |
| Article | Follow a contents link | The heading appears below the fixed header |
These are example checks. Replace them with the real pages and actions your project needs.
Check narrow screens and enlarged text
Open a long article and a page with cards. Look for text outside its container. Check long titles, URLs, and buttons. A page can fit a phone while a single component causes horizontal scrolling.
Increase the text size. Check that labels remain connected to their controls. A menu must still fit when a visitor uses larger text.
The W3C reflow guidance explains how content should adapt to a narrow viewport. It includes exceptions for content that needs a two-dimensional layout, such as some tables. Use the guidance to identify problems; a quick check does not establish full conformance.
Test the menu as a complete sequence
- Open the menu.
- Follow a link.
- Return to the previous page.
- Open the menu again.
- Close it with its visible control.
Check whether a fixed header covers the destination heading. If the menu uses an overlay, check whether the page stays scrollable after it closes. A menu that works once can still fail after navigation.
Use the keyboard on a desktop as a separate check. Confirm that links show focus and that the order follows the page. Touch access and keyboard access need their own checks.
Give controls enough space
Try small icon buttons and links close to each other. Check whether you can select the intended control without opening its neighbour. Do not rely on colour alone to identify the active page.
The W3C target size guidance defines the 24 by 24 CSS pixel minimum criterion and its spacing exceptions. Larger controls can make common actions easier. A minimum criterion is not a complete design specification.
Use real images and real text
Replace the sample content when you can use a local copy. Try a portrait image, a wide logo, and a long project title. These inputs reveal limits that carefully selected demo content can hide.
A logo often needs complete visibility. A photograph can sometimes accept a crop. Choose the image rule for the content type. Read the image sizing guide before you apply one crop to every card.
Check forms with the keyboard open
Open each input on the phone. Confirm that the keyboard does not cover the active field or the main action. Check email, search, and numeric fields separately.
Send the form with a required field missing. Read the error message. Correct the field and continue. Record whether the form retains the other values. Confirm what service receives the submission; a visible form alone does not establish delivery.
Keep a comparison record
Use three states: confirmed, needs a change, or needs a question. Write the evidence beside each state. Avoid assigning an accessibility or performance score from a brief visual check.
Q: Is a desktop browser resize enough?
It helps find layout problems. A real phone also reveals keyboard, touch, and viewport behaviour that a desktop check can miss.
Q: Should every card have the same height?
A regular grid can help comparison. Keep the full title available and avoid fixed heights that cut off enlarged text.
Q: Where should I begin?
Read how to choose a template, then compare the same visitor task across your candidates.
