# Visual / Mobile Audit — Quire Guide (quire.io/guide/)

Pages tested:
- Homepage: `https://quire.io/guide/`
- Article: `https://quire.io/guide/add-task/` ("Add Tasks & Subtasks in Quire")
- Article: `https://quire.io/guide/chart-types/` ("Chart Types in Quire")

Viewports: Desktop 1920x1080, Mobile 375x812 (iPhone UA, touch enabled).

Screenshots saved to `/Users/peggy/Documents/potix/guide/quire.io-guide-audit/screenshots/`:
- `desktop.png`, `mobile.png` (homepage, standard names for orchestrator)
- `home_desktop.png` / `home_mobile.png` (full page)
- `home_desktop_fold.png` / `home_mobile_fold.png` (viewport-only, above-the-fold)
- `article1_desktop*.png`, `article1_mobile*.png` (add-task page, incl. `article1_mobile_toc_open.png`, `article1_mobile_menu_open.png`, `article1_mobile_search_open.png`)
- `article2_desktop*.png`, `article2_mobile*.png` (chart-types page)

## Above-the-Fold Analysis

**Desktop:** H1 ("Quire Guide" / article title) is immediately visible with no scrolling. Left sidebar TOC is visible and fully rendered alongside the intro paragraph. No hero image, no marketing CTA banner — appropriate for a documentation/help-center page. Header includes search icon, Log In, and a "Sign Up For Free" button, all visible without scrolling.

**Mobile:** H1 is visible without scrolling on both the homepage and article pages. Article pages show a helpful breadcrumb trail ("Task List > Add Tasks and Subtasks") directly below the header, which doubles as the trigger for the mobile navigation drawer. The full desktop sidebar is correctly hidden and replaced by a hamburger icon + breadcrumb/TOC toggle. No layout-shift was observed at first render (see CLS below).

**Primary CTA:** There is no dedicated in-page CTA on guide content (expected for documentation), but the global "Sign Up For Free" button remains visible in the header at both viewports, and a "contact us" prompt appears at the bottom of articles ("Please contact us if you need more assistance").

## Mobile Responsiveness

- No horizontal overflow/scroll detected on any tested page (`scrollWidth === clientWidth` in all cases).
- Base body font size is 18px on both desktop and mobile — comfortably above the 16px minimum for readability without zooming.
- Hamburger menu (top-right, "toggle menu") opens a slide-in panel, but on the homepage this panel only exposes Log In / Sign Up — it does not include the guide's section navigation.
- On article pages, tapping the breadcrumb/"Task List" label (`.toc-label`) opens a separate full-height overlay containing the complete sidebar TOC (Overview, Task List, sub-items, etc.), confirming the nav is reachable, but it is a **second, differently-triggered mechanism** from the hamburger button — the two controls are easy to confuse (see Findings).
- Search icon opens an inline search input overlay correctly, with a visible input field and close (X) button.
- CLS (Cumulative Layout Shift) measured via PerformanceObserver: 0 on desktop, ~0.0006 on mobile for both homepage and article — well below the 0.1 "good" threshold. No meaningful layout-shift risk detected.

## Tap-Target Sizing

Measured actual rendered bounding boxes for interactive elements on mobile (375px viewport):
- Hamburger "toggle menu" icon: 30x30px — below the 44x44px recommended minimum.
- Search icon control: ~24x15px effective hit area — below recommended minimum.
- Mobile TOC drawer nav links (e.g. "Add a Task", "Add a Subtask"): ~95-118px wide but only ~31px tall — below the 44px height guideline, though list-item stacking limits mis-tap risk since targets don't sit side by side.
- Body/article content links are normal inline text links (single link found in sampled article body), which is expected and not a tap-target concern for prose links.
- A bulk DOM scan flagged ~170-196 "small" elements per page, but manual inspection shows most of these are the desktop sidebar's `<a>` nodes still present in the DOM (translated off-canvas rather than `display:none`) plus notification-panel/menu items that are not visible or reachable in the default mobile view — not a real-world tap-target defect, just noise in the automated count.

## Layout / Rendering

- No overlapping elements, no clipped/cut-off text, no broken images observed on any captured page/viewport.
- Images in the "Highlights" card grid scale correctly to full column width on mobile (single column stack) and desktop (3-column grid).
- Footer renders as a clean 4-column link layout on desktop and collapses to a stacked single column on mobile, with working language switcher and social icons.
- Notice/callout blocks (e.g., the purple "Charts are only available in the Professional/Premium/Enterprise plans" box on the Chart Types page) render correctly and scale to mobile width without overflow.

## Sidebar / Nav Readability (Mobile)

- The full sidebar TOC is legible and well-spaced once opened via the breadcrumb/TOC toggle (`article1_mobile_toc_open.png`), with clear section grouping (OVERVIEW, TASK LIST, etc.) and the current page highlighted in green.
- However, the TOC opens with a translucent/dimmed background showing the underlying page content bleeding through behind the panel text, which could reduce legibility contrast for some users (visible in `article1_mobile_toc_open.png`).
- Two different, non-obviously-related controls open two different mobile menus (hamburger = account/login menu; breadcrumb label = content TOC). This is a minor discoverability issue — a first-time mobile visitor may tap the hamburger expecting the guide's navigation and instead see only Log In / Sign Up.

## Summary of Issues Found

1. **Duplicate/confusing mobile menu triggers** (Medium) — hamburger icon opens account menu only; content navigation is hidden behind a separate breadcrumb tap target.
2. **Sub-44px tap targets for header icons and TOC links** (Low-Medium) — hamburger (30x30), search icon (~24x15), and TOC nav links (~31px tall) fall under the 44x44px accessibility guideline (WCAG 2.5.5 / Apple HIG).
3. **TOC drawer background legibility** (Low) — dimmed/translucent overlay allows underlying text to bleed through, minor visual noise.

## What Works Well

- No horizontal scroll or overflow on any page/viewport tested.
- Negligible Cumulative Layout Shift (CLS ~0-0.0006), indicating stable, non-janky page loads.
- H1 and intro content visible above the fold on both desktop and mobile without scrolling.
- Readable 18px base font size on mobile, no need to pinch-zoom.
- Breadcrumbs on article pages aid orientation and provide an alternate path back to section navigation on mobile.
- Responsive image/card grids and notice/callout blocks scale cleanly across breakpoints.
- Clean, well-organized footer with working language switcher, collapses gracefully to mobile.