Media Queries

Mobile First é um conceito criado visando priorizar a visualização de sites em dispositivos móveis. Isso não é a mesma coisa que criar um site responsivo para celular, isso significa criar um site para celular e deixá-lo responsivo para notebook e outras telas. Por isso o nome Mobile First.

Mas por que isso é importante? A resposta é simples: por onde você mais acessa a internet, pelo celular ou pelo notebook? Talvez você, especificamente, esteja acessando mais pelo notebook por estar estudando, mas a maioria esmagadora das pessoas acessa a web pelo celular. Por isso, o conceito de Mobile First foi criado. Se a maior parte dos usuários consome conteúdo por uma tela de smartphone, então essa deve ser a prioridade na hora de fazer o site.

Quando criamos um site primeiro para desktop ou notebook e depois adaptamos para smartphone, essa adaptação pode não ficar tão boa. Mesmo que o site seja responsivo, isso ainda não é tudo. Existem vários fatores que influenciam na usabilidade do site. Um dos principais é a diferença entre a utilização de um mouse e uma tela touchscreen. Isso vai desde o tamanho dos botões até as interações do CSS3.

Por exemplo, em um desktop, você pode ter menus que aparecem quando o usuário passa o mouse sobre eles. No celular, isso não funciona da mesma forma, pois não há "passar o mouse". Além disso, o tamanho dos botões e links precisa ser maior para facilitar o toque com os dedos.

Se o conteúdo é confortável de consumir pelo celular, isso te dá um grande destaque. Seus usuários de smartphone ficarão mais tempo navegando no seu site, o que é ótimo para o SEO (Search Engine Optimization). Por outro lado, se o site é difícil de usar no celular, os visitantes podem sair rapidamente, prejudicando sua posição nos resultados de busca.

Principais Vantagens do Mobile First

• Maior divulgação do site: Ferramentas de busca vão valorizá-lo.
• Melhor experiência do usuário: O usuário terá acesso ao conteúdo que foi pensado para ser consumido de forma mais confortável e sem confusões.
• Aumento na credibilidade: Os visitantes terão a percepção (ainda que inconsciente) de que quem criou o site se preocupou com a sua experiência.
• Otimização do carregamento: Uma vez que sofremos com conexões lentas e dispositivos populares sem tanto poder de processamento.

Mudança na prática

Trabalhar com o conceito Mobile First traz algumas mudanças importantes na nossa abordagem. Vamos ver as principais diferenças:

• Teste em celular: Normalmente, quando criamos uma página no VS Code, escrevemos o código e verificamos como ficou no navegador do computador. Com o Mobile First, faremos isso usando a tela de um celular. Você pode usar extensões no navegador que simulam a tela de um celular, como o modo de desenvolvedor do Google Chrome.

Porém, essas extensões não são perfeitas. Por isso, é essencial publicar o site no GitHub e verificar regularmente suas atualizações diretamente no seu celular. Isso garante que você veja exatamente como os usuários vão visualizar seu site.

• Media Query: Até agora, usamos media queries para adaptar o conteúdo do site para o celular, e o "ALL" era baseado na tela de um notebook. Com o Mobile First, o "ALL" será baseado no celular, e usaremos media queries para adaptar o site para outras telas, como tablets e desktops.

Por exemplo, antes você poderia ter um media query assim:

@media screen and (max-width: 600px) {...}

Isso adaptava o site para telas menores que 600px, como celulares. Agora, com o Mobile First, você pode começar com o estilo para celular e adicionar media queries para telas maiores:

@media screen and (min-width: 601px) {...}

Isso significa que o estilo padrão será para celulares, e você adiciona regras específicas para telas maiores. Essa abordagem garante que o site funcione bem em dispositivos móveis, que são a maioria dos acessos hoje em dia.

Os breakpoints de dispositivos são pontos de interrupção que definem a largura em pixels de diferentes dispositivos, como TVs, celulares, tablets, desktops e outros. No entanto, medir em pixels pode se tornar obsoleto rapidamente, pois a densidade de pixels das telas aumenta com o tempo. Por exemplo, uma tela de celular 4K tem tantos pixels quanto uma tela de um dispositivo quatro vezes maior com resolução HD.

Para nos mantermos atualizados sobre os tamanhos de tela, é importante consultar fontes confiáveis, como o site da W3Schools, que fornece informações sobre os tamanhos de tela recomendados para configurar cada dispositivo.

Tamanhos de tela atuais

De acordo com a W3C, os tamanhos de tela atuais para cada dispositivo são:

• Celulares e menores: até 600px

@media only screen and (max-width: 600px) {...}

• Tablets em modo retrato e celulares grandes: 601px a 768px

@media only screen and (min-width: 601px) and (max-width: 768px) {...}

• Tablets em modo paisagem: 769px a 992px

@media only screen and (min-width: 769px) and (max-width: 992px) {...}

• Desktops: 993px a 1200px

@media only screen and (min-width: 993px) and (max-width: 1200px) {...}

• Telas extra grandes: acima de 1200px

@media only screen and (min-width: 1201px) {...}

Esses breakpoints ajudam a criar layouts responsivos que se adaptam a diferentes tamanhos de tela, proporcionando uma melhor experiência de usuário em qualquer dispositivo.