Responsive web design is an approach that makes web pages render well on all devices and screen sizes, from mobile phones to tablets to desktop monitors. Instead of building separate sites for different devices, one site adapts to whatever screen it's viewed on.
How Responsive Design Works
Fluid Grids
Instead of fixed pixel widths, elements use percentages:
.container {
width: 90%; /* Not 960px */
max-width: 1200px;
}
Flexible Images
Images scale with their container:
img {
max-width: 100%;
height: auto;
}
Media Queries
Apply different styles based on screen size:
/* Mobile first */
.sidebar {
display: none;
}
/* Tablet and up */
@media (min-width: 768px) {
.sidebar {
display: block;
}
}
Mobile-First vs. Desktop-First
Mobile-first: Start with mobile styles, add complexity for larger screens. Generally preferred because mobile constraints force better prioritization.
Desktop-first: Start with desktop, simplify for mobile. Can lead to cramming desktop features into mobile.
Responsive Design Best Practices
- Use relative units: em, rem, %, vh/vw instead of pixels
- Set breakpoints based on content: Not specific devices
- Test on real devices: Emulators miss touch interactions
- Consider touch targets: Buttons need to be finger-sized (44px+)
- Prioritize content: What matters most on small screens?
Common Breakpoints
While content should drive breakpoints, common ones include:
- 320-480px: Mobile phones
- 481-768px: Tablets
- 769-1024px: Small laptops
- 1025px+: Desktops
Why Responsive Matters
- SEO: Google uses mobile-first indexing
- User experience: Users expect sites to work on their device
- Maintenance: One codebase instead of multiple
- Future-proof: Works on devices that don't exist yet