"Response rate is lower than expected" — the first place to look is mobile UX. The majority of survey responses now come from phones. PC-designed surveys, pushed live as-is, behave poorly on mobile and bleed completions.
This article covers the concrete mobile design points.
Mobile constraints
Small screen
Phones are tall and narrow (375×667 to 414×896 dominate). On-screen information capacity is 1/3 to 1/4 of PC.
Touch-centric
Fingers are bigger than mouse cursors. Tap targets need to be 44px+ to avoid misses.
Vertical scrolling only
Horizontal scrolling is a UX failure. Everything must work in vertical scroll.
Slow keyboard input
Phone keyboards are slower than physical ones. Minimize open text.
Unreliable connectivity
Mobile networks and public Wi-Fi can be slow or intermittent. Avoid heavy images.
Foundation rules
Rule 1: Tap targets 44px+
button, input, select {
min-height: 44px;
}
Radio buttons and checkboxes — also expand the tap area.
Rule 2: Font size 16px+
iOS Safari auto-zooms when focusing an input field with font-size under 16px. To prevent this:
input, textarea {
font-size: 16px;
}
Rule 3: Labels above inputs
Side-by-side label+input works on PC; on mobile, stack vertically:
<!-- ❌ NG (cramped on mobile) -->
<label>Company</label><input>
<!-- ⭕ OK -->
<label>Company</label>
<input>
Rule 4: Specify input type correctly
<input type="email" inputmode="email"> → Email keyboard
<input type="tel" inputmode="tel"> → Numeric keyboard
<input type="number"> → Numeric keyboard
<input type="url"> → URL keyboard
Per-question-type mobile patterns
Single select (radio)
4 options or fewer → can go horizontal. 5+ → always vertical.
1–4 options: horizontal OK
5+ options: always vertical
Multi-select (checkbox)
Vertical by default. Plenty of spacing between options.
5-point scale
Labeled: "Dissatisfied 1 ─ 2 ─ 3 ─ 4 ─ 5 Satisfied"
On mobile, switch to vertical layout with each point a large tap target.
Matrix
The question type most likely to break on mobile. Multiple rows × multiple scales don't fit.
Counters:
- Don't use matrix — split into separate questions per row
- If you must use matrix, auto-switch to vertical layout on mobile
Long-form text (textarea)
Minimum rows="4". Placeholders showing an example help:
<textarea rows="4"
placeholder="e.g., I find the X feature hard to use"></textarea>
Date pickers
Use the OS-native date picker (type="date"). Avoid custom UI.
Step splitting
For long surveys, break into steps rather than cramming.
Pros
- Less information per screen → lower cognitive load
- "X steps to go" boosts completion rate
- Past answers visible as "I've made progress" feedback
Cons
- Risk of data loss between steps (backend retention required)
- More button taps
Consider splitting at 5+ questions.
Repoan's mobile setup
Repoan's forms are fully mobile-optimized by default:
- All question types auto-switch to mobile UI
- Matrix auto-converts to per-row vertical layout on mobile
- Input fields are 16px+ to prevent iOS auto-zoom
- Tap targets are 44px+
- Step-split layout is mobile-optimized
No special config required.
Load time
Image weight
Header images and logos → WebP, target under 100KB.
Cut decorations
Thank-you-screen animations and sound effects: heavy and annoying on mobile.
CDN delivery
Images and scripts via CDN. Mobile networks still feel fast.
Repoan uses Cloudflare's CDN — globally responsive.
Mobile-native design ideas
One question per screen
PCs naturally accommodate multiple questions per page. Mobile reads cleaner with one question per screen.
Swipe navigation
"Swipe right for next question" — useful for long surveys.
Avoid scroll fatigue
Overly long surveys bleed users mid-scroll. Important elements in the visible area on each step.
Reducing mobile drop-off
1. State duration up front
"3 minutes to complete" at the top alone lowers drop-off.
2. Progress bar
"3 of 10" or "30% complete" — reduces cognitive load.
3. Auto-save
Backend retention of partial progress. Allows resume after accidental close.
4. Network-error recovery
On submission failure, show a "retry" button.
Checklist
Before launch, test on phones:
- iPhone (Safari) — display + input working
- Android (Chrome) — display + input working
- Tap targets 44px+
- Input field fonts 16px+
- Matrix renders vertically
- Progress bar visible
- Thank-you page mobile-optimized
Summary
Mobile optimization keys:
- Tap targets 44px+
- Font size 16px+
- Matrix auto-vertical on mobile
- Step-split long surveys
- Test on actual phones before launch
In Repoan, all forms are mobile-optimized by default. No setup required to capture the majority of phone respondents cleanly.