HTML Responsive Design viewport, srcset, picture

What is Responsive Design?

Responsive HTML supplies the browser with viewport and media choices. Combine fluid layout with srcset, sizes, and picture so images match both display density and layout width.

Responsive design means a web page adapts so it looks good and works well on phones, tablets, laptops, and desktop screens. Instead of creating a separate version of the same page for every device, developers build one flexible layout that adjusts automatically.

HTML gives the page its structure, while CSS makes that structure responsive through flexible sizing, media queries, and adaptive layouts. A responsive page should keep content readable, controls easy to tap, and layouts free from horizontal scrolling.

The Viewport Meta Tag

This is one of the most important lines for mobile responsiveness. Without it, many mobile browsers render the page as if it were designed for a wide desktop screen, then shrink it down. That makes everything appear too small.

Viewport Meta Tag

<head>
    <!-- Always include this in every HTML page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<!-- What each part means:
     width=device-width  - page width = device screen width
     initial-scale=1.0   - no zoom on load
-->

Responsive Images

Images need special attention in responsive design because large fixed images can easily break small layouts. A responsive image should fit within its container while keeping the correct aspect ratio. Advanced techniques like srcset and picture help the browser choose the most suitable image file for the device.

Responsive Images - HTML Example

<!-- Basic responsive image (CSS) -->
<img src="photo.jpg" alt="Photo"
     style="max-width: 100%; height: auto;">

<!-- srcset: serve different sizes based on screen width -->
<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 900px) 800px,
            1200px"
     alt="Responsive photo">

<!-- picture element: art direction (different crops per screen) -->
<picture>
    <!-- Mobile: portrait crop -->
    <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
    <!-- Tablet: square crop -->
    <source media="(max-width: 1024px)" srcset="hero-tablet.jpg">
    <!-- Desktop: wide crop (fallback) -->
    <img src="hero-desktop.jpg" alt="Hero image">
</picture>

<!-- Modern format with fallback -->
<picture>
    <source srcset="photo.webp" type="image/webp">
    <source srcset="photo.avif" type="image/avif">
    <img src="photo.jpg" alt="Photo">
</picture>

Responsive Layout with CSS

Responsive layouts are usually built with Flexbox or CSS Grid. Instead of forcing every block into a fixed-size position, developers let sections stack, wrap, or resize depending on the available width.

Responsive Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Responsive Layout</title>
</head>
<body>
    <header>Header</header>
    <div class="container">
        <main>Main Content</main>
        <aside>Sidebar</aside>
    </div>
    <footer>Footer</footer>
</body>
</html>

Responsive Layout with CSS - CSS Example

/* Mobile first - base styles for small screens */
.container {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}

main  { width: 100%; }
aside { width: 100%; margin-top: 20px; }

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        gap: 24px;
    }
    main  { flex: 1; }
    aside { width: 280px; flex-shrink: 0; }
}

/* Desktop */
@media (min-width: 1200px) {
    .container { max-width: 1200px; margin: 0 auto; }
}

Responsive Typography

Typography should scale as well. A large heading that looks great on desktop might feel oversized on mobile, while tiny paragraph text can feel too small on larger screens. Responsive typography keeps text balanced and readable.

Fluid Typography

/* Fluid font size using clamp(min, preferred, max) */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); }
p  { font-size: clamp(0.9rem, 2vw, 1.1rem); }

/* Responsive font with media queries */
body { font-size: 14px; }

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

Mobile-First Design

A common best practice is to design for smaller screens first, then enhance the layout for tablets and desktops. This is called mobile-first design. It keeps the default experience simple and ensures the most important content is prioritized.

In mobile-first CSS, the base styles target phones. Larger-screen improvements are added later with min-width media queries.

Mobile-first CSS

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

Flexible Units

Responsive layouts work best when you use flexible units such as percentages, rem, em, vw, and vh instead of relying only on fixed pixels. Flexible units help spacing, text, and containers scale more naturally.

Flexible units - CSS Example

.wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(2rem, 6vw, 4rem);
}

.button {
    padding: 0.75rem 1.25rem;
}

Common Breakpoints

Breakpoints are screen widths where the layout changes. There is no single perfect set for every website, but many projects use ranges that roughly match mobile, tablet, laptop, and desktop layouts.

Range	Typical Width	Common Layout Change
Mobile	Up to 767px	Single-column layout and stacked content
Tablet	768px to 1023px	Two-column layouts and wider spacing
Laptop	1024px to 1199px	Sidebars and larger content regions
Desktop	1200px and above	Multi-column layouts and max-width containers

Common Responsive Mistakes

Forgetting the viewport meta tag.
Using large fixed-width images or containers that overflow on small screens.
Making buttons and links too small for touch devices.
Hiding important content on mobile instead of reorganizing it clearly.
Testing only on desktop and assuming the layout works everywhere.