Responsive design is the practice of designing and building websites so that they work well on desktop, tablet, and mobile screens without needing separate versions of the site.
Websites need to work well on mobile. Many designers now start with the mobile layout first and then expand the design for larger screens.
Good Responsive Design
- Uses flexible layouts instead of separate mobile and desktop pages.
- Maintains design and usability at all screen sizes.
- Changes the layout only when the content needs it.
Bad Responsive Design
- Lets text, images, or layouts become too wide for the screen.
- Makes important content harder to find on certain screen sizes.
- Feels like a different website on mobile and desktop.
Responsive Design Concepts
Responsive vs Adaptive
Responsive layouts change smoothly as the screen gets wider or narrower. Adaptive layouts switch between several designs made for specific screen sizes. Both can work, but responsive design usually requires less separate planning and code.
Breakpoints
Breakpoints are screen widths where new CSS styles are applied because the layout needs to change. For example, a large heading may need to become smaller when it no longer fits comfortably on a narrow screen.
Fluid Layout
A fluid layout changes with the space available. Percentage widths, max-width, Flexbox, and Grid can all help elements grow, shrink, or move without needing a fixed size for every screen.
Responsive Media
Images, videos, and other media should shrink to fit the space available. Setting a maximum width of 100% prevents them from becoming wider than the element that contains them.
Design Consistency
A website should feel like the same design on every screen, even when the layout changes.