Responsive design uses flexible layouts, images, and CSS media queries to adapt content to any screen size. The same HTML serves all devices, with CSS controlling the presentation.
Responsive design principles
Fluid grids
- Use percentages instead of fixed widths
- Columns adjust to screen width
- Content reflows naturally
Flexible images
img {
max-width: 100%;
height: auto;
}
Media queries
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
Responsive vs adaptive
- Responsive: Fluid layouts that adjust continuously
- Adaptive: Fixed layouts that change at breakpoints
Common breakpoints
- Mobile: 320-480px
- Tablet: 481-768px
- Laptop: 769-1024px
- Desktop: 1025px+
Responsive design and CLS
Poorly implemented responsive design can cause CLS:
- Images without explicit dimensions
- Dynamic content loading
- Fonts causing layout shifts
Always reserve space for content to prevent shifts.
Related Terms
Cumulative Layout Shift (CLS)
A Core Web Vital that measures visual stability by quantifying how much page content unexpectedly shifts during loading.
Image Optimization
The process of reducing image file sizes and improving delivery to enhance web performance without significantly affecting visual quality.
Mobile-Friendly
A web design approach where pages are optimized for viewing and interaction on mobile devices with smaller screens and touch interfaces.
Page Experience
A set of signals that Google uses to measure how users perceive the experience of interacting with a web page beyond its pure information value.