Learn RWD
Responsive Web Design (RWD) is the practice of building a single web page that automatically reflows, resizes, and rearranges its content to look good on any screen, from a small phone to a large desktop monitor.
What Responsive Web Design Actually Means
Before RWD became standard practice, many companies built a completely separate 'mobile site' (often living at a URL like m.example.com) alongside their main desktop site. That meant maintaining two codebases, two sets of content, and two sets of bugs. Responsive Web Design solves this differently: you write one HTML document and one set of CSS rules, and the layout itself adapts based on the size of the browser window. The same markup that shows a three-column layout on a laptop can automatically collapse into a single stacked column on a phone, without loading a different page.
- Flexible, fluid grids that use percentages or fractional units instead of fixed pixel widths
- Flexible images and media that scale with their container instead of overflowing it
- Media queries that apply different CSS rules depending on viewport width
- A correctly configured viewport meta tag so mobile browsers don't fake a desktop-width screen
- Relative units like rem, em, and vw/vh instead of only px
RWD matters because the range of screen sizes people use to browse the web is enormous: small phones around 360px wide, tablets around 768px, laptops around 1366px, and ultra-wide desktop monitors well over 2000px. A layout hard-coded for one of these will look broken on the others, text spilling off the edge on a phone, or a column of content stretched uncomfortably thin on a wide monitor. On top of the user experience angle, search engines like Google use mobile-first indexing, meaning they primarily evaluate the mobile version of a page when ranking it, so a non-responsive site can be penalized in search results too.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Card</title>
<style>
.card {
max-width: 600px;
margin: 0 auto;
padding: 16px;
}
.card img {
max-width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<div class="card">
<img src="mountain.jpg" alt="Mountain view">
<p>Resize the browser window. The image and the card both shrink and grow with it instead of overflowing or staying a fixed size.</p>
</div>
</body>
</html>Fixed Layouts vs Fluid Layouts
A fixed layout sets widths in absolute units, most commonly pixels, for example width: 960px. That looks fine on the screen size it was designed for, but on a narrower screen the browser either shrinks everything to fit (making text unreadably small) or forces the user to scroll sideways. A fluid layout instead sets widths in relative units, like a percentage of the parent container or the viewport, so the box naturally becomes narrower or wider as the window changes. RWD is built on fluid layouts, then adds media queries on top to restructure things (like turning a row of columns into a stack) at certain widths, rather than just shrinking everything proportionally forever.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fixed-box {
width: 960px; /* stays 960px no matter how narrow the screen is */
}
.fluid-box {
width: 90%; /* shrinks and grows with its parent */
max-width: 960px; /* but never grows past 960px on large screens */
margin: 0 auto;
}
</style>
</head>
<body>
</body>
</html>- Add the viewport meta tag to the document head
- Replace fixed pixel widths on layout containers with percentages or max-width
- Make images and media flexible with max-width: 100%
- Add media queries to restructure the layout at specific breakpoints
- Test the result by resizing the browser or using devtools device emulation
Exercise: RWD Introduction
What does responsive web design fundamentally rely on to adapt layouts across devices?
Frequently Asked Questions
- What actually makes a site responsive?
- A flexible layout that reflows rather than a fixed width, the viewport meta tag so phones stop pretending to be desktops, images that scale within their container, and media queries for the few points where the layout genuinely needs to change.
- Should I design for mobile or desktop first?
- Mobile first, in most cases. Starting narrow forces you to decide what actually matters, and adding space is easier than removing it. Writing CSS this way also means small screens load the simplest rules rather than overriding desktop ones.
- How many breakpoints do I need?
- Fewer than most people expect. Add a breakpoint where the layout stops working, not at a list of device widths. Many sites need only two or three, and modern CSS grid and flexbox remove the need for several more.
