O crescimento do uso de smartphones transformou a maneira como as pessoas acessam a internet.
Atualmente, muitos usuários acessam sites e sistemas principalmente através de dispositivos móveis.
Mobile First é uma estratégia de desenvolvimento onde o projeto da interface começa pela menor tela, geralmente smartphones.
Após criar a versão mobile, são adicionados recursos para tablets e computadores.
| Desktop First | Mobile First |
|---|---|
| Começa pelo computador | Começa pelo smartphone |
| Adapta para telas menores | Expande para telas maiores |
| Pode gerar excesso de elementos | Prioriza o essencial |
| Etapa | Descrição |
|---|---|
| 1 - Planejamento | Definir objetivos e conteúdos principais |
| 2 - Wireframe Mobile | Criar estrutura para smartphone |
| 3 - HTML | Criar estrutura da página |
| 4 - CSS | Adicionar estilos e responsividade |
| 5 - Expansão | Adaptar para telas maiores |
<header>
Logo
</header>
<main>
Conteúdo principal
</main>
<footer>
Informações finais
</footer>
A estrutura deve ser simples para funcionar bem em dispositivos pequenos.
No Mobile First, o CSS inicial é criado para telas pequenas.
body {
font-size: 16px;
padding: 10px;
}
.container {
width: 100%;
}
Depois da versão mobile, utilizamos Media Queries para aumentar o layout.
@media (min-width: 768px) {
.container {
width: 80%;
}
}
| Vantagem | Benefício |
|---|---|
| Desempenho | Páginas mais rápidas |
| Usabilidade | Melhor experiência no celular |
| Organização | Foco no conteúdo principal |
| Manutenção | Código mais simples |