Responsive Design for Phones, Tablets, and Desktops
Designing for Many Screens
What responsive design means
Responsive design makes a website adjust smoothly to different screen sizes, orientations, and input methods.
Core techniques
Responsive design often uses flexible layouts, fluid images, and CSS media queries. The goal is to keep content readable and usable on small and large screens.
Responsive design tools
Design mobile first
A mobile-first approach starts with the smallest screen and adds enhancements for larger screens.
Responsive design goals
| Goal | Why it matters |
|---|---|
| Readable text | Users should not have to zoom to read |
| Touch-friendly controls | Buttons should be easy to tap |
| Flexible layout | Content should not break on smaller screens |
| Fast loading | Mobile users often have limited bandwidth |
What is the purpose of a media query?
Media queries let CSS respond to screen size and other conditions.
Correct answer: To apply styles under certain conditions
What does responsive design help a website do?
Responsive sites remain usable on phones, tablets, and desktops.
Correct answer: It helps a website adapt to different screen sizes and devices.
Which approach starts with the smallest screen first?
Mobile-first begins with small screens and builds up.
Correct answer: Mobile-first