The common mistake
People add @media (max-width: 768px) and then do:
- Shrink the font sizes
- Turn three columns into one
- Hide the modules judged "unimportant"
That is not responsive design. That is squeezing the desktop page into a small screen.
What actually needs redesigning
1. Navigation is not shrunk, it is reorganised
On desktop a horizontal menu is fine. On a phone it becomes a drawer — and the drawer needs to be reachable with a thumb, which means bottom, not top-left.
2. Information hierarchy changes
Desktop has room to show many things at once. Mobile shows one thing and makes you scroll. So the question changes from "what fits" to "what is most important first".
3. Interaction changes
Hover does not exist on touch. Anything revealed on hover must be visible or tap-reachable. Hit targets grow from 24px to 44px.
4. Line length changes
A comfortable line is 45–75 characters. On a 390px screen that is achieved with 15–16px type and 20px side padding. Reusing the desktop 16.5px with 28px padding gives you 30 characters per line — technically readable, practically painful.
How to actually check
Do not resize a browser window. Use real device emulation at 320, 360, 390, 414 and 430 CSS pixels, and check for horizontal overflow programmatically, not by eye.
Then read a full page on a phone, in one sitting. Anything that makes you scroll back up to remember what you were reading is a hierarchy problem.
Comments