You open the homepage of Example Sneaker Store, then the Everyday listing, then Harbor’s product page. The header spacing has changed. The cards use a different corner treatment. “Free delivery” on one page has become “complimentary shipping” on another, with no obvious reason. Each page might be carefully designed. Together, they do not quite look like the same site.
Compare repeated parts across pages, decide which differences support each page’s job, and record the rest for the team to align or investigate. For a broader review of one landing page, start with How to Test Your Website Before Launch. Later sections point to the visual-hierarchy and design-system guides when those jobs come up.
The store and the differences below are fictional teaching inputs. They are not findings from a real site.
Record Exceptions as You Compare
Use a short exception sheet as you work. Mark each difference as “Keep” if it supports the page’s job, “Align” if it is unintended, or “Investigate” if its purpose is unclear. An unexplained difference is a question to resolve, not automatically a defect.
| Element or pattern | Pages compared | Width checked | Difference observed | Reason for the difference | Decision |
|---|---|---|---|---|---|
| Header spacing | Listing and product | 390 by 844 | Less space around the header on the product page | No reason confirmed | Investigate |
| Product imagery | Listing and product | 390 by 844 | Larger, more detailed photos on the product page | Supports a closer look at one shoe | Keep |
| Delivery wording | Homepage and product | 1920 by 1080 | “Free delivery” versus “complimentary shipping” for the same offer | No reason confirmed | Investigate |
The rows above are illustrative examples, not a required set of findings.
Nielsen Norman Group’s usability heuristic on consistency and standards says that people should not have to wonder whether different words, situations, or actions mean the same thing. Its guidance on consistency adds that consistency does not happen by itself. Even with an agreed standard, people forget rarely used elements and interpret ambiguous parts differently. Without a standard, different designers invent different solutions to the same problem on different pages. Regular reviews are how teams catch that drift.
Choose One Page of Each Type
You do not need to open every page on the site to start. Pick one representative page for each type you care about, such as the homepage, a listing, a product page, and an article. Add a known exception or an alternate template when you already know it is built differently.
This one-page-per-type comparison is a practical method for a first pass, not a published standard. A sample can reveal drift. It does not prove that every page is consistent. If you find a problem on one product page, ask the team to check the others that use the same template.
Compare Like With Like at the Same Widths
Compare the pages at the same widths, so you are judging the design rather than a change of screen size. A difference that appears only because one page was reviewed on a phone and another on a desktop is not a consistency finding.
Online Website Previewer can help you open each page at the same three sizes. It is a free tool and does not need an account. Paste the address, press Preview, and use the desktop view at 1920 by 1080, the tablet view at 820 by 1180, and the phone view at 390 by 844, in CSS pixels. Those are the previewer’s sizes, a starting view rather than a match for your visitors. Custom sizes are not offered.
The previewer shows one page at a time, so you will need to compare pages yourself, by notes or screenshots. It does not place two page addresses side by side.
Use a safe test path before submitting a form to check an error message.
Compare matching states where you can, such as the same selected size or an open menu on both pages. Do not treat a difference caused by a selected option, an open menu, an error message, or a product variant as drift.
If you want help choosing review widths in general, use Which Screen Sizes to Use When Reviewing a Website.
Look Across Visual, Layout, and Content Layers
Nielsen Norman Group describes several layers of consistency, including visual treatment, page and button layout, and content. Use those layers as prompts when you compare, not as a complete theory of design.
Visual. Do repeated parts unexpectedly change appearance? Look at colors, type styles (fonts), icon treatment, and the way images are framed. A product card with a heavy border on the listing and no border on the homepage, with no reason for the change, is the kind of difference to record.
Layout. Do comparable patterns keep the same spacing and placement? A search field that sits on the right of one header and the left of another, or a “Save for later” action that switches sides, can make a repeated task harder to recognize.
Content. Do the same actions and offers use the same words? Formal homepage copy next to a blunt error message may be a tone problem. Two names for the same delivery offer, as in the sheet above, can make shoppers wonder whether the policy changed.
If the question is whether a color still has a clear role, use How to Review Your Website’s Color Palette in Use. If the question is whether the right information is emphasized on a single page, use How to Review a Website’s Visual Hierarchy. This guide is about whether the same parts still look and read like the same site.
On product pages, the same attribute should also use the same name, format, and units, and comparable sections should follow the same layout. That product-page detail is covered in What Shoppers Need on a Product Page.
Separate Useful Variation From Drift
Consistency is not a requirement that every page look and act the same. Nielsen Norman Group notes that breaking a convention can be worth it when the task needs it.
Ask two questions about each difference:
- Does it serve this page’s job? Larger, more detailed photos on a product page can be a justified change from a compact listing card.
- Can a visitor still recognize the same function? A header that changes its order of links from page to page is harder to justify.
WCAG 2.2 Success Criterion 3.2.3 Consistent Navigation, at Level AA, is about keeping repeated navigation in the same relative order. Success Criterion 3.2.4 Consistent Identification is about identifying components that do the same thing in a consistent way. Neither requires pages to look alike. Do not cite them as a visual-sameness rule.
If the header itself stays visible on some templates and not others, decide first whether that behavior is intentional on each page type. Should Your Header Stay Visible While You Scroll? covers that decision.
Send an Exception Sheet the Team Can Act On
For each consequential exception, record the page addresses, the width you compared, the difference you observed, a screenshot, and your proposed decision: Keep, Align, or Investigate. Keep the observation separate from any suggested fix.
A useful note could say:
Compared the Everyday listing and the Harbor product page at 390 by 844. There is less space around the header on the product page, and I could not find a reason for the change. Please confirm whether this is intentional. If not, align it with the listing header. After a change, recheck both pages at the same widths.
If a later fix would have to be made in many places, Make an Old Site Responsive or Rebuild? helps you ask how widely a change would spread. What Is in a Design System? explains the vocabulary for shared parts, if you need it.
Recheck the affected comparisons after a change, at the same widths you used the first time. Update the exception sheet with what changed and which differences still need an explanation.
