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
"Phone-screens" is the iPhone 12 Pro logical viewport (844 px tall). It's the unit a user actually experiences when scrolling.
| Page | Phone-screens today | Pixels of content today |
|---|---|---|
| 00 · Home Page | 17 | 10,940 |
| 01 · Care Home Detail | 27 | 17,910 |
| 02 · Care Home List | 15 | 9,785 |
| 03 · Promo Landing | 14 | 8,968 |
| 04 · Careers Home | 17 | 10,907 |
| 05 · Vacancy List | 6 | 3,569 |
| 06 · Job Detail | 12 | 7,497 |
Findings count
| Type | Count |
|---|---|
| Total findings | 46 |
| Cross-page findings | 11 |
| Page-specific findings | 35 |
| High severity | 10 |
| Medium severity | 19 |
| Low severity | 17 |
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
- Problem: a one-sentence description of what's there today
- Impact: potential reduction in pixels where measurable, or a short note for non-density findings
- On the page: screenshots of the relevant region(s), with the element being discussed highlighted where possible
Iteration workflow
Each finding lives in its own markdown file with structured frontmatter. The audit is intended to be a living document during the internal and client review cycles, edits and updates flow through as the discussion develops.