Gabriel Milanez

21 Mar, 2023

O que é Mobile-First Design

No dia-a-dia do Desenvolvedor Web, nos deparamos com diversos tipos de demandas e necessidades que surgem de dentro das instituições em que trabalhamos ou até mesmo de terceiros, seja um freelance ou até mesmo uma ajudinha pra criar um portfólio personalizado pra aquele amigo de infância.

Em todos os casos, é necessário entendermos o objetivo daquele produto que vamos projetar, assim como onde vamos usá-lo, pra que consigamos pensar nas ferramentas mais apropriadas durante o processo de desenvolvimento.

No caso de muitos sites e aplicações voltadas para a Web, é de se imaginar que o uso não ficará restrito ao "modelo desktop", ou seja, ao uso em computadores e notebooks pessoais. Na era da web 3.0, onde o compartilhamento e uso de dados é muito mais intenso e frequente, o uso de dispositivos móveis é imprescindível para a esmagadora maioria desses serviços.

Com essa necessidade, começamos a ter novos métodos de desenvolver esses sistemas para a web. Ao invés de seguir o velho caminho natural de desenvolver para telas maiores e adaptar o conteúdo para telas minificadas, surgem tecnologias que nos ajudam a fazer o caminho contrário: desenvolver primeiro o mobile, depois o desktop.

O conceito aplicado em projetos web onde o foco inicial da arquitetura e desenvolvimento é direcionado aos dispositivos móveis e depois ao desktop é conhecido como mobile-first design.

O Mobile-First foi idealizado por Luke Wroblewski entre os anos de 2009 e 2010 em seu blog pessoal, porém também foi publicado no livro : "Mobile First" que se encontra disponível na "A Book Apart".

Uma das ferramentas mais utilizadas para desenvolvimento nesse conceito é o TailwindCSS. Por padrão, o Tailwind usa um primeiro sistema de ponto de interrupção móvel, semelhante ao que você pode usar no Bootstrap ou no Foundation.

O Tailwind utiliza os prefixos sm, md, lg e xl para definir tamanhos para dispositivos. Isto significa que quando não utilizados algum desses prefixos, a estilização será efetuada em todos os tipos de telas. Porém, quando definimos um tamanho específico como "md" as estilizações só serão aplicadas em telas maiores que 768px.

Responsividade muitas vezes dá dor de cabeça, mas por ser prático, o Tailwind assim como o mobile-first, facilita e otimiza o tempo de desenvolvimento de uma aplicação e são cada vez mais utilizados por novos usuários.

Que tal dar uma praticada com esses novos conceitos que vimos? Como usuário do Tailwind, recomendo e digo que quando começarem a utilizar, dificilmente vocês vão querer parar de usar.