Mobile Polish — Conversion & Comfort Audit Tracker

Findings from a focused mobile-experience review (≤768px, with extra attention to 375px small-phones). Desktop is considered done. Each item records the where, why, and the concrete change.

Important context for prioritisation: a dog-walking business is a jobs-to-be-done service that users research on the couch. Mobile conversion lower-bound is "they Meet & Greet". So the dial-movers are: thumb-reach for the booking CTA, legibility, friction-free form, and trust signals visible on the first scroll.

High — direct conversion impact

Hero buttons stack awkwardly at ~375px
- File: src/lib/styles/responsive.css (new ≤480px block)
- Implementation: At @media (max-width: 480px) the hero buttons flip to flex-direction: column; gap: 12px; and each button becomes full-width with padding 16px 24px. The 768px-specific padding-right: 18px on the buttons row and the margin-right: 12px on :last-child are both reset so the two CTAs read as a clean stacked stack.
- Why: At 375px the side-by-side primary + outline CTAs were wrapping unevenly and the primary's prominence collapsed.
Mobile header phone button is low-contrast and small
- File: src/lib/styles/responsive.css:88-100
- Implementation: Background bumped from rgba(33, 48, 33, 0.06) → 0.10; padding 9px 12px → 11px 14px (and at ≤480px, 10px 12px); font-weight: 600; min-height: 44px to meet the touch-target minimum; icon size also bumped from 13px → 14px.
- Why: The tap-to-call on the mobile header is one of the highest intent actions on the site. It now reads as a button rather than a barely-visible label.
Booking form inputs trigger iOS zoom-on-focus
- File: src/lib/styles/responsive.css:453-462
- Implementation: Input font-size: 15px → 16px at ≤768px. Comment added explaining the iOS-Safari 16px threshold so a future edit doesn't accidentally drop it again.
- Why: Below 16px Safari auto-zooms on focus; the page jolts every time a field is tapped. Critical at the booking conversion step.
Testimonial carousel arrows hard to reach at 375px
- File: src/lib/components/TestimonialsSection.svelte (mobile rules lines ~640-660)
- Current: arrows pinned to bottom: 24px inside a stage with padding-bottom: 116px. Visually at the bottom of a tall card — requires deliberate stretching.
- Why: The carousel feels passive. Users don't realise they can advance it; testimonials sell — losing that engagement matters.
- Fix: Lift arrows on small screens:
```
@media (max-width: 480px) {
  .testimonial-arrow { bottom: 80px; }
}
```
No persistent "Book Meet & Greet" CTA on mobile after hero scrolls past
- Files: src/lib/components/MobileBookBar.svelte (new), src/routes/+layout.svelte (mount), src/lib/styles/responsive.css (body { padding-bottom: 64px } at ≤768px).
- Implementation v2 — Airbnb-style soft-container, scroll-triggered:
  - Soft container: a translucent white tray (rgba(255, 255, 255, 0.96) with backdrop-filter blur) sits flush at the bottom with a thin top hairline and a soft shadow. The brand-yellow CTA pill lives inside the tray, not as the tray itself — so the action stays unmistakable but the surrounding chrome is calm.
  - Scroll-triggered: the bar slides up + fades in only after the user has scrolled ~480px (≈ one mobile viewport, hero out of view). Slides back out below ~120px to avoid flicker near the top. prefers-reduced-motion respected — the slide is dropped, only the opacity fade remains.
  - Hidden on /contact-us and /booking (already in the form).
  - Resets on navigation: afterNavigate resets visible = false so each new page starts hidden until the user has earned it again.
  - Accessibility: aria-hidden toggles with visibility; CTA tabindex flips to -1 while hidden so keyboard users don't stumble onto an off-screen control; pointer-events: none while hidden so the user can't accidentally tap it during the fade.
  - Safe-area aware: env(safe-area-inset-bottom) so iPhones with the home-bar gesture area get correct spacing.
- Body bottom-padding of 64px on mobile keeps the footer from sitting behind the bar when it's visible at the bottom of long pages.
- Why: Sticky mobile CTAs are a validated conversion pattern (Airbnb, Booking.com, etc.), but the v1 full-yellow bar was tonally wrong for Goodwalk — it competed with the calm brand voice and dominated the screen permanently. v2 keeps the conversion benefit (one-tap booking, always one swipe away after engagement) without yelling.

Medium — legibility & polish

Hero title can wrap awkwardly at 375px
- File: src/lib/styles/responsive.css (≤480px block)
- Implementation: At ≤480px the desktop H1 drops to 32px / line-height 1.12 and the dedicated .hero-heading-mobile element drops to 30px / 1.12 (it was 33.5px). The two-line "Unleashing Fun in / Your Dog's Day!" now sits comfortably with breathing room above the subtitle.
- Why: Previous 38px / 33.5px sizings were a hair too big for 375px; line-2 felt cramped against the subtitle.
Body text 15px feels small on mobile (and on ultra-wide desktop)
- File: src/lib/styles/responsive.css (≤768px body rule)
- Implementation: body { font-size: 16px; } at ≤768px, with a comment noting the iOS-Safari 16px zoom threshold so this rule isn't accidentally undone.
- Desktop (≥769px) still inherits 15px from base.css for now — the ultra-wide bump is tracked separately at the bottom of this file so it can be reasoned about independently (clamp vs. breakpoint).
- Why: 16px is the modern legibility standard on mobile, dovetails with the iOS zoom-on-focus rule for inputs, and reduces read fatigue on long pages (about, FAQ answers, legal).
FAQ summary tap target too small
- File: src/lib/styles/sections.css (.faq summary rules)
- Current: just text height (~22-26px) — below the 44px minimum.
- Fix:
```
.faq summary {
  padding: 12px 0;
  min-height: 44px;
  display: flex; align-items: center;
}
```
Booking service-option chips wrap awkwardly at 375px
- File: src/lib/styles/responsive.css:468-470
- Fix at ≤480px: 2-up grid with tighter gap:
```
.booking-service-options { gap: 10px 12px; }
.booking-toggle-option { flex: 1 1 calc(50% - 6px); }
```
Footer social icons spaced too tight for thumbs
- File: src/lib/styles/sections.css (.social-links { gap: 14px })
- Current 14px gap with 40px icons → centres are 54px apart. Apple HIG wants 8px+ between targets after the 44px minimum.
- Fix:
```
@media (max-width: 768px) { .social-links { gap: 18px; } }
```
Pricing cards stack to 1-col with multiple "Book" buttons in a row
- File: src/lib/components/PricingPage.svelte (and ServiceLandingPage plan grids)
- Why: After stacking, the user sees Plan → Book → Plan → Book → Plan → Book in vertical sequence. The repetition reads as noise rather than choice; the "popular" anchor disappears.
- Fix (opinionated): on mobile, only the popular plan keeps its CTA button. Other plans show a smaller "Choose this plan" link instead, or no per-card CTA at all (a single CTA appears under the grid):
```
@media (max-width: 768px) {
  .pricing-plan-card:not(.pricing-plan-popular) .pricing-plan-cta {
    display: none;
  }
}
```
  Then keep the existing under-grid .service-plan-reassurance pill and add a single "Book a Meet & Greet" button below it.
Mobile nav header is too tall — eats above-the-fold real estate
- File: src/lib/styles/responsive.css:74
- Current: nav { padding: 20px 24px; } + 25px logo = ~65px header. On iPhone 13 (844px), this leaves ~380px for hero before scroll — less than what the Goodwalk dog-image needs to feel like a hero.
- Fix at ≤480px:
```
nav { padding: 14px 20px; }
.logo img { height: 22px; }
```

Low — incremental polish

Hero top padding generous at 375px
- File: src/lib/styles/responsive.css:179
- Reduce hero padding-top from 50px to 32px at ≤480px.
Intro trust badge feels edge-to-edge at 375px
- File: src/lib/styles/responsive.css:296-301
- Add padding: 18px 16px; margin: 0 12px; at ≤480px.
Testimonial quote mark too large at 375px
- File: src/lib/components/TestimonialsSection.svelte:~595
- Current: 44px. Reduce to 36px at ≤480px.
Booking form labels could shrink slightly at 375px
- File: src/lib/styles/responsive.css:450
- Optional: 16px → 15px at ≤480px to give field width back to the input value (where it actually matters for legibility).
No scroll-to-top affordance on long pages (booking, pricing)
- Currently absent. Low priority but helpful when users have scrolled past the booking form and want to re-read service details. Could be folded into the same sticky-book-bar work above (one bar, both jobs).

Open from elsewhere

Ultra-wide desktop body font feels small (noted by user)
- Currently body { font-size: 15px } (base.css:15). On ≥1800px screens with the --max-w already widening (per the 1800px breakpoint), 15px in long-form sections (about, FAQ answers, legal) becomes uncomfortable.
- Suggested fix: bump to clamp(15px, 0.95vw, 17px) on body, OR introduce a @media (min-width: 1600px) { body { font-size: 17px; } }. Either keeps the desktop ≤1599px experience identical and only expands type when there's genuinely more reading width.

Deliberately not actioning

Drop reveal animations on mobile to "save bandwidth". They're IntersectionObserver-driven, cost nothing perceivable, and add brand polish. Removing them would make the mobile site feel cheaper for no measurable performance gain.
Replace the testimonial carousel with a stacked list on mobile. Tempting (carousels famously hide content), but the carousel is central to the brand's "see real dogs" pitch. Better to fix the arrow reachability and let the autoplay do the work.

Suggested order of attack

If you want one batch that moves the dial: High items 1, 2, 3, 5 together is roughly an hour of work — they hit the hero, the header tap-to-call, the booking form's biggest mobile bug (zoom-on-focus), and add the sticky CTA. That's the package I'd ship first. Item 4 (carousel arrows) is a one-line fix once you're already in responsive.css.

The Medium list is best as a second pass — body-text bump, header-padding reduction, FAQ tap-target, and pricing-card-CTA dedupe all compound into a noticeably more "intentional on mobile" feel without any structural change.

11 KiB Raw Blame History