1 – A tipografia pode ser responsiva
Os designers normalmente utilizam o pixel como unidade de medida, mas dispositivos diferentes têm resoluções diferentes, um ponto não é mais necessariamente igual a um pixel. O iPhone X por exemplo, tem 458 PPI (Pixels por polegada), logo os tamanhos de pixel estão ficando menores, somos capazes de obter gráficos mais nítidos no mesmo espaço físico (a Apple chama isso de tecnologia “Retina”, e o Android a chama “HDPI”).
Isso significa que um tamanho de fonte de 16px, por exemplo, pareceria maior ou menor em alguns dispositivos dependendo de sua resolução. Os desenvolvedores da Web normalmente usam unidades em para definir tamanhos de fonte , que são um tipo de unidade responsiva em que 1em é igual a 1 ponto.
É importante considerar a legibilidade do seu site em todas as plataformas e dispositivos, mas no celular, você precisa estar muito mais atento a essas necessidades. Se as pessoas não conseguem ler seus textos ou qualquer parte de seu conteúdo, provavelmente não ficarão por muito tempo no seu site. Escolher fontes que trazem boa leitura em telas pequenas é essencial. Lembre-se de equilibrar os tamanhos das fontes para os cabeçalhos o corpo do texto.
2 – Use gráficos vetoriais escaláveis (SVGs)
SVGs ou Scalable Vector Graphics são essenciais para qualquer design responsivo que utilize ilustrações ou ícones. Ao contrário dos arquivos de imagem (JPG / PNG), os SVGs são infinitamente escaláveis. Você pode ficar tranquilo sabendo que qualquer ícone ou gráfico permanecerá extremamente nítido em todas as experiências, sem ter que se preocupar com a resolução ou pixelização. Isso resulta em uma aparência “lisa” sem ruídos, independentemente de como o site está sendo visualizado. Além disso, os SVGs geralmente têm um tamanho de arquivo menor, ajudando site a carregar mais rápido.
3 – Padronizar áreas clicáveis e botões
No celular, os botões e links serão tocados por um dedo humano, não por um clique preciso do mouse , portanto, as áreas interativas precisam ter uma área de toque maior. É recomendado que qualquer elemento clicável em um dispositivo móvel tenha pelo menos 48 pixels de altura. Isso significa que você precisa otimizar botões, inputs de formulários, links embutidos em textos, links de navegação e muito mais.
4 – Imagens responsivas
Dispositivos diferentes têm necessidades de tamanho de imagem diferentes. Uma projeto para desktop pode precisar de uma imagem de 1200 px de largura em resolução total, enquanto a versão móvel dessa página pode precisar dessa imagem apenas de 400 px de largura. Isso é efetivamente um terço do tamanho físico, o que se traduz aproximadamente em um terço do tamanho do arquivo também. É importante ter isso em mente.
A maneira antiga era salvar as imagens em grande resolução (1200px) e, em seguida, usar o mesmo arquivo em todas as plataformas de dispositivo . O problema é que esses arquivos ficavam grandes diminuindo drasticamente o tempo de carregamento do site. Para uma experiência responsiva ideal, é melhor usar duas versões diferentes da mesma imagem para celular e desktop.
Por exemplo, no celular, estamos usando apenas a imagem de 400px em vez da imagem grande de 1200px, que seria reduzida para 400 px depois de carregada. Combine isso em uma página com várias imagens e você pode acabar com uma experiência de carregamento muito mais rápida, especialmente se a versão mobile do site estiver sendo carregada utilizando o serviço da sua operadora de celular e não no wifi.