Os 10 mandamentos do profissional em Web Design sobre Layout Responsivo

Saiba quais são os 10 mandamentos do profissional em Web Design sobre Layout Responsivo

 1 Conheça o seu público-alvo

Antes mesmo de iniciar um projeto, é fundamental descobrir quem é o público-alvo e qual tipo de dispositivo ele possui. De onde o site será acessado e qual o objetivo do usuário em cada equipamento são questões que não podem ser esquecidas. A partir daí, saiba qual conteúdo faz sentido em cada contexto de uso. Se o usuário de um desktop está acessando o site de um restaurante, é possível que tenha tempo para ver fotos do lugar e conhecer o chef da cozinha. Outra situação é se está acessando o mesmo site de um celular, possivelmente está dentro do carro, parado em fila dupla, e precisa confirmar o endereço o quanto antes. Priorize o conteúdo para cada caso e retire o que não for necessário.

 

2 Pense no todo

Faça um levantamento do conteúdo do site e liste as funcionalidades e conteúdo que ele terá. Numere em ordem de importância e pense no conteúdo para cada contexto, porque as pessoas não têm tempo nem paciência para ler grandes blocos de texto, ainda mais se estão navegando no celular. Para ele, a quantidade de texto pode e deve mudar dependendo do contexto de uso. Mas vá com muita cautela, remover indiscriminadamente conteúdo de usuários mobile é um risco. O melhor é adaptar o que for possível e deixar tudo disponível para todos.

 

3 Adote o mobile primeiro

Pensar primeiramente para a plataforma mobile não deixa margem para excessos de conteúdo. Pensar nos celulares primeiro nos ajuda a manter o foco, a melhorar a arquitetura da informação e a usabilidade. Uma sugestão é começar pelo celular mais simples e evoluir o design até chegar ao desktop completo.

 

4 Foque no tamanho das imagens

Carregue imagens diferentes para cada tamanho de tela. Se o site possui uma imagem gigante na homepage, carregá-la na versão mobile do site deixará o HTML muito pesado. Lembre-se de salvar tamanhos diferentes de cada imagem e, no caso de ícones, tente trabalhar com vetores sempre que possível. Entretanto existem soluções melhores do que apenas redimensionar as imagens. É possível servir outros arquivos menores e mais compactados. Forçar o cliente a baixar um arquivo gigante para ver numa tela muito menor do que um desktop não é nada legal. Felizmente, hoje temos plataformas mais modernas que já aplicam os elementos e conteúdo do site ou blog uma folha de estilo para as mídias móveis como Tables, iPad, iPhones e Smartphones.

 

5 Otimize o peso do site

A dica é trabalhar com carregamento progressivo de informações. Alguns sites forçam o usuário de celular a carregar todo o conteúdo da versão desktop, e depois ocultam alguns conteúdos. Isso é ruim, porque o conteúdo já foi carregado e não será visualizado. Lembre-se de que os usuários de celular estão em uma conexão 3G. É preciso pensar em desempenho o tempo todo. Otimizar a velocidade de um site é essencial para dispositivos menos capacitados. Indicamos passar o conteúdo estático (imagens, javascritps, folhas css) por compressores. O Photoshop tem bons compressores e o resultado é bem satisfatório.

 

6 Faça navegação customizada

Desenhe a navegação para cada dispositivo ou grupo de dispositivos. Pense em como o menu se comporta em um desktop, em um tablet, em um smartphone e em uma TV de 60 polegadas. Lembre-se de que em alguns casos, o usuário está usando um mouse; em outros, o próprio dedo, ou até mesmo o controle remoto da TV ou do videogame. Adaptar um design a diferentes dispositivos não é só pensar no tamanho da tela, é se preocupar na navegabilidade. Pense em touch screen, recursos de hardware, orientação do dispositivo, telas retina e muito mais.

 

7 Simplifique sempre

Depois que o projeto estiver pronto, dê mais uma olhada em cada página e comece a simplificar. Retire imagens desnecessárias, textos muito longos e funcionalidades que ninguém vai usar quando estiver navegando no smartphone. Uma boa opção é evitar bibliotecas JavaScript mirabolantes que prometem mágicas no design responsivo. Prefira CSS puro sempre que der e soluções simples e leves. Lembre-se da limitação dos dispositivos. Arquivos muito grandes não são cacheados. Portanto, não importe bibliotecas javascripts gigantes para coisas simples. Vale muito mais a pena escrever um certo efeito na mão, no javascript puro, do que carregar um jQuery apenas para fazer um display.

 

8 Testes, muitos testes…

Tenha em mãos dispositivos com resoluções diferentes, sistemas operacionais variados (Mac, Windows, iOS, Android…) e navegadores diferentes (Internet Explorer, Chrome, Safari…). Teste abrir o site em uma Smart TV, em um videogame, em um aparelho de GPS. Nem sempre é possível planejar tudo apenas no layout. Não se esqueça de que você está desenhando para pessoas comuns, e não para designers e programadores. Coloque o quanto antes o seu site à prova. Colher feedback de usuários reais é a melhor forma de garantir que a experiência que você desenhou será usada para valer quando o projeto for para a rua. Mas, calma, é impossível satisfazer a todos, relaxa e faça o seu melhor.

 

9 Fique de olho na usabilidade

Não adianta fazer um site responsivo se ele não tiver uma boa usabilidade. Faça botões grandes porque usamos sites nos mobiles, com nossos dedos. Na maioria das vezes, com os dedões. Eles não são precisos como os mouses. Deixe bons espaçamentos entre uma área de ação e outra. Dar um tap sem querer em um lugar quando se queria ir a outro não é legal, você faz o usuário perder tempo.

 

10 Use “Macetes”, seja criativo e aplique novas saídas

Use alguns “truques” capazes de melhorar o resultado final do projeto. Use ‘em’ e porcentagens em todas as medidas no CSS e não ‘px’ (pixel) com valores fixos. Isso auxilia no resultado responsivo. Prefira ‘em’ inclusive nas media queries. Escreva suas media queries pensando em breakpoints de design, não em larguras fixas de certos dispositivos. Faça imagens, vídeos, widgets, anúncios e outras mídias também se adaptarem responsivamente. Use a meta tag viewport sempre com ‘width=devicewidth’. E não esqueça do CSS@viewport para navegadores mais novos, como o IE 10.  Melhor mesmo é carregar o conteúdo sob demanda. Use ajax para isso. Traga o conteúdo quando o usuário pedir e lembre-se sempre da limitação da rede.

Gostou desse artigo? COMPARTILHE ou faça seu COMENTÁRIO abaixo. Até.

Marco Skita.

Marco Skita
Marco Skita
Web Designer e fundador deste Blog, formado pela Universidade Anhembi Morumbi em São Paulo - SP, no curso de DESIGN DIGITAL. A mais de 15 anos me especializei em Website Corporativo atuando em várias frentes de trabalho em conjunto, Mídia Digital, Impressos e Marketing , trilhei o caminho da CRIAÇÃO e num segundo momento PRODUÇÃO e PROGRAMAÇÃO e também Assessoria para Mídia Social e Otimização de Site (SEO).