Methodology & data
How the audit was carried out, the standards applied, and links to the raw data behind every finding.
Viewport
All pages were captured on iPhone 12 Pro at 390×844 logical pixels, 3× device-pixel ratio, the standard reference viewport across the brief. Screenshots were taken using a headless WebKit instance to match real Mobile Safari behaviour.
Standards applied
| Standard | Minimum | Applied to |
|---|---|---|
| WCAG 2.5.8 AA: Target Size (Minimum) | 24×24 px | All interactive elements |
| WCAG 2.5.5 AAA: Target Size (Enhanced) | 44×44 px | Recommended for primary actions |
| iOS Human Interface Guidelines | 44×44 pt | All tap targets |
| WCAG 1.4.4: Resize Text | 16 px floor | Body copy |
| WCAG 1.4.3: Contrast (Minimum) | 4.5:1 | Normal text |
| Core Web Vitals: CLS | ≤ 0.1 | Image dimension declaration |
Programmatic scans
The following measurements were captured programmatically across all six pages and feed every finding here:
- Touch target audit: every interactive element measured against 24×24 (AA) and 44×44 (AAA / iOS) minimums
- Layout shift exposure: count of
<img>and<iframe>elements without declared dimensions - Horizontal scroll: programmatic check for any element wider than the viewport
- Truncation: count of CSS
text-overflow: ellipsisand-webkit-line-clampinstances - Density baseline: total page height in logical pixels and viewport count, plus inverse-panel inventory
- Typography distribution: every computed
font-sizeon the page - Heading outline: full DOM heading list with positions, used for hierarchy / a11y checks
Per-page measurements
| Page | Today (px) | Target (px) | Reduction | Viewports today |
|---|---|---|---|---|
| 01 · Care Home Detail | 17,910 | 10,500 | −41% | 27 |
| 02 · Care Home List | 9,785 | 5,200 | −47% | 15 |
| 03 · Promo Landing | 8,968 | 4,800 | −46% | 14 |
| 04 · Careers Home | 10,907 | 7,800 | −28% | 17 |
| 05 · Vacancy List | 3,569 | 3,200 | −10% | 6 |
| 06 · Job Detail | 7,497 | 3,400 | −55% | 12 |
Findings count
| Type | Count |
|---|---|
| Total findings | 58 |
| Cross-page findings | 14 |
| Page-specific findings | 44 |
| High severity | 11 |
| Medium severity | 30 |
| Low severity | 16 |
What's not in scope
The brief is laser-focused on density, scroll, touch, layout-shift, navigation, and typography. The audit found other issues (brand voice, card-pattern aesthetics, content tone, list-pattern inconsistency) that are real but not in scope here. They appear in each per-page document's "Off-brief observations" appendix so the team can pick them up later, but they don't dilute the brief here.
How to read a finding
Every finding has the same shape:
- ID: Fpage.number for page-specific (e.g. F6.1) or C-theme.n for cross-page (e.g. C-CARD-LIST.1)
- Severity: High, Medium, Low, or Note (the last is an informational benchmark)
- Dimension: which brief dimension it falls under
- Pages affected: for cross-page findings, the list of pages where the pattern occurs
- Impact: quantified reduction in pixels where measurable, or a short note for non-density findings
- Catalyst components: the existing components that resolve the finding
- Problem and Fix: one sentence each
Iteration workflow
Each finding lives in its own markdown file with structured frontmatter. To update a finding, edit the file and push to git; Cloudflare Pages rebuilds in ~30 seconds. The audit is intended to be a living document during the internal and client review cycles.