Luke Wroblewski deu nome à prática em 2009, mas a lógica já era urgente. Os telemóveis tinham-se tornado a principal forma de acesso à internet, e desenhar layouts para desktop obrigava primeiro os designers a adaptar a complexidade para ecrãs mais pequenos mais tarde. A abordagem "mobile-first" inverte esta ordem. Começa-se pelo ecrã mais pequeno, decide-se o que é mais importante e depois expande-se para os layouts de tablets e desktops.

A restrição é produtiva. Uma área de visualização estreita obriga à priorização. A navegação condensa-se num menu. O conteúdo move-se para uma única coluna. Cada recurso precisa de justificar o seu espaço. Os designers esboçam alvos de toque fáceis de utilizar com o polegar, consideram a utilização com uma só mão e planeiam para ligações lentas. Quando o design cresce para um ecrã maior, é utilizado espaço extra para criar mais espaço e painéis secundários, em vez de ser preenchido com novos elementos desnecessários.

Práticas essenciais

• Comece os wireframes à largura do telefone.
• Dê prioridade à hierarquia de conteúdo de forma implacável.
• O design deve abranger áreas de toque com pelo menos 44 pixels.
• A expansão para os tablets e, por último, para os computadores.

O design responsivo e a prioridade para dispositivos móveis geralmente andam juntos. A prioridade para dispositivos móveis define a funcionalidade principal. O design responsivo encarrega-se da adaptação a diferentes tamanhos de ecrã.