The Device Fragmentation Dilemma
With the rapid adoption of smartphones like the iPhone and early Android models, web developers are facing a challenge: How do we build web layouts that look great on both a 24-inch widescreen monitor and a 3.5-inch phone screen?
Until now, the standard solution was building a separate mobile site (e.g. m.example.com) and routing traffic based on user-agent detection. This pattern is fragile, hard to maintain, and breaks search engine optimization.
On May 25, 2010, Ethan Marcotte published his seminal article "Responsive Web Design" in *A List Apart*, establishing a new way forward.
The Three Components of Responsive Web Design
Responsive web design is a hybrid approach combining three techniques:
1. Fluid Grids
Instead of designing layouts in fixed-width pixels (e.g., a 960px wrapper), grid layouts are defined in relative percentages:
/* Responsive column wrapping in CSS */
.container {
width: 90%;
max-width: 960px;
}
.sidebar {
width: 33.33%;
float: left;
}
.main-content {
width: 66.67%;
float: left;
}2. Flexible Images
Ensuring media doesn't overflow its container boundaries on small viewports:
img, video {
max-width: 100%;
height: auto;
}3. CSS3 Media Queries
CSS3 media queries allow us to target style rules based on the device's screen size:
@media screen and (max-width: 480px) {
.sidebar, .main-content {
width: 100%;
float: none;
}
}A Single URL Framework
By embracing responsive web design, enterprise platforms maintain a single URL structure, simplifying content management, sharing links, and making design systems future-proof against any new screen sizes.