Episode 2 of 12
Responsive Website Example
Walk through a real responsive website to see how layouts, images, and navigation change across screen sizes.
Responsive Website Example
Before we start building, let's study a responsive website in action. Understanding how existing sites adapt to different screen sizes will help you plan your own responsive layouts.
How to Test Responsiveness
You can test any website's responsiveness using browser DevTools:
- Open Chrome and navigate to any website
- Press F12 to open DevTools
- Click the device toolbar icon (or press
Ctrl+Shift+M) - Choose a device from the dropdown, or drag the viewport handle to resize freely
- Watch how the layout changes as you narrow the screen
What Changes at Each Breakpoint
Let's examine what a typical responsive site does as the screen shrinks:
Desktop (1024px+)
- Full horizontal navigation bar with all links visible
- Multi-column layouts (2, 3, or 4 columns side by side)
- Large hero images and banners
- Sidebars alongside the main content
- Footer with multiple columns of links
Tablet (768px – 1024px)
- Navigation may condense — fewer items, smaller font
- Columns reduce (3 columns → 2 columns)
- Sidebars may move below the main content
- Images resize proportionally
- Padding and margins decrease slightly
Mobile (below 768px)
- Navigation collapses into a hamburger menu
- Everything becomes single-column
- Images take full width
- Font sizes adjust for readability
- Buttons become larger and full-width for touch
- Footer columns stack vertically
Common Responsive Patterns
| Pattern | Desktop | Mobile |
|---|---|---|
| Navigation | Horizontal links | Hamburger menu |
| Content Grid | 3–4 columns | 1 column, stacked |
| Sidebar | Side-by-side with content | Hidden or moved below |
| Images | Full-size, fixed dimensions | Full-width, fluid |
| Footer | Multi-column grid | Stacked single-column |
| Tables | Full table visible | Horizontal scroll or reformatted |
Building a Simple Example
Let's look at a minimal responsive page to see the concept in action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Responsive Example</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; }
.container { max-width: 1100px; margin: auto; padding: 0 20px; }
.grid {
display: flex;
gap: 20px;
}
.card {
flex: 1;
background: #f0f4f8;
padding: 30px;
border-radius: 8px;
text-align: center;
}
/* Tablet: 2 columns */
@media (max-width: 768px) {
.grid { flex-wrap: wrap; }
.card { flex: 0 0 calc(50% - 10px); }
}
/* Mobile: 1 column */
@media (max-width: 480px) {
.card { flex: 0 0 100%; }
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center; padding: 40px 0;">
Responsive Grid Demo
</h1>
<div class="grid">
<div class="card"><h3>Card 1</h3></div>
<div class="card"><h3>Card 2</h3></div>
<div class="card"><h3>Card 3</h3></div>
</div>
</div>
</body>
</html>What This Example Demonstrates
- Desktop: Three cards sit side by side in a row
- Tablet (768px): Cards wrap to a 2-column layout
- Mobile (480px): Cards stack into a single column
This is the fundamental responsive pattern — a multi-column layout that collapses to single-column on smaller screens.
Popular Responsive Websites to Study
- apple.com — elegant responsive transitions, fluid images
- smashingmagazine.com — content-heavy responsive design
- stripe.com — beautiful animations and responsive layout
- github.com — complex UI that adapts cleanly
Resize each of these sites in your browser to observe how they handle the transition from desktop to mobile.
Key Takeaways
- Use browser DevTools (device toolbar) to test responsive behavior
- Responsive sites adjust navigation, grids, images, and spacing at each breakpoint
- The most common pattern: multi-column → fewer columns → single column
- Study existing responsive sites to understand real-world patterns