Considerando a velocidade com que a internet móvel está crescendo, nenhum webdesigner pode acreditar que seu site será visto apenas em desktops. O site precisa estar preparado para aceitar visitantes oriundos dos mais diversos dispositivos, com as mais diversas dimensões de telas e as mesmas necessidades.
Para resolver esse problema foi criado o design responsivo, a técnica para criação de sites flexíveis que se adaptem à maioria das telas onde será exibido.
Se você espera que seu site tenha esta flexibilidade, é bom seguir estas 7 dicas:
1) Usuários de dispositivos móveis merecem a mesma qualidade de navegação
Lembra-se quando era preciso criar sites que funcionassem da mesma forma em diferentes navegadores? Parece até que foi ontem. E foi mesmo. Bem, o princípio continua valendo: certifique-se de que a experiência de uso seja a mesma para diferentes usuários.
“O que isso significa?”, você pode estar perguntando agora. Significa que a aparência do seu site e sua estrutura visual podem até se alterar dependendo do dispositivo, mas devem parecer similares e as funções devem permanecer imutáveis. Um visitante acessando suas páginas a partir de um computador de mesa deve desfrutar da mesma experiência de um visitante usando uma tela de 4 polegadas em um smartphone.
Isso significa flexibilizar tudo e garantir que todas as imagens, conteúdo e encadeamentos sejam fluidos e se reconfigurem de acordo com a largura da tela.
2) Crie seu site pensando em flexibilidade
Quando você está montando o esboço do seu site enquanto vai elaborando o código antes de juntar tudo no design, é preciso entender que há layouts que são perfeitos para design responsivo e outros que não funcionam por nada nesse mundo. Traduzindo: há modelos que convertem bem para novos tamanhos de tela melhor que outros graças a sua estrutura.
“O que isso significa?”, você pode estar perguntando outra vez. Significa: crie um layout simples que exija um HTML simples e use mecanismos simples para elementos fundamentais, como navegação e opções de menu.
Evite completamente DIVS complexas, posicionamento absoluto, truques excessivos de Javascript ou elementos em Flash que irão apenas complicar o ajuste do site no final do dia.
3) Respeite os limites
Larguras de tela podem vir em diversos tamanhos e, em alguns casos, o usuário ainda pode definir a sua própria. Mas alguns padrões podem ser definidos como pontos focais para o seu layout. Então, fique atento para esses limites:
<480px (que se aplica para telas de smartphones mais antigos e menores)
<768px (que é ideal para smartphones mais largos e tablets menores)
>768px (que se aplica aos dispositivos maiores como tablets grandes e telas de desktop)
Se você tiver energia e tempo, pode ainda se concentrar nas larguras abaixo:
<320px (para aqueles telefones realmente antigos de baixa resolução)
>1024px (para telas largas em desktops, como você provavelmente já está fazendo hoje em dia)
Estes são padrões básicos para se focar, o que pode ser facilmente alcançado usando media queries.
4) Torne suas imagens flexíveis
Com um design mais simples, você pode tornar suas imagens igualmente flexíveis, até um certo grau. A forma mais fácil de implementar isso é usando dimensionamento adaptativo e e redimensionando a sua largura.
Você pode fazer isso de diversas formas, mas um dos métodos mais fáceis para atingir esse objetivo é com essa ferramenta: Adaptive Images. Mantenham em mente que dimensionar de acordo com as necessidades dos usuários móveis é a melhor aposta para seu design responsivo se você deseja obter uma boa velocidades de carga, o que para aparelhos móveis é crucial.
Outra alternativa seria armazenar múltiplos tamanhos de imagens de acordo com as dimensões de tela listadas acima, mas isso pode se tornar um problema se você não tem a garantia de que seus usuários acessarão com banda larga.
5) Permita a compressão de elementos do site e do conteúdo
Use um programa como o GZIP para comprimir seus recursos da página para facilitar a carga através das redes. Se você reduzir o peso dos elementos enviados em cada página, seu conteúdo se tornará mais fácil para navegar e acessar a partir de dispositivos com conexões lentas.
Se se sentir inspirado, você pode acelerar as coisas ainda mais, removendo todos os espaços em branco desnecessários e quebras de linha do seu código.
6) Livre-se do que não é essencial
Falando em livrar-se do que é desnecessário, você pode melhorar ainda mais a flexibilidade do seu site e torná-lo mais amigável para dispositivos móveis se seguir uma regra simples: alguns elementos e certos conteúdos nunca foram feitos para serem usados em um contexto móvel e simplesmente não funcionam.
Se você tem elementos que não são imprescindíveis para seu layout, então descarte-os por completo do ambiente móvel. Isso pode ser realizado com uma classe específica a ser aplicada, algo como .notmobile, por exemplo. No CSS, especifique que todos os elementos marcados por esta classe não devem ser exibidos quando a página carregar em dispositivos móveis.
7) Lembre-se do mínimo denominador comum
Se for seguir apenas uma das sete dicas aqui expostas, siga pelo menos essa: se você deseja que seu design responsivo funcione bem, você precisa construi-lo para que ele carregue e funcione rapidamente em dispositivos com baixa resolução, pouco poder de processamento e baixa velocidade de conexão. Isso significa um site bem organizado que se mantém fixo em sua função principal com o máximo de foco.
