109 lines
3.7 KiB
Markdown
109 lines
3.7 KiB
Markdown
# Responsive Checklist
|
|
|
|
Run through every item before declaring a page done.
|
|
|
|
## Viewports to verify
|
|
|
|
- **320 px** (iPhone SE 1st gen, smallest practical)
|
|
- **375 px** (iPhone SE 2/3, iPhone 13 mini)
|
|
- **390 px** (iPhone 14/15/16 default)
|
|
- **414 px** (iPhone Plus)
|
|
- **768 px** (iPad portrait, `md:` breakpoint)
|
|
- **1024 px** (iPad landscape / small laptop, `lg:` breakpoint)
|
|
- **1440 px** (full laptop)
|
|
|
|
## Global guards
|
|
|
|
- [ ] `body { overflow-x: hidden }` in `globals.css`.
|
|
- [ ] No `min-w-[...]` on root containers.
|
|
- [ ] All decorative absolute elements live inside `relative isolate overflow-hidden` parents.
|
|
- [ ] `max-w-*` containers always paired with `mx-auto px-6 md:px-10`.
|
|
|
|
## Header / Nav
|
|
|
|
- [ ] Logo left, menu/CTA right on mobile.
|
|
- [ ] Hamburger button is `size-10` minimum (touch target).
|
|
- [ ] Mobile menu drawer closes when a link is clicked.
|
|
- [ ] No sticky-nav overlap on anchored sections `scroll-mt-24 md:scroll-mt-28` on `<Section>`.
|
|
- [ ] Logo height responsive: `h-11 sm:h-14 md:h-16`.
|
|
|
|
## Hero
|
|
|
|
- [ ] H1 clamp: `clamp(2.4rem, 7vw, 6.4rem)` never larger upper bound.
|
|
- [ ] `leading-[1.0]` on serif H1 (not `0.95` clips ascenders).
|
|
- [ ] Top padding generous: `pt-32 sm:pt-36 md:pt-44` (clears sticky nav + breathing room).
|
|
- [ ] CTAs use `flex flex-wrap items-center gap-4` so they stack on narrow screens.
|
|
- [ ] Stats panel: collapse 1-col-tall mobile layouts to a horizontal 3-col compact row.
|
|
|
|
## Cards & grids
|
|
|
|
- [ ] Mobile: `grid-cols-1`. Tablet: `sm:grid-cols-2`. Desktop: `lg:grid-cols-N` matched to card count.
|
|
- [ ] Avoid `lg:grid-cols-3` for a 5-card list (leaves orphan) use 5 or 2-row layout matched to count.
|
|
- [ ] Aspect-ratio used over fixed heights: `aspect-[4/3]` or `aspect-[3/4]`.
|
|
|
|
## Typography
|
|
|
|
- [ ] No tracking > `0.22em` on small labels.
|
|
- [ ] `text-balance` on h1/h2.
|
|
- [ ] `text-pretty` on body paragraphs.
|
|
- [ ] Long tokens (cert numbers, emails) use `break-all` or `break-words` to wrap.
|
|
|
|
## Images
|
|
|
|
- [ ] `next/image` with `sizes` attribute matched to layout.
|
|
- [ ] Hero LCP image gets `priority`.
|
|
- [ ] `object-cover` only when crop is visually intentional.
|
|
- [ ] `object-contain` for logos.
|
|
- [ ] Alt text meaningful never "image" or filename.
|
|
|
|
## Forms
|
|
|
|
- [ ] Field grid: `grid gap-5 sm:grid-cols-2` for first/last + email/phone.
|
|
- [ ] Inputs `text-base` (16 px+) on mobile to prevent iOS zoom-on-focus.
|
|
- [ ] Submit button respects pending state w/ spinner.
|
|
- [ ] Field errors render below field, not in a popup.
|
|
- [ ] Success/error banner renders outside button.
|
|
|
|
## Motion
|
|
|
|
- [ ] `useReducedMotion()` checked in every component using motion props.
|
|
- [ ] Heavy halos / parallax skipped when reduced-motion is on.
|
|
- [ ] Marquee paused when reduced-motion is on (or replaced with grid).
|
|
|
|
## External links
|
|
|
|
- [ ] All `<a target="_blank">` carry `rel="noopener noreferrer"`.
|
|
- [ ] WhatsApp / Instagram / store badges have `aria-label`.
|
|
- [ ] App badges sized 132 px (footer) / 140-160 px (CTA).
|
|
|
|
## Footer
|
|
|
|
- [ ] No duplicated link labels across columns.
|
|
- [ ] Privacy Policy only in Legal column.
|
|
- [ ] Agency credit row sits below copyright, subtle.
|
|
- [ ] Watermark contained via `overflow-hidden` on footer root.
|
|
|
|
## Accessibility
|
|
|
|
- [ ] Every interactive element keyboard-reachable.
|
|
- [ ] `focus-visible:` rings on buttons, inputs, anchors.
|
|
- [ ] Modal/lightbox: scroll-locked body + `Escape` closes + arrows navigate.
|
|
- [ ] Color contrast checked (`text-bone` on obsidian = 16:1).
|
|
|
|
## Final smoke test
|
|
|
|
```bash
|
|
npx tsc --noEmit # clean
|
|
curl -s -o NUL -w "%{http_code}" http://localhost:3000/... # 200 on every route
|
|
```
|
|
|
|
Grep for placeholder leaks:
|
|
|
|
```bash
|
|
grep -rn 'href="#"' src/
|
|
grep -rn 'href=""' src/
|
|
grep -rn 'href="/#' src/
|
|
```
|
|
|
|
Should all return zero (unless intentional same-page anchors with matching IDs).
|