Responsive Design Isn't Just Shrinking: A Mobile Experience Checklist

Open your analytics dashboard and look at traffic sources: roughly seventy percent comes from phones — that's the ballpark for most Taiwanese websites. Yet many sites' "mobile version" does exactly one thing: shrink the desktop layout proportionally to fit a small screen. Technically that's called responsive (RWD); experientially it's a disaster: text too small to read without zooming, buttons too small to hit accurately, forms that make you want to throw your phone halfway through.

The point of RWD was never "the layout doesn't break." It's "still usable with a finger, on the move, on a flaky connection." Before every delivery we run this checklist on real devices — not simulators, actual phones. Here's the full version.

Touch and hit areas: a finger is not a mouse

• Tappable areas at least 44×44 points: that's the floor in Apple's Human Interface Guidelines. Text links too small, buttons too narrow, and users mis-tap — mis-tap twice and they're gone.
• Spacing between targets: two buttons pressed together is an invitation to mis-tap. Delete and Confirm, above all, must never be neighbors.
• Key actions in the thumb zone: holding a phone one-handed, the thumb comfortably reaches the lower-middle of the screen. Putting your primary action button in a top corner is making the user's hand suffer.
• Don't depend on hover: there is no "mouse over" on a phone. Menus that only expand on hover, tooltips that only show on hover — on mobile, those features simply don't exist.

Readability: don't make people pinch-zoom to read

• Body text at least 16px: below that, most people have to zoom to read comfortably. And iOS Safari auto-zooms the page on input fields smaller than 16px, throwing the layout off entirely.
• Line length and line height: too many characters per line is tiring; cramped line spacing reads like a wall of text. Shorter paragraphs are always right on a phone.
• Contrast: light gray text on white looks elegant in the design file — on a phone screen in direct sunlight it's invisible ink.

Forms: the highest-attrition last mile

Forms are the disaster zone of mobile UX, and also the step closest to conversion — worth checking on their own:

• Fewer fields, always: every extra field loses another batch of people. Ask yourself: is this field truly required right now?
• Summon the right keyboard: a phone field should bring up the number pad, an email field a keyboard with the @ sign. It's one line of code, and the difference is enormous.
• Show errors in place: submit, full page reload, everything typed is gone, and the only message is "a field has an error" — forms like this murder conversion rates daily.
• Autofill-friendly: let the browser fill in name, phone, and address automatically. Users' patience for typing on a phone is far smaller than you think.

Mobile isn't a thumbnail of desktop — it's a different context of use: one hand, in motion, liable to be interrupted at any moment. Designing for that context is what RWD means.

Loading and performance: mobile networks won't wait for you

• Serve images at the size needed: loading desktop-sized images on a phone is the most common — and most needless — waste.
• Show primary content first: a 4G signal on the subway doesn't give you the luxury of loading everything before displaying. Above-the-fold content must appear first.
• No layout jumps: images and ads without reserved space shove the button you were about to tap — exactly the behavior Core Web Vitals punishes; details in site speed is conversion rate.
• Restrain the popups: an elegant desktop modal often covers the entire phone screen with a close button too small to hit. Google applies explicit ranking penalties for intrusive interstitials.

The final gate: test on real devices

A browser's device simulator can only show layout — not real touch feel, keyboard behavior, or network latency. Our delivery process requires a full run-through on an actual iPhone and an actual Android phone — from landing, through browsing, to submitting a form. This checklist looks fussy, but behind every line are visitors who left. If you open your own site on your phone and any section above makes you wince, you're not being picky — the site owes you repairs. Talk to us, or at least hand this checklist to your development team.