For 15 years, everyone has been screaming “mobile-first! mobile-first!” After 47 years in the industry—32 of which predate mobile phones—I can tell you the truth: real work happens on real computers. Design for them first.

The Mobile Myth

They show you statistics:

Year “Mobile Traffic”
2015 35%
2020 50%
2025 60%

But here’s what they don’t tell you:

Type of Usage Desktop Mobile
“I’m reading this while pooping” 10% 90%
“I’m actually trying to work” 95% 5%
“I will buy something” 75% 25%
“Oops, clicked an ad accidentally” 5% 95%

Mobile traffic is bathroom traffic. Design accordingly.

The Hamburger Menu Disaster

The hamburger menu (☰) is what happens when designers give up:

/* Desktop: beautiful navigation */
nav {
    display: flex;
    gap: 20px;
}

/* Mobile: just hide everything */
@media (max-width: 768px) {
    nav {
        display: none;
    }
    .hamburger {
        display: block;
    }
    /* Good luck finding anything now! */
}

XKCD 1174 on apps vs. websites captures this perfectly. Mobile design is just progressive feature removal.

The PHB Mobile Strategy

The Pointy-Haired Boss from Dilbert once said: “Make it work on mobile, tablet, laptop, desktop, and smart fridge.” The team spent 6 months on responsive design. Nobody has ever accessed the app from a fridge. But the CSS file is 47,000 lines now.

The Finger Problem

Mobile-first design assumes giant fingers:

/* "Accessible" button */
.button {
    min-height: 44px;
    min-width: 44px;
    padding: 16px 32px;
    margin: 8px;
    font-size: 18px;
}

/* Result: 4 buttons visible per screen
   Content visible: 0
   User experience: Scrolling forever */

Desktop users with mice can click 10px targets. But we make everyone suffer for phone users.

My Desktop-First Manifesto

/* Base styles: full desktop experience */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    gap: 20px;
}

.sidebar {
    position: sticky;
    top: 0;
}

.data-table {
    font-size: 14px;
}

.actions {
    display: flex;
    gap: 8px;
}

/* Mobile: you'll figure it out */
@media (max-width: 768px) {
    .dashboard {
        display: block;
    }
    .sidebar {
        display: none; /* Sorry */
    }
    .data-table {
        overflow-x: scroll; /* Good luck */
    }
    /* Add "Use desktop site" link */
}

The “Responsive” Lie

“Responsive” design means “broken on every screen size”:

  • Desktop: Wasted space everywhere
  • Tablet: Neither mobile nor desktop, worst of both
  • Mobile: Missing half the features
  • 4K Monitor: Tiny text or massive buttons, pick your pain

Just build separate sites:

site.com        - Full desktop experience
m.site.com      - "Coming soon" page with link to desktop

The Form Factor Truth

Nobody fills out forms on mobile:

// Desktop user filling a form:
// Name: ✓ (typed in 2 seconds)
// Email: ✓ (autocomplete)  
// Address: ✓ (autocomplete)
// Credit card: ✓ (autofill)
// Total time: 30 seconds

// Mobile user filling a form:
// Name: starts typing, gets interrupted by notification
// Email: @ symbol requires switching keyboards
// Address: autocomplete suggestions cover the form
// Credit card: gives up, bookmarks for later
// Conversion: 0%

The Touch Screen Myth

“Touch screens are the future!”

Touch screens are imprecise, frustrating, and leave fingerprints everywhere:

// Desktop: precise
cursor.position = { x: 427, y: 283 };
click();

// Mobile: vibes
finger.position = { x: "somewhere around 400", y: "maybe 280" };
tap();
// Did you hit the button or the ad next to it? 
// We'll find out!

Real User Behavior

Desktop user journey:
1. Open site
2. Complete task
3. Leave

Mobile user journey:
1. Open site
2. Get notification
3. Check notification
4. Forget what they were doing
5. Open Instagram
6. 45 minutes pass
7. Remember the site
8. Site asks to install app
9. Close site
10. Never return

When Mobile-First Makes Sense

  1. Your app is Instagram
  2. Your app is a game
  3. Your app is… no, that’s pretty much it

For everything else—banking, email, documents, shopping, actual work—desktop is king.

The CSS Cost

Mobile-first CSS file:
- Base mobile styles: 200 lines
- Tablet breakpoint: 500 lines
- Desktop breakpoint: 800 lines
- "Fixing edge cases": 3000 lines
- !important overrides: 47 per file
- Media query nesting depth: 4 levels
- Developer sanity: 0

Desktop-first CSS file:
- Desktop styles: 500 lines
- Mobile: "use desktop version" banner
- Developer happiness: Maximum

The author’s personal website is optimized for 1024x768 monitors. It looks perfect on his 2008 Dell. Mobile users see a horizontal scroll bar and a message: “Rotate to landscape and squint.”