Design · Intermediate · 22 min read
Mastering Responsive Design Patterns
Most visits to most sites happen on a phone. Responsive design means your layout adapts to whatever screen it lands on — this guide covers the patterns that get you there.
1. Design mobile-first
Start with the narrow screen and let the layout grow. It's easier to add columns on a wide screen than to squeeze a desktop layout onto a phone.
2. Use flexible grids
CSS grid with auto-fit columns and flexbox with wrapping handle most card layouts with no media queries at all. Reserve media queries for genuinely different layouts, not every small tweak.
3. Size tap targets for thumbs
Anything tappable should be at least 44px in both directions. Links that live inside a sentence are the exception — but menu items, buttons, and card links all count.
4. Send smaller images to smaller screens
A phone doesn't need a 2000-pixel photo. Responsive image markup lets the browser pick the right file, which keeps pages fast on mobile connections.