Mobile Responsive Polish & Lighthouse 100/100/100/100

Lighthouse Perfect Score

SpeyDocs now achieves 100 Performance, 100 Accessibility, 100 Best Practices, and 100 SEO on Google Lighthouse mobile audit. This is the maximum possible score on an emulated Slow 4G connection.

• Zero layout shift — a synchronous inline script sets the JavaScript state class before the browser’s first paint, eliminating the sidebar flash that caused a 0.466 CLS penalty.
• Zero render-blocking resources — stylesheets are inlined directly into each HTML page, removing the external CSS network request.
• Zero total blocking time — no long tasks on the main thread.

SD-SRS-RESP-1.0 Implementation

The new Responsive Shell Specification formalises mobile behaviour as a deterministic state machine over viewport width. This release implements the full specification.

• iOS viewport height correction — a custom --sd-vh property replaces native 100vh, eliminating Safari’s dynamic toolbar layout jumps.
• Touch targets — all interactive elements on mobile now meet the 44px minimum (Apple HIG compliance).
• Safe area support — viewport-fit=cover with env(safe-area-inset-bottom) padding prevents iPhone notch and home bar overlap.
• Mobile sidebar focus trap — Tab key cycles within the sidebar overlay and menu button when open, preventing focus from leaking into hidden content.
• Scroll restoration — sidebar scroll position restores after double requestAnimationFrame for layout stabilisation, with pageshow listener for Safari’s bfcache.
• Resize state normalisation — rotating the phone or resizing past the mobile breakpoint automatically closes the sidebar overlay.

Mobile Navigation Polish

• Proportional 76px header — the mobile top navigation bar is taller with balanced visual weight against content headings.
• 48px control targets — hamburger menu and theme toggle are symmetrical 48px tap boxes with proportionally scaled icons (22px burger, 24px sun/moon for perceptual weight balance).
• 40px logo — the SpeyBooks wordmark scales proportionally to the header height with automatic width scaling.
• Compact layout — the “API Reference” text link is hidden on mobile (redundant with sidebar navigation), freeing horizontal space for the logo and controls.

Content Overflow Fixes

• Callout code blocks — <pre> blocks inside callouts now wrap long lines with dark code block styling instead of overflowing the page.
• Endpoint URLs — long API paths on endpoint detail pages wrap with word-break instead of blowing out the content column.
• Endpoint summary list — on mobile, the full URL is hidden and the endpoint name displays prominently next to the method badge.

Structural Improvements

• Meta descriptions — every page now has a <meta name="description"> tag, completing the SEO requirements.
• Heading hierarchy — sidebar category titles changed from <h3> to <div>, preserving the semantic document outline for screen readers.
• Duplicate copy button removed — the progressive enhancement script no longer injects copy buttons since they are now rendered inline by the code block component.
• Backdrop aria state — the mobile backdrop correctly toggles aria-hidden in sync with sidebar open/close state.