Cabeçalhos responsivos e logotipos - dicas e armadilhas

O conceito de web design responsivo permeou a web e tornou-se um marco para os desenvolvedores frontend. Não há como negar o valor do design responsivo no mundo moderno, mas há alguma dificuldade em entender como projetar layouts responsivos adequadamente.

O assunto pode continuar por muito tempo porque há tantas áreas exclusivas de um site, mas o foco em elementos individuais pode ajudá-lo a entender melhor as metas de um usuário e como essas metas podem ser alcançadas com o design responsivo..

Eu gostaria de cobrir dicas de design para cabeçalhos, logotipos, e menus de navegação, como eles pertencem ao design responsivo. Tome estas sugestões como elas se aplicam ao seu próprio trabalho e certifique-se de projetar suas interfaces com o comportamento do usuário em mente.

Navios mais finos

Em telas grandes, é normal ter cabeçalhos grandes, talvez até mesmo cabeçalhos de grandes dimensões com camadas de links de vários níveis. Mas telas menores não têm o mesmo espaço e devem ser restringidas conforme necessário.

Como os aplicativos móveis nativos geralmente têm cabeçalhos fixos, esta é uma prática comum em design responsivo também. Um cabeçalho fixo também deve encolher quando em dispositivos menores: isso deixa mais espaço para o conteúdo, mas ainda dá aos leitores acesso direto ao cabeçalho e navegação.

Tomemos por exemplo o layout do Cartoon Brew em um monitor de tamanho normal e em um dispositivo móvel.

No ponto de interrupção de 600px, a navegação diminui para quase metade da altura na página. Isso torna o logotipo e o menu de navegação clicável menores, mas eles são muito mais proporcional para o espaço de tela relativo.

Considere também que o Cartoon Brew tem uma caixa suspensa como menu responsivo na tela do celular. Isso significa isso sobreposições de conteúdo na página quando aberta, por isso é importante deixar muito espaço para isso.

Um exemplo semelhante pode ser encontrado no site Jacksonville Art Walk. A barra de navegação superior fica fixa durante a rolagem, mas encolhe em dispositivos menores. Isso é melhor para o design responsivo porque a barra de navegação mais fina deixa mais espaço para o conteúdo em uma tela menor do celular.

Cada link na barra de navegação tem um ícone relacionado anexado ao link de texto. Isso parece ótimo em um monitor widescreen, mas é muito detalhado para telas menores.

A navegação Art Walk é alterada para um menu suspenso com links fixos ao redor do ponto de interrupção de 770px. Os ícones estão ocultos no menu suspenso porque seriam muito pequenos e muito apertados em dispositivos menores.

Ao projetar um cabeçalho responsivo, considere sempre espaço total na tela enquanto estiliza a barra de navegação. Se você não quer que o cabeçalho fique fixo, está tudo bem, mas você ainda pode querer encolher um pouco para economizar espaço no topo da página.

Iconify O Logotipo

A maioria dos logotipos incorpora algum texto e um ícone ou gráfico para representar a marca. Isso significa que você pode sempre iconify (sim, é uma palavra real) esse tipo de logos até um símbolo da sua versão completa.

Essa é uma técnica poderosa para cabeçalhos responsivos, porque nem sempre há espaço suficiente para um logotipo completo. Você perde um pouco do brilho e do glamour de um logotipo em tamanho grande, mas esse é o preço que você pode ter que pagar por um layout responsivo limpo.

Confira o logotipo do Web Designer News e veja como ele muda conforme você redimensiona o navegador.

Talvez nem todos reconheçam esse ícone quando visitam o site pela primeira vez, mas graças a reconhecimento de padrões isso não é um problema enorme.

As pessoas estão na Internet há tempo suficiente para saber que o canto superior esquerdo da página é normalmente reservado para um logotipo. Este pequeno ícone rosa também é usado no favicon, por isso é fácil tirar algumas conclusões sem ir muito longe no site.

Você nem sempre precisa confiar em gráficos para essa técnica de logotipo condensado. O cabeçalho de Young And Hungry usa texto verde brilhante para o logotipo que eventualmente condensa o texto "Y & H".

Concedido isso pode não funcionar para todos os sites, se a marca não é fácil de reconhecer como letras únicas. Mas isso mostra que os logotipos pode ser simplificado em gráficos e texto e em ambas as variantes ocupe menos espaço em telas menores.

Manuseando Fundos em Tela Cheia

Muitas páginas de destino usam fundos em tela cheia para chamar mais atenção. Esta é uma técnica poderosa, mas geralmente funciona melhor em monitores grandes.

Então, como você lida com isso em uma tela menor? Geralmente, os designers remova a imagem de fundo passado um certo ponto de interrupção, ou a própria imagem fica realinhado para caber na janela.

O Cap Radio Raffle usa essa técnica em sua home page. A imagem de fundo mantém o ponto focal em vista em todos os momentos, não importa o quanto a tela é redimensionada.

Esse tipo de solução normalmente requer algum posicionamento CSS mas é muito simples quando você pega o jeito. Somente manter o ponto focal em vista em todos os momentos, e redimensionar o contêiner de imagens para caber na proporção com o dispositivo.

Além de grandes planos de fundo por motivos estéticos, você também pode usar imagens grandes para o conteúdo da página. A home page do Mashable usa um fundo de imagem em destaque para a história principal que abrange todo o layout.

Seu layout responsivo comprime a imagem enquanto mantendo um ponto focal central. É difícil fazer isso porque a imagem mostrada muda quando a história muda, então as fotos devem ser curadas com cuidado. A solução da Mashable ainda é um ótimo método para lidar com fotos em tela cheia para blogs e layouts de revistas quando projetada corretamente.

Simplifique a navegação

Ao renovar para telas menores, mantenha o máximo de links possíveis na navegação e torná-lo facilmente acessível. Isso significa que você pode precisar trocar alguns links se tiver menus suspensos com várias camadas.

Embora se você tiver a estratégia correta, ainda é possível manter todos os dropdowns intactos. Por exemplo, o Kidscreen usa um menu suspenso com ícones de setas pequenas indicando sublinks no menu responsivo.

Muitas pessoas argumentam contra o menu de hambúrguer, mas eu tenho vindo a aceitá-lo como um item necessário para menus de navegação longos. Ele simplesmente funciona e tornou-se amplamente compreendido pela maioria dos usuários de smartphones como "o botão de menu".

Na verdade, seria difícil encontrar um site responsivo que não dependesse do menu de hambúrgueres de três barras. CyberChimps é um ótimo exemplo que usa um menu suspenso vertical em vez de um slide-in.

A estrutura de navegação do CyberChimps é reorganizada para deslizar na parte superior da página. O menu cai de cima com elementos de bloco grandes para links.

Com mais área para clicar e texto do link maior, o processo de navegar pelas páginas torna-se muito mais simples. O objetivo é seguir essa filosofia com todo o seu cabeçalho responsivo, e seus designs melhorarão drasticamente.

Construa o seu próprio

Com essas dicas à sua disposição, não deverá haver problemas ao criar cabeçalhos responsivos utilizáveis. Embora existam muitas ferramentas para ajudá-lo, a única maneira de realmente entender é através da prática.

Então, leve essas técnicas com você e comece a construir websites! Eu também listei um punhado de recursos adicionais para cabeçalhos responsivos que você pode conferir abaixo.

• Criar um menu de navegação responsivo CSS básico para celular (teamtreehouse.com)
• Prática recomendada para o cabeçalho do site responsivo (ux.stackexchange.com)
• Como posso tornar minha imagem de cabeçalho adequadamente responsiva? (stackoverflow.com)