In early 2011, mobile was 3-4% of traffic for most of our clients. We designed for desktop, added a media query stylesheet as an afterthought, and called it responsive.
By mid-2012, mobile was 18% of traffic on e-commerce sites and 31% on media sites. And the number was moving fast - up 2-3 percentage points per quarter. We ran the math: mobile would be the majority traffic source within 18 months for most of our clients.
That realization forced a choice: keep treating mobile as a degraded desktop experience, or design for mobile first and treat desktop as an enhancement.
We chose mobile first. Here's what that actually meant in practice.
The Thumb Zone
Luke Wroblewski published the research in 2011: when holding a phone with one hand, the thumb naturally reaches the bottom-center of the screen comfortably. The upper corners are a stretch. The lower sides are easy. The middle is comfortable.
He called this the "thumb zone." We started calling it the "reachability map":
Smartphone (4-inch screen, right-handed):
[HARD] [HARD]
[OK] [OK]
[EASY] [EASY]
[EASY] [EASY]
[THUMB] [OK]
[EASY] [COMFORTABLE]
[PRIMARY ZONE]
Every primary action - the one thing the user is most likely to do - needed to be in the thumb zone. The bottom third of the screen.
This was the opposite of every desktop UI convention. Desktop menus live at the top. Desktop primary CTAs are above the fold, which usually means near the top. Desktop search bars are in the header.
Mobile-first meant inverting these conventions for small screens:
/* Desktop-first (old approach) */
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
}
.search-bar {
position: absolute;
top: 12px;
right: 20px;
}
/* Mobile-first (new approach) */
.primary-action {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
min-width: 200px;
height: 54px; /* Thumb-tappable */
}
/* On desktop, let it flow normally */
@media (min-width: 768px) {
.primary-action {
position: static;
transform: none;
}
}
Content Priority
Mobile-first CSS follows a specific writing order: base styles define the mobile experience, then min-width media queries progressively add desktop features.
But more important than the CSS order was the content order. A desktop layout might show a sidebar with related products next to the main product description. On mobile, the sidebar had to either disappear or appear below the main content. Which content should appear first?
We established a content priority exercise at the start of every project:
Product page content stack (mobile):
1. Product image
2. Product name + price
3. Add to cart button
4. Short description
5. Reviews summary (stars + count)
6. Full description (expandable)
7. Specifications (expandable)
8. Related products
9. Breadcrumbs (moved to top on desktop)
This exercise was valuable even for desktop design. It forced clients to say what actually mattered about each page. "Related products" was always in the top 3 on the client's wishlist and usually ended up at position 8 in the actual priority list when forced to choose.
Input Design for Fat Fingers
HTML form inputs designed for precise mouse clicks were painful on mobile. We rebuilt our form patterns from scratch:
<!-- Old desktop form -->
<div class="form-row">
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone">
</div>
<!-- Mobile-first form -->
<div class="form-group">
<label for="phone" class="form-label">Phone Number</label>
<input
type="tel" <!-- Triggers numeric keyboard on iOS/Android -->
id="phone"
name="phone"
class="form-input"
placeholder="+996 700 000 000"
autocomplete="tel" <!-- Enables browser autofill -->
inputmode="numeric" <!-- Additional hint for keyboard type -->
>
</div>
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
.form-input {
display: block;
width: 100%;
height: 52px; /* Tall enough to tap without precision */
padding: 0 16px;
font-size: 16px; /* Prevents iOS zoom-on-focus (below 16px triggers zoom) */
border: 2px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
-webkit-appearance: none; /* Remove iOS default styling */
}
.form-input:focus {
border-color: #0066cc;
outline: none;
}
The font-size: 16px rule on inputs was a discovery that came from user testing: iOS Safari zoomed the viewport when focusing an input with font-size below 16px, which broke the layout and disoriented users. A single CSS rule fixed it.
Performance as a UX Problem
Mobile-first thinking forced us to confront performance in ways desktop design didn't require. The median mobile connection in 2012 was 3G - roughly 1-3 Mbps with high latency (200-400ms roundtrip). A 2MB homepage that loaded in 3 seconds on desktop took 15 seconds on 3G.
We started measuring page weight at the beginning of projects, not the end:
// 2012 performance budget script (run in browser console)
// Before performance APIs existed in any useful form
(function() {
var resources = performance.getEntriesByType('resource');
var totalSize = 0;
var breakdown = { images: 0, scripts: 0, stylesheets: 0, other: 0 };
resources.forEach(function(r) {
var size = r.transferSize || 0;
totalSize += size;
if (/\.(jpg|jpeg|png|gif|webp|svg)$/i.test(r.name)) {
breakdown.images += size;
} else if (/\.js$/i.test(r.name)) {
breakdown.scripts += size;
} else if (/\.css$/i.test(r.name)) {
breakdown.stylesheets += size;
} else {
breakdown.other += size;
}
});
console.log('Total: ' + Math.round(totalSize / 1024) + 'KB');
console.log('Images: ' + Math.round(breakdown.images / 1024) + 'KB');
console.log('Scripts: ' + Math.round(breakdown.scripts / 1024) + 'KB');
console.log('CSS: ' + Math.round(breakdown.stylesheets / 1024) + 'KB');
})();
Our performance budget for mobile: under 500KB total, under 300KB images, under 100KB JavaScript. These were aggressive targets in 2012. jQuery alone was 90KB minified. A single hero image from a designer was often 800KB.
Google's Mobile-First Indexing Signal
Google announced in November 2016 that it was moving to mobile-first indexing - using the mobile version of a page as the primary index signal for search ranking. By 2019 it was the default.
We'd been designing mobile-first since 2012. The SEO consequence wasn't news to us. We'd already seen it informally: clients whose mobile performance improved saw search rankings improve for their primary keywords, before Google made any official announcement.
The mechanism was user engagement. A page that was fast and usable on mobile had lower bounce rates and higher time-on-page from mobile users. Google's ranking signals incorporated these engagement metrics. Mobile-first design fed directly into better organic search performance, independently of any explicit "mobile-friendly" ranking factor.
The Practical Outcome
By 2013, every project we started began with mobile wireframes. The desktop design followed from the mobile design, not the other way around. The "mobile version" was no longer a stripped-down desktop; the desktop version was an expanded mobile.
The constraints of mobile design made everything better: prioritized content, cleaner navigation, faster load times, larger touch targets that were easier to click even with a mouse. Desktop users benefited from every decision made for thumbs.
That's the lasting lesson from mobile-first: designing for constraints produces better design for everyone.
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