Responsive Web Design

Create websites that work beautifully on any device

Introduction to Responsive Design

Responsive web design (RWD) is an approach to web development that makes web pages render well on a variety of devices and window sizes. It combines flexible grids, responsive images, and CSS media queries to create a seamless user experience across devices.

Phones

Tablets

Desktops

Core Principles

Fluid Grids

Fluid grids use relative units like percentages rather than fixed units like pixels for layout elements. This allows elements to resize in relation to one another and to the screen size.

/* Bad - Fixed width */
.container {
  width: 960px;
}

/* Good - Fluid width */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Fluid columns example */
.column {
  float: left;
  width: 31.333%; /* ~1/3 of container */
  margin: 1%;
}

Flexible Images

Images should be able to scale down to fit smaller containers without breaking the layout. Modern CSS techniques likeobject-fit and thepicture element help create truly responsive images.

Use max-width: 100% on images
Implement srcset for resolution switching
Use picture for art direction
Consider modern formats like WebP

<!-- Basic responsive image -->
<img src="image.jpg" alt="Example" style="max-width: 100%; height: auto;">

<!-- Using srcset -->
<img 
  srcset="small.jpg 480w, medium.jpg 960w, large.jpg 1920w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 1920px"
  src="fallback.jpg"
  alt="Responsive image">

<!-- Art direction with picture -->
<picture>
  <source media="(max-width: 799px)" srcset="portrait.jpg">
  <source media="(min-width: 800px)" srcset="landscape.jpg">
  <img src="fallback.jpg" alt="Art directed image">
</picture>

Mobile-First Approach

Mobile-first design means starting with styles for small screens and then using media queries to add styles for larger screens. This approach results in better performance and cleaner code.

Tip: Start with core mobile styles outside of media queries, then enhance for larger screens.

/* Base styles (mobile) */
.container {
  padding: 10px;
}

/* Tablet styles */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .container {
    padding: 40px;
  }
}

Viewport Configuration

Essential Viewport Meta Tag

The viewport meta tag controls how a page is displayed on mobile devices. Without it, mobile browsers will render the page at a desktop screen width and then scale it down.

<!-- Standard viewport tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Additional options -->
<meta name="viewport" 
  content="width=device-width, 
           initial-scale=1.0,
           maximum-scale=1.0,
           user-scalable=no">

Viewport Best Practices

Always include the viewport meta tag in the <head>
Use width=device-width to match the screen's width
initial-scale=1.0 sets the initial zoom level
Avoid disabling user scaling unless absolutely necessary
Test on actual devices when possible

Avoid These Anti-Patterns

Fixed width viewports (width=960)
Disabling zoom without good reason
Setting minimum/maximum scale to 1.0

Media Queries

Media Query Syntax

Media queries allow you to apply CSS styles depending on device characteristics like width, height, orientation, and resolution.

/* Common breakpoints (adjust as needed) */
/* Small devices (landscape phones) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets) */
@media (min-width: 768px) { ... }

/* Large devices (desktops) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops) */
@media (min-width: 1200px) { ... }

/* Orientation example */
@media (orientation: landscape) { ... }

/* High-resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) { ... }

Breakpoint Strategies

While common breakpoints exist (768px, 992px, etc.), the best approach is to let your content determine breakpoints. Add breakpoints when the design starts to look bad, not based on specific device sizes.

Start with mobile styles (no media query)
Add breakpoints as needed by your content
Use em units for more consistent results
Test on real devices when possible

/* Content-based breakpoints example */
/* Default (mobile) styles */
.card {
  width: 100%;
}

/* When cards can fit side by side */
@media (min-width: 35em) {  /* ~560px */
  .card {
    width: calc(50% - 1rem);
    float: left;
    margin-right: 1rem;
  }
}

/* When three cards fit */
@media (min-width: 55em) {  /* ~880px */
  .card {
    width: calc(33.333% - 1rem);
  }
}

Practical Examples

Responsive Layout with Flexbox

Flexbox-based responsive layout that adapts to screen size

Header

Main Content

Sidebar

Footer

<div class="container">
  <header class="header">Header</header>
  <main class="main-content">
    <article class="article">Main Content</article>
    <aside class="sidebar">Sidebar</aside>
  </main>
  <footer class="footer">Footer</footer>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  .header, .footer {
    padding: 1rem;
    background: #333;
    color: white;
  }
  
  .main-content {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  
  .article {
    flex: 3;
    padding: 1rem;
    background: #f5f5f5;
  }
  
  .sidebar {
    flex: 1;
    padding: 1rem;
    background: #ddd;
  }
  
  @media (min-width: 768px) {
    .main-content {
      flex-direction: row;
    }
  }
</style><div class="container">
  <header class="header">Header</header>
  <main class="main-content">
    <article class="article">Main Content</article>
    <aside class="sidebar">Sidebar</aside>
  </main>
  <footer class="footer">Footer</footer>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  .header, .footer {
    padding: 1rem;
    background: #333;
    color: white;
  }
  
  .main-content {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  
  .article {
    flex: 3;
    padding: 1rem;
    background: #f5f5f5;
  }
  
  .sidebar {
    flex: 1;
    padding: 1rem;
    background: #ddd;
  }
  
  @media (min-width: 768px) {
    .main-content {
      flex-direction: row;
    }
  }
</style>

Responsive Grid Layout

CSS Grid layout that reflows based on screen width

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

<style>
  .grid-container {
    display: grid;
    gap: 1rem;
    padding: 1rem;
  }
  
  .grid-item {
    background: #4ade80;
    padding: 1rem;
    text-align: center;
    border-radius: 0.5rem;
  }
  
  /* Mobile first */
  .grid-container {
    grid-template-columns: 1fr;
  }
  
  /* Tablet */
  @media (min-width: 640px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Desktop */
  @media (min-width: 1024px) {
    .grid-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style><div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

<style>
  .grid-container {
    display: grid;
    gap: 1rem;
    padding: 1rem;
  }
  
  .grid-item {
    background: #4ade80;
    padding: 1rem;
    text-align: center;
    border-radius: 0.5rem;
  }
  
  /* Mobile first */
  .grid-container {
    grid-template-columns: 1fr;
  }
  
  /* Tablet */
  @media (min-width: 640px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Desktop */
  @media (min-width: 1024px) {
    .grid-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style>

Responsive Images

Techniques for responsive images with optimal performance

Basic Responsive Image

Art-Directed Image

<!-- Simple responsive image -->
<img 
  src="image-small.jpg" 
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w" 
  sizes="(max-width: 600px) 480px, (max-width: 1024px) 768px, 1200px" 
  alt="Responsive image example"
  class="responsive-img">

<!-- Art direction with picture element -->
<picture>
  <source media="(max-width: 639px)" srcset="mobile-view.jpg">
  <source media="(min-width: 640px)" srcset="desktop-view.jpg">
  <img src="fallback.jpg" alt="Art directed image">
</picture>

<!-- Density-aware responsive image -->
<img
  src="image-1x.jpg"
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  alt="Density-aware image"><!-- Simple responsive image -->
<img 
  src="image-small.jpg" 
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w" 
  sizes="(max-width: 600px) 480px, (max-width: 1024px) 768px, 1200px" 
  alt="Responsive image example"
  class="responsive-img">

<!-- Art direction with picture element -->
<picture>
  <source media="(max-width: 639px)" srcset="mobile-view.jpg">
  <source media="(min-width: 640px)" srcset="desktop-view.jpg">
  <img src="fallback.jpg" alt="Art directed image">
</picture>

<!-- Density-aware responsive image -->
<img
  src="image-1x.jpg"
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  alt="Density-aware image">

Responsive Design Best Practices

Do's:

Start with a mobile-first approach
Use relative units (em, rem, %) for sizing
Test on real devices when possible
Use semantic HTML for better accessibility
Optimize images for different screen sizes
Consider touch targets (minimum 48×48px)

Don'ts:

Don't hide content arbitrarily on mobile
Avoid fixed widths that might cause overflow
Don't rely solely on device-width breakpoints
Avoid heavy assets on mobile connections
Don't disable zoom without good reason
Avoid complex hover states on touch devices

Try Our Responsive Design Editor

Experiment with responsive design techniques in our interactive editor with device previews:

Test media queries with live preview
Try flexbox and grid layouts
Experiment with responsive images
View your design at different breakpoints

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Playground</title>
  <style>
    /* Mobile-first styles */
    .container {
      width: 100%;
      padding: 1rem;
    }
    
    /* Tablet styles */
    @media (min-width: 768px) {
      .container {
        max-width: 720px;
        margin: 0 auto;
      }
    }
    
    /* Desktop styles */
    @media (min-width: 992px) {
      .container {
        max-width: 960px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Responsive Design Playground</h1>
    <p>Resize your browser to see the effect</p>
  </div>
</body>
</html>

< Previous (Meta)Next (Media Queries) >