Por que você precisa começar a praticar o desenvolvimento mobile-first

Se você já tentou codificar um site responsivo, se deparou com este problema: você altera uma propriedade CSS pequena e simples e ela altera o layout em diferentes tamanhos de tela.

Isso força você a verificar e verificar novamente se o valor de margem mais recente não destruiu o site para tablets ou telefones. Obviamente, você pode corrigir esse problema facilmente com substituições específicas para diferentes tamanhos de tela. Mas ao longo de um projeto, os arquivos CSS ficam cheios de exceções para problemas. Depois, há exceções para as exceções, que depois têm uma exceção para a exceção da exceção.

Fica complicado rapidamente e você acaba lutando contra seu próprio código, consumindo muitas horas de projeto e perdendo lentamente sua sanidade.

Mas não tenha medo! O desenvolvimento mobile first está aqui para poupar você de dores de cabeça, exceções de exceções e carregamentos de página lentos.

O que acontece com o desenvolvedor que prioriza a área de trabalho

O desenvolvimento inicial para a versão desktop de um site responsivo vai contra o fluxo natural de um documento CSS. Os arquivos CSS são lidos linearmente de cima para baixo, de modo que cada propriedade CSS é substituída por qualquer novo estilo aplicado mais abaixo no documento.

Ao desenvolver para telas grandes e adicionar os estilos móveis mais abaixo no documento CSS, aparecem dois problemas:

1. Quaisquer alterações feitas no estilo da área de trabalho (mais alto no documento) alterarão a forma como o site para celular aparece se o novo estilo não for substituído explicitamente pelo site para celular. Criar linhas extras de CSS frívolo consome muitas horas de projeto e vai contra o princípio do código DRY.
2. Os dispositivos móveis começam a carregar uma página renderizando todo o estilo da área de trabalho. Uma vez que a versão para desktop tenha terminado de renderizar, o estilo mobile é aplicado. Isso carrega recursos extras, o que significa que os dispositivos móveis demoram ainda mais para entregar uma página totalmente carregada.

É aqui que entra o desenvolvimento mobile-first para salvar o dia. Esse método incentiva a ordem CSS correta (móvel para desktop, de cima para baixo), garantindo que um dispositivo aplique apenas as informações necessárias quando precisar.

Vamos dar uma olhada em algumas soluções para esses problemas.

Como é a renderização do dispositivo móvel

As imagens são facilmente os maiores contribuintes para o tamanho de um site, levando uma eternidade para baixar se um dispositivo não estiver conectado ao wifi. Remover imagens extras do seu estilo móvel é a melhor coisa que você pode fazer para melhorar a velocidade de um site.

Mudar primeiro para dispositivos móveis significa veicular apenas algumas imagens pequenas em dispositivos móveis. No exemplo abaixo, criei o mesmo documento CSS implementado com os métodos desktop e mobile-first.

Se você estiver usando o método de desktop, os dispositivos móveis serão renderizados na seguinte ordem:

1. Leia o primeiro estilo.
2. Faça o download da imagem grande (que será substituída em breve).
3. Renderize o elemento.
4. Leia o estilo móvel.
5. Baixe a imagem pequena (substituindo a grande).
6. Renderize o elemento novamente.

No entanto, se o método mobile-first for usado, o dispositivo renderizará nesta ordem:

1. Leia o primeiro estilo.
2. Baixe a pequena imagem.
3. Ignore o estilo somente da área de trabalho (já que não se aplica).
4. Renderize o elemento uma vez.

Não só o site tem menos etapas para executar antes de servir uma página finalizada ao navegador, mas também remove as chamadas extras para imagens frívolas que não são usadas!

Observe que as consultas de mídia mudarão de largura máxima para largura mínima com o desenvolvimento mobile-first. As consultas de largura máxima serão aplicadas a todos os dispositivos menores que 1.000 px, enquanto as consultas de largura mínima serão aplicadas a dispositivos maiores que 1.000 px.

A troca para largura mínima cria uma barreira que impede que o novo estilo que escrevemos para dispositivos maiores afete a aparência do site em dispositivos menores. Isso aumenta a velocidade de carregamento de seus sites responsivos, garantindo que qualquer alteração na consulta de mídia somente para desktop não afete seu layout móvel. É um ganha-ganha!

Pare de lutar consigo mesmo

Digamos que estamos trabalhando em um projeto que tem seu arquivo CSS comentado em três partes principais: desktop, tablet e mobile.

Infelizmente, seguimos o método de desktop, e o site está carregando lentamente para telefones. Tentamos diminuir o tamanho das imagens, adicionar cache do navegador e até reduzir o HTML (bruto). Mas o site ainda é lento para visitantes de primeira viagem e precisa ser consertado.

Como construímos nosso site com o método desktop-first, nosso CSS ficaria assim para nosso elemento .header:

Nosso objetivo é diminuir a quantidade de estilo que está sendo enviado para dispositivos móveis. Para começar, precisamos fazer um inventário do que está sendo aplicado a um elemento, tomando nota quando estamos sobrescrevendo nossos próprios estilos.

Primeiro, vamos mudar para uma abordagem mobile-first. Faremos o mobile nosso estilo padrão, não consultado por mídia (observação: não faça isso em produção, isso quebrará o site e deixará seus clientes mal-humorados).

Vamos dar uma olhada em nossas imagens novamente, pois elas têm o maior impacto na velocidade do nosso site.

Como não estamos carregando um plano de fundo em dispositivos móveis, podemos excluir essa propriedade. Adicionaremos as imagens para dispositivos maiores posteriormente, quando for realmente necessário. O mesmo vale para a propriedade margin-bottom, deixando-nos apenas duas propriedades que realmente precisam ser aplicadas para celular!

Passando para a seção do tablet, precisaremos mover os atributos do plano de fundo e o preenchimento do estilo da área de trabalho para o estilo do tablet, pois o tablet é a próxima seção que será renderizada.

Lembre-se, nosso objetivo é apenas sobrescrever uma propriedade se ela for alterada e apenas adicionar novas propriedades quando a alteração precisar acontecer, conforme mostrado na imagem abaixo:

Muito melhor! Ao examinar como um dispositivo móvel renderizaria nosso CSS recém-otimizado, rapidamente se torna aparente o impacto que o desenvolvimento mobile-first tem em dispositivos menores em comparação com o método desktop-first.

Trabalhe de forma mais inteligente, não mais difícil

Desenvolver desktop-first cria mais problemas do que corrige. “Mudar para um método de desenvolvimento mobile-first permite que você trabalhe de forma inteligente, não difícil. ”

Ao desenvolver sites responsivos, lembre-se de que, por padrão, tudo o que não estiver dentro de uma consulta de mídia será exibido. Ao fazer com que o estilo padrão (não consultado por mídia) atenda a dispositivos móveis, permitimos que a menor quantidade possível de informações seja enviada para o dispositivo que é mais facilmente afetado pelo tamanho dos sites.

Desktops e tablets são conectados a uma conexão de internet rápida 99,999% do tempo, permitindo que grandes quantidades de informações sejam transmitidas em alta velocidade. Os telefones são os mais propensos a carregar informações em conexões de internet lentas. Ajustar suas folhas de estilo para acomodar os dispositivos mais sensíveis permite que você ofereça o melhor site possível aos clientes.