More than half of web traffic is mobile. Sites that don't work on cell phones lose users. This guide shows you how to create responsive experiences that adapt to any screen.
What Is Responsive Design
Definition
Design that adapts to different screen sizes.
Principle
One codebase, multiple devices.
Fluid
Layouts that flow and adapt.
Why Responsive
Mobile Traffic
Most accesses are mobile.
SEO
Google prioritizes mobile-first.
UX
Unified experience.
Maintenance
One version, not multiple.
Mobile-First
Approach
Design for mobile first, expand to desktop.
Why
Mobile is more restrictive. Force prioritization.
CSS
Min-width media queries.
CSS Techniques
Media Queries
@media (min-width: 768px) { }.
Flexbox
Flexible layout, one dimension.
CSS Grid
Layout in two dimensions.
Fluid Typography
clamp() for fonts that scale.
Container Queries
Container based, not viewport.
##Breakpoints
Common
320px, 480px, 768px, 1024px, 1280px.
By Content
Define where layout breaks naturally.
Not by Device
Devices change, content breakpoints last.
Responsive Layout
Fluid Grids
Proportions, not fixed pixels.
Flexbox
Direction changes: row → column.
Grid Auto-fit
Columns that adjust.
Stack Mobile
Stack elements on mobile.
Responsive Typography
FluidType
font-size: clamp(1rem, 2vw, 2rem).
Line Length
Limit characters per line.
Hierarchy
Keep in all sizes.
Responsive Images
srcset
Multiple resolutions.
sizes
Size in different viewports.
picture
Different images per context.
Lazy Loading
loading="lazy".
Art Direction
Different cutout for mobile.
Navigation
###Desktop
Horizontal menu, dropdown.
###Mobile
Hamburger, slide-out.
###Toggle
JS to open/close.
Touch Targets
44px minimum.
##Touch vs Click
Touch Targets
Bigger for fingers.
Hover States
Don't depend on hover.
Gestures
Swipe, pinch in appropriate contexts.
Responsive Forms
Large Inputs
Easy to play.
Clear Labels
Always visible.
Keyboard Types
type="email", type="tel".
Autofill
Make it easy to fill out.
Performance Mobile
Weight
Fewer bytes for mobile.
Critical CSS
Inline CSS for above-the-fold.
JS Defer
Don't block render.
Images
Appropriate sizes.
Testing
Browser DevTools
Simulate devices.
Real Devices
Test on real cell phones.
BrowserStack
Cloud testing.
Multiple Orientations
Portrait and landscape.
CSS Frameworks
###Bootstrap
Robust grid system.
Tailwind
Responsive utility classes.
Bulma
Flexbox based.
###Custom
It could be lighter.
Common Errors
Desktop First
More difficult to adapt downwards.
Fixed Widths
Layouts that don't adapt.
Skip Tests
Do not test on real devices.
Text Unreadable
Very small fonts.
Small Touch Targets
Hard to click.
Tools
###Chrome DevTools
Device mode.
Responsively
Multiple screens simultaneously.
Polypane
Browser for devs.
Conclusion
Responsive design is a basic requirement. Adopt mobile-first, use modern CSS and test on real devices. The result is websites that work for everyone.
##FAQs
1) Is mobile-first mandatory? Recommended. Makes the process easier and prioritizes mobile.
2) How many breakpoints to use? 3-5. Based on content, not specific devices.
3) Flexbox or Grid? Both. Flexbox for one dimension, Grid for two.
4) Framework or custom CSS? For small projects, custom may be lighter.
5) How to test without devices? DevTools, BrowserStack. But test real devices important.