Introduction to Responsive Web Design

Introduction to Responsive Web Design (RWD)

1. What Is Responsive Web Design?

• Definition: A design approach that makes web pages render well on a wide range of devices and screen sizes—from large desktop monitors to smartphones and tablets—without requiring separate codebases.
• Goal: Provide an optimal viewing experience (readability, navigation, interaction) by adapting layout, images, and typography to the user’s environment.

2. Core Principles

3. Building Blocks

3.1 Fluid Layouts

/* Example: 3‑column layout that collapses on small screens */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

• auto-fit / auto-fill + minmax() creates columns that expand/contract automatically.

3.2 Media Queries Syntax

/* Breakpoints (customizable) */
@media (min-width: 576px) { /* small tablets */ }
@media (min-width: 768px) { /* portrait tablets */ }
@media (min-width: 992px) { /* small laptops */ }
@media (min-width: 1200px) { /* desktops */ }

• Use em or rem for breakpoints to respect user‑defined font sizes.

3.3 Responsive Images

<picture>
  <source srcset="hero-large.webp 1200w,
                  hero-medium.webp 800w"
          media="(min-width: 800px)" type="image/webp">
  <img src="hero-fallback.jpg"
       srcset="hero-small.jpg 400w,
               hero-medium.jpg 800w"
       sizes="(max-width: 600px) 100vw,
              50vw"
       alt="Hero image">
</picture>

• srcset + sizes let the browser pick the most appropriate file.

3.4 Flexbox for Simple Adjustments

.nav {
  display: flex;
  flex-wrap: wrap;   /* items wrap on narrow screens */
  justify-content: space-between;
}
.nav a { flex: 1 1 120px; }   /* minimum width, grow as needed */

4. Common Breakpoint Strategies