O mundo é governado por dispositivos móveis, por isso faz sentido desenvolvermos para dispositivos móveis em primeiro lugar, mas estaremos deixando o computador tradicional para trás?
Eu era criança, quando os telefones celulares não tinham telas e os modems de computador faziam barulhos engraçados ao conectar-se à “World Wide Web”. Para mim, a ideia de ter um computador na palma da mão era algo que acontecia em filmes de ficção científica ou desenhos animados nas manhãs de sábado. E, no entanto, aqui estamos: o mundo tornou-se móvel.
Na época em que a Apple lançou o iPhone em 2007, poucos de nós podíamos prever o quanto o smartphone mudaria a forma como nos relacionamos com a tecnologia, a Internet e a sociedade. Para se ter uma ideia, em 2012 o tráfego mundial de dados móveis ascendeu a 1,12 exabytes por mês. Em 2022? 77,49 exabytes. O crescimento da indústria móvel é diferente de tudo que já vimos antes.
Desde 2018 metade do tráfego da Internet se deve a dispositivos móveis, incluindo smartphones e tablets. Isso é apenas transmissão de dados, veja bem. Se olharmos para a participação de mercado, veremos um quadro muito diferente. Em 2022, dispositivos móveis têm quase 60% do mercado, enquanto os computadores ocupam apenas cerca de 40%. Poderíamos transmitir mais dados por PC, mas o mercado de usuários de telefones é simplesmente maior.
Em sua ligação para investidores no segundo trimestre de 2022, a Activision Blizzard, o estúdio por trás do jogo de enorme sucesso World of Warcraft e do rolo compressor que é Call of Duty, relatou que seu divisão móvel ganhou mais dinheiro do que o resto de seus produtos combinados. O culpado? Um joguinho chamado Candy Crush. Os sinais estão aí: temos que visar o mercado móvel.
CSS que prioriza dispositivos móveis
Móvel primeiro é definido de muitas maneiras. Filosoficamente, o princípio orientador é que a experiência móvel deve estar na frente e no centro do processo de desenvolvimento de software. Sim, isso significa dar prioridade às necessidades do mercado móvel.
Do ponto de vista da codificação, CSS mobile-first significa que escrevemos o estilo da interface de tal forma que dispositivos menores possam acessar suas instruções sem ter que percorrer as instruções para monitores de desktop. Em outras palavras, é escrever primeiro o código para dispositivos móveis.
A questão é: por quê?
- A experiência no desktop é muito diferente da experiência no celular, desde o tamanho da visualização da tela até a forma como interagimos com a tela. Rolar e tocar são muito diferentes de usar o mouse.
- Como os dispositivos inteligentes muitas vezes transmitem dados através de conexões limitadas com custos extras, a economia de dados é extremamente importante.
- Os sinais telefônicos tendem a ser menos confiáveis do que o acesso à Internet no desktop, o que significa que as páginas da Web com uso intensivo de dados podem não carregar corretamente devido a sinais ruins ou velocidades lentas da Internet.
Em outras palavras, não apenas a base de usuários potenciais de dispositivos móveis é maior, mas há mais variáveis a serem levadas em consideração que tornam o design de aplicativos ou páginas da web mais complicado. Posso garantir que navegar em uma página da web projetada para dispositivos móveis em um PC é muito menos frustrante do que o contrário.
Construindo do zero
Considerando que a Internet existe há muito mais tempo do que os dispositivos móveis, não é surpresa que as abordagens mais tradicionais para projetar páginas da web se concentrem principalmente na experiência do desktop. Um exemplo comum disso é escrever uma folha de estilo extensa e, em seguida, usar consultas de mídia de largura máxima na parte inferior do código para “desfazer” o material extra para dispositivos desktop.
É como se o processo fosse algo como “Tenho minha tela grande e agora preciso descobrir a largura máxima do dispositivo móvel para ajustar minha página”. Essa é uma abordagem que prioriza o desktop.
Uma alternativa é o que chamamos aprimoramento progressivo. Com essa abordagem, uma página web fica mais sofisticada quando o dispositivo é maior ou mais poderoso. O processo começa com a criação de uma página web para o menor denominador comum e, em seguida, adicionando mais e mais funcionalidades para outros dispositivos.
Desta forma, garantimos que as principais funcionalidades do nosso produto web serão executadas em todos os dispositivos, desde um computador de ecrã panorâmico até ao mais pequeno dos smartphones.
Construindo para o Futuro
Se existe uma constante no mundo dos dispositivos móveis, é que não existe uma constante. Os smartphones estão cada vez maiores e os tablets vêm em todos os formatos e tamanhos imagináveis. Tentar construir um estilo baseado na largura esperada do dispositivo é um problema prestes a acontecer.
Em vez de, o tamanho da página web deve ser guiado pelo seu conteúdo. Em outras palavras, os pontos de interrupção não devem ser criados para tamanhos de tela específicos, mas sim com base em onde o conteúdo precisaria ser realocado com base no espaço disponível. Isso pode exigir uma mudança na nossa maneira de pensar, mas quando dá certo, não é tão complicado.
E quanto às imagens?
As imagens são a ruína das páginas da web que priorizam os dispositivos móveis. Eles não apenas consomem uma quantidade comparativamente grande de largura, mas também são extremamente difíceis de encaixar em todos os dispositivos concebíveis. Em vez de imagens, muitos desenvolvedores estão optando por gradientes CSS3 e ícones de fontes como alternativas leves.
Se você precisar veicular imagens, considere ter imagens diferentes para dispositivos diferentes. O impacto no armazenamento é mínimo, mas em termos de transferência de dados, há uma grande diferença entre baixar uma imagem 4K e uma imagem 480.
Isso é necessário?
Se o CSS mobile-first é tão importante, por que nem todo mundo já está fazendo isso? Como mencionei antes, a Internet é muito mais antiga que os dispositivos móveis e algumas práticas tornaram-se tão arraigadas que é realmente difícil abandonar o hábito. Passo a maior parte do tempo codificando na frente da tela do computador; peça-me para imaginar uma página da web e minha mente pensará imediatamente em um monitor. É natural que os desenvolvedores sejam tendenciosos em relação às nossas ferramentas de trabalho.
Mas a verdade é que o mercado móvel está crescendo e a fronteira entre dispositivos móveis e PCs está diminuindo a cada dia. Portanto, temos de começar a olhar para os dispositivos móveis não como uma alternativa desconfortável aos nossos enormes ecrãs, mas como o que realmente são, uma tecnologia que já é popular. À medida que o mercado cresce, crescem também as nossas oportunidades de alcançar novos utilizadores. Como diz o velho ditado, temos que bater enquanto o ferro está quente.
