Por 15 anos, todo mundo vem gritando “mobile-first! mobile-first!” Depois de 47 anos na indústria—32 dos quais antes de celulares existirem—posso te contar a verdade: trabalho de verdade acontece em computadores de verdade. Design pra eles primeiro.

O Mito do Mobile

Eles te mostram estatísticas:

Ano “Tráfego Mobile”
2015 35%
2020 50%
2025 60%

Mas eis o que não te contam:

Tipo de Uso Desktop Mobile
“Tô lendo isso no banheiro” 10% 90%
“Tô tentando trabalhar de verdade” 95% 5%
“Vou comprar algo” 75% 25%
“Cliquei no anúncio sem querer” 5% 95%

Tráfego mobile é tráfego de banheiro. Design de acordo.

O Desastre do Menu Hamburger

O menu hamburger (☰) é o que acontece quando designers desistem:

/* Desktop: navegação linda */
nav {
    display: flex;
    gap: 20px;
}

/* Mobile: só esconde tudo */
@media (max-width: 768px) {
    nav {
        display: none;
    }
    .hamburger {
        display: block;
    }
    /* Boa sorte achando qualquer coisa agora! */
}

XKCD 1174 sobre apps vs. websites captura isso perfeitamente. Design mobile é só remoção progressiva de features.

A Estratégia Mobile do PHB

O Chefe de Cabelo Pontudo do Dilbert uma vez disse: “Faça funcionar no mobile, tablet, laptop, desktop e geladeira smart.” O time passou 6 meses em design responsivo. Ninguém nunca acessou o app de uma geladeira. Mas o arquivo CSS tem 47.000 linhas agora.

O Problema do Dedo

Design mobile-first assume dedos gigantes:

/* Botão "acessível" */
.button {
    min-height: 44px;
    min-width: 44px;
    padding: 16px 32px;
    margin: 8px;
    font-size: 18px;
}

/* Resultado: 4 botões visíveis por tela
   Conteúdo visível: 0
   Experiência: Scroll infinito */

Usuários desktop com mouse podem clicar em alvos de 10px. Mas fazemos todo mundo sofrer por causa dos usuários de celular.

Meu Manifesto Desktop-First

/* Estilos base: experiência desktop completa */
.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: você se vira */
@media (max-width: 768px) {
    .dashboard {
        display: block;
    }
    .sidebar {
        display: none; /* Desculpa */
    }
    .data-table {
        overflow-x: scroll; /* Boa sorte */
    }
    /* Adiciona link "Usar versão desktop" */
}

A Mentira do “Responsivo”

Design “responsivo” significa “quebrado em todo tamanho de tela”:

  • Desktop: Espaço desperdiçado em todo lugar
  • Tablet: Nem mobile nem desktop, o pior dos dois
  • Mobile: Faltando metade das features
  • Monitor 4K: Texto minúsculo ou botões enormes, escolha sua dor

Só faça sites separados:

site.com        - Experiência desktop completa
m.site.com      - Página "em breve" com link pro desktop

A Verdade do Form Factor

Ninguém preenche formulários no celular:

// Usuário desktop preenchendo form:
// Nome: ✓ (digitou em 2 segundos)
// Email: ✓ (autocomplete)  
// Endereço: ✓ (autocomplete)
// Cartão: ✓ (autofill)
// Tempo total: 30 segundos

// Usuário mobile preenchendo form:
// Nome: começa a digitar, é interrompido por notificação
// Email: @ precisa trocar de teclado
// Endereço: sugestões de autocomplete cobrem o form
// Cartão: desiste, salva nos favoritos pra depois
// Conversão: 0%

O Mito do Touch Screen

“Touch screens são o futuro!”

Touch screens são imprecisos, frustrantes, e deixam marcas de dedo em todo lugar:

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

// Mobile: vibes
finger.position = { x: "mais ou menos 400", y: "talvez 280" };
tap();
// Você acertou o botão ou o anúncio do lado?
// Vamos descobrir!

Comportamento Real do Usuário

Jornada do usuário desktop:
1. Abre o site
2. Completa a tarefa
3. Sai

Jornada do usuário mobile:
1. Abre o site
2. Recebe notificação
3. Verifica notificação
4. Esquece o que estava fazendo
5. Abre Instagram
6. 45 minutos passam
7. Lembra do site
8. Site pede pra instalar o app
9. Fecha o site
10. Nunca volta

Quando Mobile-First Faz Sentido

  1. Seu app é o Instagram
  2. Seu app é um jogo
  3. Seu app é… não, é basicamente só isso

Pra todo o resto—banco, email, documentos, compras, trabalho de verdade—desktop é rei.

O Custo do CSS

Arquivo CSS mobile-first:
- Estilos base mobile: 200 linhas
- Breakpoint tablet: 500 linhas
- Breakpoint desktop: 800 linhas
- "Corrigindo edge cases": 3000 linhas
- Overrides !important: 47 por arquivo
- Profundidade de aninhamento media query: 4 níveis
- Sanidade do dev: 0

Arquivo CSS desktop-first:
- Estilos desktop: 500 linhas
- Mobile: banner "use versão desktop"
- Felicidade do dev: Máxima

O site pessoal do autor é otimizado para monitores 1024x768. Fica perfeito no Dell 2008 dele. Usuários mobile veem uma barra de scroll horizontal e uma mensagem: “Gire para paisagem e aperte os olhos.”