Mobile Web Feel Native

Mobile Web Feel Native

Quick Start

• Confirm target devices, browsers, and whether the app runs as a PWA/standalone.
• Reproduce on a real device or emulator and capture a short screen recording.
• Run the full checklist in references/mobile-web-feel-native-checklist.md and tag each issue as "impact" or "nice-to-have."
• Provide fixes with clear tradeoffs and validation steps.

Workflow

1. Scope and constraints

   • Identify the exact flows (login, feed, filters, detail view, checkout, maps).
   • Note accessibility requirements, brand constraints, and app shell expectations.

2. Observe and categorize

   • Classify issues using the checklist categories (input zoom, tap highlight/touch delay, overscroll, safe-area padding, selection/pointer issues, layout shift, animation jank, loading feel, scroll traps, horizontal scroll, touch targets).
   • Record reproduction steps, affected devices, and visible impact.

3. Propose fixes

   • Provide specific CSS/JS changes and explain why they improve native feel.
   • Call out tradeoffs (e.g., user-select: none scope, overscroll suppression, pinch-zoom decisions).

4. Validate

   • Re-test the exact interaction after fixes and confirm no regressions.
   • List any remaining risks or follow-ups.

Default Checks (Always Evaluate)

• Input auto-zoom and keyboard occlusion
• Tap highlight flash and touch delay
• Overscroll bounce and pull-to-refresh behavior
• Safe-area top/bottom clearance for sticky controls
• Accidental text selection on non-text UI
• Horizontal scroll edge cases
• Layout stability (CLS)
• Animation/transition performance
• Loading responsiveness (optimistic UI or immediate feedback)
• Scroll traps (maps, embedded scrollers)
• Touch target size (~44px)

Output Format

• Summary: 2–4 sentences on overall feel and highest-impact issues.
• Top Issues (Prioritized): Each item with reproduction, cause, fix, and tradeoff.
• Quick Wins: Low-effort/high-impact fixes.
• Follow-ups: Deeper refactors, instrumentation, or testing recommendations.
• Validation Plan: Concrete steps to confirm improvements.

References

• Use references/mobile-web-feel-native-checklist.md for detailed heuristics and example fixes.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.