Mobile UX Rules
Judge Phone TestThree rules our team follows for mobile-first design and phone testing.
Rule 1: Thumb-Friendly Tap Targets
All interactive elements (buttons, links, form fields) are at least 44x44px. The kick counter button is 160px diameter. The contraction timer button is 180px. Emergency button floats at bottom-right within thumb reach.
Rule 2: Responsive Layout First
Bootstrap 5 grid with mobile breakpoints (col-6, col-md-3). All pages tested at 375px width (iPhone SE). Tables use table-responsive wrapper. Long text truncated or wrapped. The daily tracking page stacks the counter and history vertically on mobile.
Rule 3: Minimal Data Entry
Voice input reduces typing. Large tap buttons (kick counter, contraction timer) instead of forms. Language auto-detected from browser. Due date uses native date picker. The kick counter requires zero typing -- just tap.