Lesson 13: Responsive Design - Mobile-Friendly Layouts

What You'll Learn

What responsive design is and why it matters
Mobile-first approach
Media queries
Responsive units (%, vw, vh, rem)
Responsive images
Common breakpoints
Creating mobile-friendly layouts

Why This Matters

Over 60% of web traffic comes from mobile devices! Responsive design ensures your website looks great and works well on phones, tablets, and desktops. It's essential for modern web development.

Part 1: What is Responsive Design?

The Problem

Before responsive design, websites were built for desktop only:

Fixed widths (usually 960px)
Horizontal scrolling on mobile
Tiny, unreadable text
Frustrating user experience

The Solution

Responsive design adapts to any screen size:

Flexible layouts
Readable text
Touch-friendly buttons
Great experience on all devices

Part 2: Mobile-First Approach

Mobile-First Philosophy

Start with mobile, then enhance for larger screens. Why?

Easier to scale up than down
Forces you to prioritize content
Better performance on mobile
Most traffic is mobile

Mobile-First CSS

/ Base styles - Mobile (0px and up) /
.container {
    padding: 10px;
}

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

/ Desktop (1024px and up) /
@media (min-width: 1024px) {
    .container {
        padding: 40px;
        max-width: 1200px;
        margin: 0 auto;
    }
}

Part 3: Media Queries

Media queries apply styles based on device characteristics.

Basic Syntax

@media (condition) {
    / Styles apply when condition is true /
}

Min-Width (Mobile-First)

/ Mobile first - base styles /
body {
    font-size: 16px;
}

/ Tablets and up /
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

/ Desktops and up /
@media (min-width: 1024px) {
    body {
        font-size: 20px;
    }
}

Max-Width (Desktop-First)

/ Desktop first - base styles /
body {
    font-size: 20px;
}

/ Tablets and smaller /
@media (max-width: 1023px) {
    body {
        font-size: 18px;
    }
}

/ Mobile and smaller /
@media (max-width: 767px) {
    body {
        font-size: 16px;
    }
}

Common Breakpoints

/ Extra Small (phones) /
@media (min-width: 320px) { }

/ Small (large phones) /
@media (min-width: 576px) { }

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

/ Large (desktops) /
@media (min-width: 1024px) { }

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

/ Extra Extra Large /
@media (min-width: 1400px) { }

Orientation

/ Portrait (tall) /
@media (orientation: portrait) {
    / Styles for vertical screens /
}

/ Landscape (wide) /
@media (orientation: landscape) {
    / Styles for horizontal screens /
}

Part 4: Viewport Meta Tag

CRITICAL: Add this to every HTML <head>:

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

What it does:

Sets viewport width to device width
Sets initial zoom to 100%
Without this, mobile browsers show desktop version zoomed out!

Part 5: Responsive Units

Pixels (px) - Fixed

div {
    width: 300px;  / Always 300px /
}

Good for: Borders, small fixed elements

Percentages (%) - Relative to Parent

div {
    width: 50%;  / Half of parent width /
}

Good for: Flexible widths

Viewport Width (vw) - Relative to Viewport

div {
    width: 50vw;  / 50% of viewport width /
}

h1 {
    font-size: 5vw;  / Scales with viewport /
}

Units:

vw - 1% of viewport width
vh - 1% of viewport height
vmin - 1% of smaller dimension
vmax - 1% of larger dimension

REM - Relative to Root Font Size

html {
    font-size: 16px;  / Base size /
}

h1 {
    font-size: 3rem;  / 48px (3 × 16) /
}

p {
    font-size: 1rem;  / 16px (1 × 16) /
}

.small {
    font-size: 0.875rem;  / 14px /
}

Benefits:

Consistent scaling
Easy to change entire site size
Better for accessibility

EM - Relative to Parent Font Size

.parent {
    font-size: 20px;
}

.child {
    font-size: 0.8em;  / 16px (0.8 × 20) /
}

Warning: EMs compound (get complicated with nesting)!

Part 6: Responsive Images

Flexible Images

img {
    max-width: 100%;  / Never wider than container /
    height: auto;     / Maintain aspect ratio /
    display: block;   / Remove bottom space /
}

Responsive Background Images

.hero {
    background-image: url('image-mobile.jpg');
    background-size: cover;
    background-position: center;
    height: 300px;
}

@media (min-width: 768px) {
    .hero {
        background-image: url('image-tablet.jpg');
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .hero {
        background-image: url('image-desktop.jpg');
        height: 600px;
    }
}

Picture Element (HTML5)

<picture>
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description">
</picture>

Browser automatically chooses the right image!

Part 7: Responsive Flexbox Layout

Mobile: Stack Vertically

.container {
    display: flex;
    flex-direction: column;  / Mobile: stack /
    gap: 20px;
}

Tablet: Side by Side

@media (min-width: 768px) {
    .container {
        flex-direction: row;  / Tablet: side by side /
    }
}

Complete Example

<div class="card-grid">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
</div>

/ Mobile: 1 column /
.card-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/ Tablet: 2 columns /
@media (min-width: 768px) {
    .card-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .card {
        flex: 0 0 calc(50% - 10px);
    }
}

/ Desktop: 4 columns /
@media (min-width: 1024px) {
    .card-grid {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .card {
        flex: 0 0 calc(25% - 15px);
    }
}

Part 8: Responsive Typography

Fluid Typography

html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 20px;
    }
}

/ Everything scales based on root font size /
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
p { font-size: 1rem; }

Clamp Function (Modern)

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    / min    preferred   max /
}

Font size scales between 2rem and 4rem based on viewport!

Part 9: Complete Responsive Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="logo">MyBrand</div>
        <button class="menu-toggle">☰</button>
        <nav class="nav">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    
    <section class="hero">
        <div class="hero-content">
            <h1>Welcome to Our Site</h1>
            <p>Building responsive websites for everyone</p>
            <button class="cta-button">Get Started</button>
        </div>
    </section>
    
    <section class="features">
        <div class="feature">
            <div class="icon">📱</div>
            <h3>Mobile First</h3>
            <p>Optimized for all devices</p>
        </div>
        <div class="feature">
            <div class="icon">⚡</div>
            <h3>Fast</h3>
            <p>Lightning quick performance</p>
        </div>
        <div class="feature">
            <div class="icon">🎨</div>
            <h3>Beautiful</h3>
            <p>Stunning modern design</p>
        </div>
    </section>
</body>
</html>

/ Reset /

{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/ Base Styles (Mobile First) /
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/ Header - Mobile /
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #2c3e50;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.menu-toggle {
    display: block;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.nav {
    display: none;  / Hidden on mobile /
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #2c3e50;
    flex-direction: column;
    padding: 20px;
}

.nav a {
    color: white;
    text-decoration: none;
    padding: 10px 0;
}

/ Hero - Mobile /
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 40px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.hero-content h1 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.cta-button {
    padding: 12px 30px;
    font-size: 1rem;
    background-color: white;
    color: #667eea;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
}

/ Features - Mobile (stack) /
.features {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature {
    text-align: center;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.icon {
    font-size: 60px;
    margin-bottom: 15px;
}

.feature h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #2c3e50;
}

/ TABLET (768px and up) /
@media (min-width: 768px) {
    .header {
        padding: 20px 40px;
    }
    
    .menu-toggle {
        display: none;  / Hide hamburger /
    }
    
    .nav {
        display: flex;  / Show navigation /
        position: static;
        flex-direction: row;
        gap: 30px;
        padding: 0;
        background: none;
    }
    
    .hero {
        min-height: 500px;
    }
    
    .hero-content h1 {
        font-size: 3rem;
    }
    
    .hero-content p {
        font-size: 1.5rem;
    }
    
    .features {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 60px 40px;
    }
    
    .feature {
        flex: 0 0 calc(50% - 15px);
    }
}

/ DESKTOP (1024px and up) /
@media (min-width: 1024px) {
    .hero {
        min-height: 600px;
    }
    
    .hero-content h1 {
        font-size: 4rem;
    }
    
    .features {
        flex-wrap: nowrap;
    }
    
    .feature {
        flex: 1;
    }
}

Part 10: Responsive Testing

Browser DevTools

Open DevTools (F12 or Cmd+Option+I)
Click device icon (Cmd+Shift+M)
Select device or custom size
Test at different breakpoints

Test These Sizes

Mobile: 320px, 375px, 414px
Tablet: 768px, 1024px
Desktop: 1280px, 1440px, 1920px

Practice Exercises

Exercise 1: Responsive Navigation

Create a navigation that:

Mobile: Hamburger menu
Tablet: Horizontal menu
Desktop: Horizontal menu with dropdown

Exercise 2: Responsive Grid

Create a product grid:

Mobile: 1 column
Tablet: 2 columns
Desktop: 4 columns
All cards equal height

Exercise 3: Responsive Hero

Create a hero section:

Mobile: Image above text, stacked
Tablet: Image and text side by side
Desktop: Larger hero, centered content

What You Learned

✅ Mobile-first approach
✅ Media queries for breakpoints
✅ Viewport meta tag
✅ Responsive units (%, vw, vh, rem)
✅ Responsive images
✅ Responsive typography
✅ Flexbox for responsive layouts
✅ Testing responsive designs

What's Next?

In the next lesson, you'll learn how to build Navigation Bars with Flexbox - creating professional, responsive menus!