Responsive Design
Learn how to create websites that adapt to different screen sizes and devices.
🎯 📱 One Web, Many Screens
- How many different devices do you use to browse the web each day?
- Have you ever visited a website on your phone that was clearly designed only for desktop?
- What happens when you resize your browser window on a well-designed website vs. a poorly designed one?
Learning Objectives
By the end of this lesson, you'll be able to:
- ✓ Apply Apply mobile-first design principles to create adaptive layouts
- ✓ Write media queries for different screen sizes and device capabilities
- ✓ Choose appropriate responsive units (%, vw, vh, rem) for flexible sizing
- ✓ Implement responsive images with srcset and picture elements
- ✓ Build common responsive patterns like hamburger menus and card grids
- ✓ Test and debug responsive designs across multiple devices
- ✓ Optimize typography and spacing for different screen sizes
Prerequisites: Understanding of basic CSS and modern CSS features (covered in previous tutorials)
Introduction to Responsive Design
Responsive web design is an approach that makes web pages render well on a variety of devices and window or screen sizes. In this tutorial, we'll learn how to create responsive layouts that adapt to different viewing contexts.
What We'll Cover
- Mobile-first design principles
- Using media queries effectively
- Working with responsive units
- Handling images responsively
- Implementing common responsive patterns
- Testing responsive layouts
Note: This tutorial builds on concepts from the Modern CSS tutorial. Make sure you're comfortable with CSS Custom Properties and modern units before proceeding.
Mobile-First Design
Mobile-first design is an approach that starts with designing for mobile devices first, then progressively enhances the design for larger screens.
Understanding Mobile-First
Key Principles
- Start Small: Design for mobile screens first
- Progressive Enhancement: Add features as screen size increases
- Content Priority: Focus on essential content and features
- Performance: Optimize for mobile devices and connections
Desktop-First vs Mobile-First Approach
❌ Desktop-First (Old Way)
✅ Mobile-First (Modern Way)
⏸️ Pause & Check: Do You Understand?
Before moving forward, can you answer these?
- Why is mobile-first design considered best practice today?
- When should you use min-width versus max-width media queries?
- How do relative units (%, rem, vw) help with responsiveness?
- What techniques keep responsive images performant?
Check Your Answers
- Starting with mobile ensures core content, performance, and usability on the smallest screens. You progressively enhance for larger viewports instead of trying to retrofit desktop layouts for phones.
- Use min-width for mobile-first designs (styles apply at and above a breakpoint). Use max-width when you need specific overrides below a size or when maintaining legacy desktop-first code.
- Relative units scale with the viewport or root font size. For example, vw makes hero sections fluid, rem keeps typography proportional, and percentages allow fluid grids without hard pixel values.
- Use srcset/sizes or the <picture> element to serve appropriately sized images, compress files, and lazy-load non-critical media so mobile devices download only what they need.
How confident are you with this concept?
😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!
Mobile-First in Practice
Example: Card Component
Card Title
This card demonstrates mobile-first design principles.
Mobile-First Benefits
- Better Performance: Lighter code for mobile devices
- Focused Design: Forces prioritization of content
- Future-Proof: Easier to adapt to new device sizes
- Maintainable Code: Clearer structure and fewer overrides
Common Patterns
Media Queries
Media queries allow us to apply CSS rules based on device characteristics, such as screen width, height, or device capabilities.
Basic Media Queries
Syntax and Structure
Common Media Features
width,min-width,max-widthheight,min-height,max-heightorientation(portrait/landscape)aspect-ratiodisplay-mode(fullscreen, standalone, etc.)
Common Breakpoints
Standard Breakpoints
Resize window to see changes
Important: These breakpoints are guidelines, not strict rules. Always design based on your content's needs rather than specific device sizes.
Modern Media Query Features
New Capabilities
Preference Queries
Adapt to user preferences like dark mode and reduced motion
Range Syntax
Use modern range syntax for cleaner media queries
Custom Media Queries
Create reusable query aliases (Coming soon)
Best Practices
- Use mobile-first approach with
min-width - Keep media queries organized and consistent
- Consider user preferences and accessibility
- Test across different devices and orientations
Responsive Units
Responsive units allow elements to scale fluidly based on viewport size or parent element dimensions.
Relative Units
Common Relative Units
| Unit | Relative To | Common Uses |
|---|---|---|
em | Parent element's font size | Typography, margins, padding |
rem | Root element's font size | Global sizing, consistent spacing |
% | Parent element's size | Layouts, widths, heights |
ch | Width of "0" character | Text container widths |
Viewport Units
Viewport-Based Sizing
Modern Viewport Units
svh,lvh,dvh- Small, large, and dynamic viewport heightsvw,lvw,dvw- Small, large, and dynamic viewport widthvi,vb- Viewport inline and block
Fluid Typography
Creating Responsive Text
Fluid Heading
This text scales smoothly between viewport sizes.
Best Practices
- Use
remfor consistent spacing system - Prefer
emfor component-level spacing - Use viewport units carefully to avoid text becoming too large/small
- Test fluid typography across different devices
Responsive Images
Responsive images adapt to different screen sizes and device capabilities while optimizing performance.
Image Sizing Techniques
Basic Responsive Images
Max-width Approach
Object-fit Approach
Art Direction
Different Images for Different Screens
When to Use Picture Element
- Different image aspects for different screens
- Art direction needs (cropping, focus points)
- Supporting modern image formats with fallbacks
- Complex responsive image scenarios
Performance Considerations
Optimizing Image Loading
Image Performance Checklist
- Use appropriate image formats (WebP with fallbacks)
- Implement lazy loading for off-screen images
- Provide proper width and height attributes
- Use responsive images with srcset and sizes
- Optimize images for different pixel densities
Responsive Layout Patterns
Common patterns for creating responsive layouts that work across different screen sizes.
Common Layout Patterns
Basic Patterns
Best Practices
Responsive Design Guidelines
- Mobile-First Approach
- Start with mobile layout
- Progressive enhancement for larger screens
- Focus on core content first
- Performance
- Optimize images and media
- Minimize layout shifts
- Consider loading times
- Testing
- Test on real devices
- Check different orientations
- Verify breakpoint transitions
Testing Responsive Designs
Testing Methods
- Browser Dev Tools
- Device emulation
- Responsive design mode
- Network throttling
- Real Device Testing
- Different screen sizes
- Various browsers
- Different operating systems
- Testing Tools
- Browser Stack
- Lambda Test
- Responsive Design Checker
Lesson checkpoint
Test Your Knowledge
Strengthen your understanding of Responsive by answering the quiz below.
Responsive Quiz
Test your understanding of Responsive concepts.
Lesson Complete: What You Learned
Key Takeaways:
- Mobile-first strategy prioritizes core content and performance
- Media queries, fluid units, and responsive images work together for flexible layouts
- Common patterns (stack to columns, off-canvas nav, cards) simplify responsive thinking
- Browser DevTools provide essential responsive testing tools
- Best practices include performance budgeting, content priority, and real-device testing
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- ✅ Plan mobile-first breakpoints and layout progression Check!
- ✅ Write effective media queries using min-width and max-width Got it!
- ✅ Use responsive units (%, vw, vh, rem, clamp) Can explain it!
- ✅ Optimize images with srcset, sizes, and lazy loading Could teach this!
- ✅ Implement common responsive navigation and card patterns Check!
- ✅ Test responsive designs across devices and network conditions Got it!
If you can confidently answer "yes" to most of these, you're ready to move on!
Think & Reflect:
Breakpoint Strategy
- How many breakpoints does your project actually need?
- Can clamp() or fluid units replace some media queries?
Performance Mindset
- Are you shipping only the assets needed per device?
- How will your layout behave on a 3G connection?
🤔 Real-World Test:
Every modern product—from news sites to SaaS dashboards—ships with a responsive design system. Teams rely on shared breakpoints, design tokens, and documented patterns. Mastering these techniques lets you collaborate effectively with designers and ensures consistent quality across devices.
Responsive thinking is essential for accessibility, SEO, and conversion rates. Google prioritizes mobile-friendly sites, and users expect seamless experiences on any device.
🎯 Looking Ahead:
With responsive fundamentals locked in, revisit Flexbox, Grid, and modern CSS utilities to refine your layouts. Combine these skills to build production-ready interfaces that feel native on every screen.
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
Modern CSS FeaturesRelated Topics
Explore these related tutorials to expand your knowledge:
Practice Projects
Apply what you've learned with these hands-on projects:
Additional Resources
Deepen your understanding with these helpful resources:
- MDN: Responsive design - Guide to responsive design
Progress tracking is disabled. Enable it in to track your completed tutorials.
Cookie Settings