Beyond Responsive Design: Building Mobile-Optimized Websites in React
summary
Practical fixes and working tools: a top-level useTapActive hook applies a data-tap attribute with a 60–80ms delay to avoid accidental active styles while targeting 100ms responsiveness; input UX uses inputmode=decimal over input type=number and autocomplete=new-password and one-time-code to reduce typing; a Storybook add-on storybook-mobile warns about small tap targets and missing srcset; a Puppeteer-backed analyzer bundle-wizard shows third-party bloat (YouTube large), coverage heatmaps, and flags long main-thread tasks.
AI-written summary · about
chapters (19)
- 0:00Intro
- 0:12Overview
- 0:48Story
- 1:54Two types of janky
- 2:44Mobile emulator
- 3:19Tap
- 3:41Tap Quiz
- 5:16Ideal World
- 5:43Active States
- 7:29Standardizing Active States
- 8:45Tap Toggle
- 11:13Tap States
- 11:44Form Inputs
- 12:07Mobile Inputs
- 16:15Storybook Mobile
- 17:50Speed
- 18:33Pop Quiz
- 19:02SourceNav Explorer
- 22:06Conclusion
related talks
33mOne App Fits All: Building Responsive Experiences in React
26mLightning Fast React Apps
23m12 Tips For More Accessible React Apps
37mReact Tune Up
50mTips, tricks and tools for building accessible React web apps
18mThe Untouchable Web
53mDeveloping Mobile Friendly Web Apps with React and Bootstrap
58mInclusive Experiences in React Applications: Championing Neurodivergent Accessibility