Goal
Test the application on mobile viewports to find layout and UX issues that only appear on smaller screens.
Viewports to test
- **Mobile:** 375 × 812 (iPhone SE / small Android)
- **Tablet:** 768 × 1024 (iPad)
---
1. Set mobile viewport (375px)
1. Open the app at 375px width
2. **Check navigation:**
- Is there a hamburger menu or collapsed nav?
- Do all navigation links work?
- Is anything cut off horizontally (requires scrolling left/right)?
2. Homepage / landing
3. Scroll through the homepage
4. **Report:** Any text that overflows its container? Any images that break the layout?
3. Forms & inputs
5. Find and tap a text input (search, sign up, etc.)
6. On mobile, the keyboard will open
7. **Report:**
- Is the submit button still visible above the keyboard?
- Does the page scroll to show the focused input?
- Are any inputs too small to tap?
4. Interactive elements
8. Check all buttons and links — tap each one
9. **Report:**
- Any button with a tap target smaller than 44×44px? (feels too small to tap)
- Any elements that require precise tapping?
5. Modals & overlays
10. If the app has modals or drawers, open one
11. **Report:**
- Can it be closed easily on mobile?
- Does it take up the full viewport correctly?
- Is the close button reachable without scrolling?
6. Switch to 768px
12. Resize to 768px width and repeat the key checks
13. **Report:** Any elements that work at 375px but break at 768px, or vice versa?
7. iOS-specific
14. Look for: inputs that zoom in (font-size < 16px), position: fixed elements that disappear behind the address bar
15. **Report:** Any zoom-on-focus behavior?
What to report
- Specific elements that overflow or are hidden
- Exact pixel width where layout breaks (if you can determine it)
- Any interaction that required multiple taps