Have you ever experienced this?
You visit a website on your phone and need to fill out a form. When you tap the text field, the screen automatically zooms in. The layout breaks, horizontal scrolling appears, and you have to drag and drop to type.
This happens a lot on iOS and is more common than you might think. The reason? CSS.
On iOS, when the font size in input fields is smaller than 16px, the browser thinks it’s too small and zooms in to “help.” The problem is that this breaks the interface.
It may seem like a technical detail, but small flaws like these turn simple tasks into frustrating experiences.
It’s not just about “making it fit”
When people talk about responsive design, it’s often about adapting desktop layouts to smaller screens by changing the grid, breaking columns, and using media queries. That classic move of reorganizing elements so they simply fit on mobile.
But responsive design isn’t just about “making it fit.” Turning a desktop page into a stacked version for mobile doesn’t guarantee a good experience. The context changes, the behavior changes — so design needs to change too.
A mobile interface can look “right” visually and still be frustrating to use.
Mobile first is a mindset
More than adapting layouts, it’s about starting with what’s essential. That’s why I created a mobile UX checklist to help avoid these pitfalls and improve the real user experience.
Mobile UX Checklist
1. Layout & Structure
- Is the content reordered by priority, not just stacked columns?
- Are essential elements immediately visible (above the fold)?
- Is there enough spacing to avoid accidental taps?
- Is input zoom prevented (minimum font size 16px on iOS)?
2. Interaction & Touch
- Do primary buttons follow the recommended size (min. 44px by 44px)?
- Are the most important actions placed within thumb reach for one-handed use?
- Are additional gestures (swipe, tap & hold) intuitive and not conflicting with default navigation?
- Are links spaced properly to avoid mis-taps?
- Are scroll and swipe animations smooth?
3. Readability & Scannability
- Is the text broken into short, easy-to-read blocks?
- Are there headings, subheadings, and lists to guide reading?
- Does color contrast ensure legibility even in bright environments?
- Can users zoom into images for better viewing?
- Are there too many animations or effects harming usability?
4. Performance & Loading
- Are images optimized for web and mobile?
- Have unnecessary scripts/resources been reduced to avoid slowness?
- Does the site work well on slow or unstable connections?
5. Context of Use
- Is the design comfortable for one-handed navigation?
- Is the site tolerant to interruptions (e.g., form data isn’t lost when switching apps)?
- Do key interactions avoid relying solely on audio or full attention?
In summary:
✔️ Responsive layout ≠ Responsive UX
✔️ Mobile requires clear choices, adapted interactions, and direct content
✔️ Starting with mobile helps create more focused experiences across devices
Want to test your mobile design? Try using your own product one-handed, on the street, with the sun hitting your screen. If it still works well, congrats — you’re on the right track. 😉