O conceito de mobile-first, defendido por Luke Wroblewski desde 2009, prioriza o desenvolvimento focado em conteúdo para dispositivos móveis. Essa estratégia enfatiza a simplicidade, gestão de UX, e prática de progressive enhancement, mas enfrenta desafios como a necessidade de conhecimentos específicos e a limitação criativa. Diferente do desktop-first, que começa com telas maiores, o mobile-first propõe uma abordagem flexível onde a estrutura é adaptativa a diferentes dispositivos.

2. W E L C O M E
M O B I L E - F I R S T

3. N I N G U É M S A B E
Q U A N D O
S U R G I U ?
Primeiros esboços sobre o assunto em 2009
M O B I L E - F I R S T

4. L U K E WROBLEWSKI
Q U E M ?
Um dos primeiros a defender (com embasamento)
as melhores PRÁTICAS para desenvolvimento mobile.
Livro marco Mobile First: Luke Wroblewski
M O B I L E - F I R S T

5. S I M P L E S E O B J E T I V O
N A P R Á T I C A
Mobile-first nada mais é do que um conjunto de ideias voltadas para o
desenvolvimento mobile e focadas em conteúdo.
Alguns conceitos: Estratégia de conteúdo, responsive design,
performance, ergonomia e usabilidade (UX).
M O B I L E - F I R S T

6. C U S T O M E R - F I R S T
P O R Q U E
U T I L I Z A R ?
• Prioriza conteúdo;
• Parte da simplicidade;
• UX na veia;
• Tendências nascem aqui;
• Interação mais intensa;
• Progressive enhancement.
M O B I L E - F I R S T

7. N E M T U D O S Ã O F L O R E S
P R Ó S E C O N T R A S
PRÓS
• Foco no conteúdo;
• Objetividade;
• Performance;
• Estratégia;
• UX;
• Progressive enhancement;
• Manutenção acessível;
CONTRAS
• Tempo;
• Estratégia;
• UX;
• Requer paciência;
• Conhecimentos específicos;
• Pouca documentação;
• Limitação criativa;
• Quebra anos de padronizações;
M O B I L E - F I R S T

8. E P O R Q U E N Ã O U T I L I Z A R !
D E S K T O P - F I R S T
• O Processo de produção começa por telas maiores, melhores tecnologias e, após
o desenvolvimento, ajustes são realizados em devices menores e/ou browser
com maiores fatias de mercado.
• Exige menor tempo para concepção de projeto, porém exige muito tempo na
correção de bugs e gestão de dispositivos..
M O B I L E - F I R S T

9. E S T R A T É G I A É A C H A V E
D E S K T O P > M O B I L E
M O B I L E - F I R S T

10. P A R A A G R A D A R A T O D O S
E N T R E G A P O R
D E M A N D A S
M O B I L E - F I R S T
• A flexibilidade é umas das melhores características desse novo/velho paradigma
de desenvolvimento.
• Projetos podem ser fragmentados, onde uma estrutura geral é adotada,
desenvolvida para desktop, porém, blocos de maior complexidade são
apresentados separadamente.

11. M O B I L E - F I R S T

12. N U N C A F O I T Ã O F Á C I L !
F E R R A M E N T A S
M O B I L E - F I R S T
• Sketch
• Figma
• Adobe XD
• NINJAMOCK
• Justinmind
• Proto.io
• InvisionApp (2018)

13. O B R I G A D Z