A chegada dos smartphones representou uma verdadeira revolução no universo do web design. De repente, todos queríamos ser pioneiros a criar sites com design web responsivo. Parecia magia: ao redimensionar o navegador, todo o site se adaptava automaticamente à nova resolução, alterando até a estrutura da página.
Quando mostrávamos isto aos clientes, por estranho que pareça hoje, ficavam normalmente surpreendidos. Não foi assim há tanto tempo, mas agora é algo completamente banalizado.
No entanto, ainda há muito por fazer no âmbito do design web responsivo ou adaptativo. Não basta recorrer a um framework CSS como o Bootstrap e esperar que faça todo o trabalho por nós. Se queremos criar uma ligação com o utilizador final, temos de lhe proporcionar uma experiência adequada ao seu dispositivo e, para isso, é fundamental perceber como o utilizador interage com o equipamento. É essencial compreender a lógica com que o visitante espera navegar.
Se estivermos perante um computador de secretária, o rato será o principal elemento de navegação. Por outro lado, ao navegar num smartphone, temos de ter consciência de que a navegação é tátil e, por isso, devemos facilitar essa interação no nosso design web.
Pontos-chave para um bom design web responsivo
Menu de navegação
É fundamental que o menu de navegação seja intuitivo para o utilizador. Podemos facilitar isso ao incluir um botão para expandir o menu do nosso design web, seja lateralmente ou em formato dropdown. Assim, poupamos espaço e tornamos a navegação mais organizada.
Imagens adaptáveis e proporcionais
Devemos garantir que as imagens do nosso design são responsivas. Têm de ser exibidas corretamente tanto num ecrã de 27″ como num iPhone.
Apesar de isto ser básico, há um aspeto muitas vezes esquecido: a coerência nas proporções. As imagens devem ser compatíveis com a orientação do dispositivo ou do ecrã. Se, ao desenhar a versão desktop, usarmos uma imagem demasiado panorâmica, no smartphone ela ficará com apenas alguns milímetros de altura e ocupará toda a largura do ecrã — o que, na maioria dos casos, não faz sentido.
Por isso, o ideal é optar por um tamanho intermédio ou substituir a imagem na versão mobile.
Ordem e hierarquia
A ordem das secções no nosso design web é crucial. Ao adaptar o design para smartphone, o conteúdo passa geralmente para uma única coluna, com as secções dispostas verticalmente. Por isso, é importante planear o ordem em que queremos que o utilizador veja as secções, colocando as mais relevantes no topo.
Menos é mais
Seguindo a lógica anterior, ao desenhar para ecrãs de smartphone, o melhor é eliminar secções que não sejam relevantes para quem acede a partir destes dispositivos. Por exemplo, rodapés extensos podem ser removidos, deixando apenas uma linha com os contactos essenciais.
Tira partido de todas as funcionalidades
Ao desenhar a experiência mobile, é fundamental explorar todas as funcionalidades extra disponíveis. Por exemplo, se na versão desktop existe um mapa de contacto, na versão mobile faz sentido incluir um botão para abrir o GPS. Também podemos criar botões de chamada direta para facilitar o contacto.
Outros dados relevantes
Atualmente, os dados mostram que há mais utilizadores a aceder a sites através de dispositivos móveis do que por desktop. Os números apontam para 51% de visitantes em mobile, 42% em desktop e os restantes 7% utilizam outros dispositivos.
- 51% dos visitantes em mobile
- 42% dos visitantes em desktop
- 7% utilizam outros dispositivos