Before 2011, our standard answer to "how do we handle mobile?" was to build a second site. m.yoursite.com. A stripped-down version with simplified navigation, smaller images, no JavaScript-heavy features. Maintaining two codebases, two design systems, two sets of bugs.
Then Ethan Marcotte published "Responsive Web Design" in A List Apart (May 2010) and described a third option: one site, fluid grid, flexible images, and media queries to adjust the layout at breakpoints. We read it, discussed it for a month, and then slowly started believing it was actually possible.
What We Were Doing Before
The typical 2010 mobile setup:
<!-- In <head> -->
<link rel="stylesheet" href="/css/desktop.css" media="screen">
<link rel="stylesheet" href="/css/mobile.css" media="handheld">
The media="handheld" approach was a disaster. Most mobile browsers (including early Mobile Safari) identified themselves as screen, not handheld. The "mobile stylesheet" was ignored by the very devices it was meant for.
The PHP server-side detection approach:
// The old way - detect user agent, redirect to mobile site
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/(iPhone|iPod|Android|BlackBerry|Nokia)/i', $ua)) {
header('Location: http://m.' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
exit;
}
This worked until it didn't: tablets were indistinguishable from phones, user agent strings lied, the regex grew to hundreds of devices, and the m. subdomain had no SEO equity from the main domain.
Media Queries: The Breakthrough
CSS3 Media Queries (W3C Recommendation: June 2012, but widely used from 2010) let you apply CSS rules based on the viewport width:
/* Base styles - mobile first approach */
.container {
width: 100%;
padding: 0 16px;
}
.sidebar {
display: none; /* Hide sidebar on small screens */
}
.main-content {
width: 100%;
}
/* Tablet - 768px and above */
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
padding: 0;
}
.sidebar {
display: block;
float: left;
width: 200px;
}
.main-content {
float: right;
width: 530px;
}
}
/* Desktop - 1024px and above */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
}
.sidebar {
width: 260px;
}
.main-content {
width: 690px;
}
}
The key insight: start with the mobile layout as the base. min-width queries progressively enhance. This was "mobile-first" - write CSS for small screens first, then override for larger screens. The older "desktop-first" approach used max-width and progressively degraded, which was harder to reason about and produced more complex CSS.
Fluid Grids: The Harder Part
Media queries alone weren't enough. Fixed-pixel layouts broke between breakpoints. The fluid grid meant every element's width was a percentage of its parent, not a fixed pixel value.
The formula: target / context = result
If your design has a 300px sidebar in a 960px container: 300 / 960 = 0.3125 = 31.25%.
/* Instead of: */
.sidebar { width: 300px; }
.main-content { width: 640px; }
/* Use: */
.sidebar { width: 31.25%; } /* 300/960 */
.main-content { width: 66.66%; } /* 640/960 */
This was tedious to calculate manually. We built a small SCSS function:
@function fluid-width($target, $context: 960px) {
@return percentage($target / $context);
}
.sidebar { width: fluid-width(300px); } // 31.25%
.main-content { width: fluid-width(640px); } // 66.666%
Flexible Images
The last piece of Marcotte's formula. Fixed-width images overflow fluid containers:
/* This single rule prevents images from overflowing */
img {
max-width: 100%;
height: auto;
}
Simple. Effective. We didn't believe two lines of CSS could solve the problem. They did.
For background images, we used different images per breakpoint to avoid loading large images on mobile:
.hero {
background-image: url('/images/hero-mobile.jpg');
background-size: cover;
}
@media screen and (min-width: 768px) {
.hero {
background-image: url('/images/hero-tablet.jpg');
}
}
@media screen and (min-width: 1024px) {
.hero {
background-image: url('/images/hero-desktop.jpg');
}
}
This predated <picture> and srcset by a couple of years. Those came in 2014 and solved the problem properly.
The Viewport Meta Tag
Early iPhone Safari shrank full desktop pages to fit the screen then let users zoom in. Good for legacy sites, terrible for responsive ones. The fix:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width tells the browser: "the layout viewport is the same width as the physical screen." Without it, all our media queries fired against a virtual 980px viewport, not the actual 375px iPhone screen.
We spent two days debugging why our responsive layout wasn't responding on real devices before finding this. It wasn't in Marcotte's original article. It was buried in Apple's developer documentation.
The Transition in Practice
Our first fully responsive project was a regional news site in late 2011. We had agreed on three breakpoints: 480px (phones), 768px (tablets), 1024px (desktop). The client had never thought about mobile; their current site was fixed 960px.
Testing on real devices revealed things DevTools resize mode hid:
- Touch targets too small (links needed
min-height: 44pxto be finger-tappable) - Horizontal scroll from a single
width: 960pxdeclaration deep in a plugin's CSS - iOS Safari's 300ms click delay on non-zoomed pages (fixed with
user-scalable=noortouch-action: manipulation) - Table overflow -
<table>elements didn't respond tomax-width: 100%
The table problem had no clean CSS solution in 2011. We ended up hiding overflow and adding horizontal scroll to table containers, which wasn't great but was honest. Proper responsive table patterns (card-based, priority columns) evolved over the next two years.
The End of m.yoursite.com
By 2013, building a separate mobile site was becoming professionally embarrassing. "Do you do responsive?" was a question clients asked before signing contracts. Google announced in 2012 that it preferred responsive design over separate mobile URLs because it simplified crawling and consolidates PageRank to a single URL.
The m. subdomain era ended not because responsive design was perfect (it wasn't - and isn't). It ended because it solved the maintenance problem: one codebase, one URL, one SEO presence, one set of content. The alternative was paying to maintain two sites forever.
Twelve years later, every website is expected to be responsive. Media queries are so ubiquitous they're invisible. CSS Grid and Flexbox made the fluid grid calculation obsolete. Container queries (2022) took responsiveness down to the component level.
But in 2011, writing @media screen and (min-width: 768px) and watching your desktop layout reorganize into a mobile column felt like a small miracle. The web had been a fixed-width medium for 15 years. Suddenly it wasn't.
Aunimeda builds modern web frontends - from single-page applications to complex multi-locale sites.
Contact us to discuss your frontend project. See also: Web Development, Corporate Website Development