Compare website templates with real content
Use long headings, different image shapes, incomplete records, and realistic page tasks to compare website templates before you commit.
On this page
A template demo shows content selected for its layout. Your website may need longer headings, different images, or fewer records. Compare candidates with the same realistic content sample before you make a decision.
This process produces evidence about your requirements. It does not establish that a template meets every accessibility or performance requirement.
Start with the page that carries the main task
Choose one complete visitor task. For a portfolio, a person may open a project and find the contact details. For documentation, a reader may find an instruction and follow its next link.
Write the content needed for that task. Include the actual page title, explanation, image, and action. Avoid testing only a decorative homepage section.
Use the template selection guide to define the required page types. A template with many sections can still omit the page your task needs.
Prepare a small content sample
Collect examples from the material you intend to publish. Use an ordinary record and a difficult record. Keep private customer information out of the sample.
| Content sample | What it reveals | Question to answer |
|---|---|---|
| Long but realistic heading | Wrapping and available width | Does the full title remain readable? |
| Short description | Uneven card content | Does the action remain easy to find? |
| Portrait image | Cropping and image rules | Does the important subject remain visible? |
| Missing optional image | Empty content handling | Does the page still explain the record? |
| Long URL or identifier | Overflow behavior | Does the page keep its usable width? |
| Empty result list | Missing result guidance | Does the visitor know what to do next? |
Use this table as a review plan. It contains no results for a specific template.
Check the meaning of the page structure
Read the headings in order. Confirm that each one identifies the material below it. Do not use a heading only to obtain a larger text size.
The W3C heading tutorial explains how headings organize content. Apply that structure to your actual article or product page.
The MDN document structure guide describes the roles of page regions. Use those roles to examine navigation, main content, and supporting material.
Separate a content problem from a layout problem. An unclear heading needs a better explanation. A clipped heading needs a layout correction. Record both when both occur.
Compare image rules before replacing assets
Use at least one portrait and one landscape image. Identify which areas crop the image and which show the complete file. Check captions and alternative text separately.
An image can look correct in a large preview but lose its subject inside a card. Keep important content away from a crop boundary when the design permits it.
Read the image sizing guide before exporting final files. Do not solve a layout problem by uploading an unnecessarily large image.
Repeat the task on a phone
Use the same sample on a real phone. Open the navigation, find the record, and complete the main action. Check the keyboard and form messages where the task includes input.
Record the device and the task outcome. A desktop window narrowed by hand provides useful information, but it does not cover every phone behavior.
Use the mobile checklist for the rest of the review. Keep the results with the candidate name and version.
Choose from the recorded changes
List the corrections each candidate needs. Separate required work from optional style changes. Estimate work only when the responsible person can explain its scope.
Choose a template that supports the required content with manageable changes. Keep the sample for future releases. It gives the next maintainer the same difficult cases to review.
Browse the template directory with that sample ready. Compare complete visitor tasks before you compare optional effects.
