Web design responsivo é uma abordagem para lidar com seu site em diferentes dispositivos/viewports. Enquanto o seu conteúdo permanece o mesmo, o layout muda de acordo com a resolução da tela. O design responsivo permite que você crie uma experiência de usuário única em diferentes plataformas e, ao mesmo tempo, mantenha os esforços de manutenção mínimos.
Existem vários artigos que cobrem este tópico. Alguns nos ajudam a entender a anatomia de sites responsivos com diretrizes e tutoriais, outros esclarecem o papel das media queries e outros ainda oferecem coleções inspiradoras de designs responsivos.
Não vamos nos concentrar nesses aspectos mais gerais agora. Em vez disso, vamos dar uma olhada em um dos principais desafios que surgem com o design responsivo da web: menus de navegação responsivos.
A versão para desktop de um site oferece espaço suficiente na tela para apresentar menus de navegação em várias camadas. No entanto, quanto menor a tela, mais difícil será exibir o mesmo conteúdo de maneira clara e utilizável.
A seguir, veja 10 dicas de como planejar efetivamente menus de navegação responsivos.
Priorize seu conteúdo
A primeira dica para menus responsivos é saber lidar com o espaço limitado em dispositivos pequenos priorizando seu conteúdo. Defina qual conteúdo é importante para seus diferentes usuários. Em que tipo de situações as pessoas acessam seu site a partir de um dispositivo móvel? Quais são seus objetivos e quais conteúdos eles precisam para alcançar esses objetivos?
Aqui estão 2 exemplos de sites que simplificam a navegação para dispositivos móveis, priorizando o conteúdo deles.
Inclua apenas conteúdo de alta prioridade
O site do The Sweet Hat Club prioriza e reorganiza os itens do menu principal para dispositivos móveis. Em vez de mostrar todos os itens alinhados horizontalmente, a versão mobile apresenta apenas alguns itens em uma lista vertical.
Embora os links do Twitter e Facebook tenham sido removidos completamente, o link “Participar” foi atualizado. Não é mais um link de texto comum, mas um botão colorido que chama a atenção imediata.
Mostre conteúdo de alta prioridade no topo
O site de Barack Obama colocou um foco claro em doações e apoio à campanha eleitoral de Obama. A versão desktop apresenta 3 itens principais de conteúdo no topo, dos quais 2 ofereciam informações sobre a campanha.
Na versão para celular, no entanto, todo o espaço era ocupado por um botão de doação, seguido por conteúdo que se concentra apenas em envolver as pessoas. Informações gerais sobre Obama e sua campanha eram deixadas para o final da página.
Lide com criatividade em espaços limitados
É um fato que existe menos espaço num pequeno dispositivo do que no desktop. Designers são desafiados a reorganizar o layout de um site de acordo e a encontrar espaço para todo o conteúdo relevante, apesar do tamanho da tela. Ao mesmo tempo, é importante manter a aparência de um design e assegurar aos visitantes que eles ainda estão no mesmo site.
Adapte seu design ao espaço disponível
O site de Oliver Russell faz um ótimo trabalho em manter a mesma aparência para diferentes resoluções de tela. Tanto o cabeçalho, quanto o menu de navegação, podem ser facilmente reorganizados sem a necessidade de deixar qualquer coisa de fora.
As palavras dos diferentes itens de conteúdo simplesmente giram em 90 graus, permitindo que os planos de fundo coloridos sejam aproximados ainda mais.
Alguns designs funcionam em todos os tamanhos de tela
Flip escolheu para um menu de navegação muito simples, mas inteligente para o seu site. O layout limpo e as cores claras permanecem as mesmas em todos os diferentes dispositivos. O que parece ser uma codificação de cores acessível de diferentes itens de conteúdo na versão desktop, é realmente uma maneira inteligente de transformar links de texto simples em botões.
Em um dispositivos móveis, o menu de navegação funciona bem porque as áreas coloridas permitem toques de dedo imprecisos.
Menus suspensos (Dropdown)
Outra dica para menus responsivos são menus suspensos (dropdown), uma maneira conveniente e muito popular de estruturar conteúdo complexo. Frequentemente, sites complexos ainda fazem uso de menus dropdown com várias camadas. Em telas menores e mais do que isso, em dispositivos que dependem de interações por toque, os menus suspensos precisam ser atendidos com cautela.
Não há efeitos de foco e o espaço da tela pode ser muito limitado. Aqui estão 2 exemplos de sites que conseguiram usar menus dropdown para seus sites mobile de uma maneira muito útil.
Fique com a estrutura que as pessoas estão acostumadas
O site da Microsoft é um ótimo exemplo de como organizar conteúdo complexo em um dispositivo pequeno. Por padrão, o menu de navegação não é exibido em todos os dispositivos móveis. Somente ao tabular um pequeno ícone no canto superior direito, a primeira camada de conteúdo é aberta.
Ao marcar um dos itens, a segunda camada é aberta, dando ao usuário uma visão geral muito clara do conteúdo disponível.
Ofereça links claros e fáceis de usar
Starbucks também é um bom exemplo que mostra como usar efetivamente um menu suspenso em viewports pequenas. Novamente, por padrão, o menu fica oculto atrás de um pequeno ícone. Desta forma, não interfere com outros conteúdos. Uma vez que o usuário precisa navegar pelo site, basta clicar no pequeno ícone e o menu é aberto.
Os diferentes itens são grandes o suficiente para selecioná-los facilmente com os dedos. Depois que um item de conteúdo é selecionado, o menu desaparece novamente.
Reposicione seu menu de navegação
Outra maneira de traduzir seu menu de navegação para tamanhos de tela menores é liberar estruturas familiares. Certifique-se de não confundir as pessoas com isso, mas pode ser a melhor maneira de se adaptar a diferentes dispositivos.
As pessoas navegam no seu site aos poucos
O site Boston Globe oferece uma enorme quantidade de informações. Não apenas o primeiro, mas também a segunda camada de conteúdo contém muitos itens. A solução para mantê-lo o mais simples possível para os leitores navegarem no site para dispositivos móveis foi dividir sua primeira e segunda camada de conteúdo.
Os visitantes primeiro selecionam um item da primeira camada, o que os trazem diretamente para esse site. Em seguida, há um segundo menu suspenso com a segunda camada de conteúdo pertencente a essa categoria específica.
Primeiro receba seus visitantes
The website Brickartist.com é um exemplo interessante de como reorganizar menus de navegação para viewport menores. Na versão desktop, há um menu de navegação muito claro e proeminente; no entanto, em telas pequenas, esse menu de navegação é movido até o final do site.
Desta forma, o visitante tem que olhar primeiro para o cabeçalho e algum conteúdo, então ele pode decidir para onde ir em seguida.
Abandone o menu de navegação
Também é possível decidir abandonar o menu de navegação completamente. É claro que isso é apenas uma opção se o conteúdo não for muito complexo e se as pessoas puderem encontrar facilmente o que é preciso/desejável.
Guie seus visitantes
Na versão para desktop do site da Happy Cog, é possível escolher um dos principais itens de conteúdo no menu de navegação ou percorrer a página para ver os diferentes itens um a um. Na versão móvel, há apenas a segunda opção disponível.
O visitante precisa rolar a página para baixo para ver o conteúdo diferente. Então, para cada categoria de conteúdo, há outro link para mais detalhes.
Torne visual
O site Mobile Web Best Practices também mostrava um menu de navegação claro na versão para desktop. As diferentes categorias tinham nomes e um pequeno ícone para identificá-las. Além disso, as categorias eram repetidas abaixo do cabeçalho. Desta vez, o ícone é muito mais proeminente do que o texto. Na versão móvel, o menu da parte superior simplesmente desaparecia e o visitante ficava com os grandes ícones para navegar no site.
O site passava de 2 alternativas de navegação diferentes para 1. Ainda assim, as categorias eram claras e o estilo e, os ícones usados, consistentes.
Conclusão sobre as 10 dicas para menus responsivos
Existem muitas dicas para menus responsivos e, obviamente, o objetivo deste breve artigo não foi elucidar toda a questão. Com o tempo, novas dicas vão surgindo e lidar com menus responsivos vai ficando cada vez mais interessantes.
E você, tem alguma dica infalível para lidar com menus responsivos? Diga nos comentários quais são suas soluções!