A sample of the report a studio can use to prioritize visible layout and content issues. Every screenshot below comes from a deliberately imperfect, fictional Northstar website created for this example.
3 pagesHome · Work · Contact Fictional northstar.example
2 viewports1440 × 1000 desktop 390 × 844 mobile
5 findings2 high · 2 medium · 1 low Priority reflects visual impact
Manual · visual onlyScreenshot evidence + steps Recommendations, no fixes
How this sample was made: all three fictional pages were rendered in an isolated Microsoft Edge browser at both listed viewports. Findings are visible observations from those captures and simple layout checks. This is a demonstration of report format and scope, not evidence of work for a paying customer. Priority does not measure security severity or predict revenue.
The homepage’s main action sits outside the mobile viewport.
/ · Mobile · 390 × 844 px
Observed
The hero uses a fixed 580px content width. At 390px, the “Book a discovery call” button begins at x = 390px, outside the visible page. The document is 600px wide and can scroll sideways.
Reproduce
Open the fictional homepage at 390 × 844px.
Stay at the left edge of the page and inspect the hero.
Scroll horizontally to the right to reveal the call to action.
Recommended change
Use a fluid hero width and remove the button’s fixed left margin below the mobile breakpoint. Keep the primary action inside the viewport, then check 320px and 390px widths.
Proposed only · not implemented or retested
Actual fixture capture · homepage · 390 × 844 px. The action is beyond the right edge.
02
High priority
A fixed banner covers the mobile inquiry button.
/contact · Mobile · 390 × 844 px
Observed
At the bottom of the form, the fixed cookie notice overlaps the “Send inquiry” button. The fixture reserves no space beneath the content for this 102px banner.
Reproduce
Open the fictional contact page at 390 × 844px.
Scroll to the bottom of the page without dismissing the notice.
Inspect the primary form action behind the fixed banner.
Recommended change
Reserve space for the banner or present it without covering the form action. Verify the button remains visible and usable while the notice is present. This is a visual observation; submission behavior was not tested.
Proposed only · not implemented or retested
Actual fixture capture · contact page, scrolled to bottom · 390 × 844 px.
03
Medium priority
Project names lose their useful context on mobile.
/work · Mobile · 390 × 844 px
Observed
The project grid keeps two columns on a narrow screen. Each title is forced onto one line with an ellipsis; the first title has 376px of text in a 143px slot. Visitors cannot read the full project names in the cards.
Reproduce
Open the fictional work page at 390 × 844px.
Read the first two project-card headings.
Compare the shortened headings with the complete names on desktop.
Recommended change
Allow headings to wrap, or use one column at this width. Check that the full project name and link remain readable without horizontal scrolling.
Proposed only · not implemented or retested
Actual fixture capture · work page · 390 × 844 px. Titles truncate within the two-column grid.
04
Medium priority
One destination has three different primary labels.
Shared header · Desktop · 1440 × 1000 px
Observed
The same header action leads to /contact on all three pages, but its label changes from “Book a call” to “Start a project” to “Get a quote”. The wording suggests three different next steps, while the destination is the same inquiry form.
Reproduce
Open the homepage, work page and contact page on desktop.
Compare the rightmost header action on each page.
Check that each action points to the same contact page.
Recommended change
Choose one label that accurately describes the next step and use it consistently. If these are intended to be different actions, give them distinct destinations or explain the difference.
Proposed only · not implemented or retested
Homepage header · Book a callWork page header · Start a projectContact page header · Get a quote
05
Low priority
The form’s privacy helper text is easy to miss.
/contact · Desktop · 1440 × 1000 px
Observed
The small helper sentence uses #c1c8bf text on a white form background at 11px. It has much less visual distinction than the labels, even though it explains how inquiry details will be used.
Reproduce
Open the fictional contact page on desktop.
Find the sentence beneath the project field.
Compare its visibility with the surrounding labels and button.
Recommended change
Use a darker helper-text color and a more comfortable reading size. Review the result on the actual design. No WCAG conformance assessment or accessibility certification is included in this sample.
Proposed only · not implemented or retested
Actual fixture capture · desktop contact form. Helper text is intentionally light.
WHAT HAPPENS NEXT
A useful handoff for your team.
Use the list to agree what to change, assign work in your usual project tool and verify the result after implementation. These recommendations have not been implemented or retested in the fictional fixture. This report does not include implementation, functional testing, performance measurements, security testing or a compliance assessment.
