15 Melhores Práticas para Web Design Responsivo Responsável

Web design responsivo não é apenas uma questão de apertar e alongar.

Trata-se de entregar um site de inúmeras maneiras, dependendo da largura da tela.

O que adicionar? O que remover? Como priorizar o que é mais importante? Quais são as implicações para os rankings de busca? E como você faz tudo isso com apenas uma base de código?

É realmente necessário um especialista para codificar um site de forma responsiva.

Por isso, pedimos a Tim Cross, um dos melhores web designers responsivos da AwesomeWeb, para lhe dar uma visão sobre o que é preciso para construir um site adequado, responsável e responsivo.

Se você contratar Tim ou decidir adicionar capacidade de resposta ao seu site, mantenha isso como um recurso para saber o que precisa ser feito.

1. Menus de navegação ocultos.

Em telas menores, ocultar o menu de navegação principal é uma boa maneira de manter os layouts simples. Um ícone, texto ou combinação de ambos indica ao usuário onde está o menu.

Suas opções incluem um menu suspenso simples onde o menu desliza para baixo e cobre o conteúdo principal abaixo ou o método de sobreposição onde o menu se expande e cobre toda a tela.

BBC Sport usa um menu suspenso que se expande quando pressionado. Como eles têm vários menus recolhidos na mesma página, eles usam frases de chamariz diferentes para ajudar o usuário a entender a hierarquia da página.

Enorme usa um menu de sobreposição. Eles também usam esse estilo de menu na área de trabalho, mantendo o ícone do hambúrguer visível e simplificando o conteúdo da página.

Dica para blogueiros iniciantes:

Invista em um tema premium que apresente sua marca da melhor maneira possível.

Temas gratuitos são ótimos para começar, mas a maioria não pode ser personalizada adequadamente. Lembre-se daquele ditado: as primeiras impressões contam!

2. Menus deslizantes horizontais.

Outra maneira de mostrar menus em telas menores é mantê-lo visível, mas deixar o conteúdo transbordar da borda da tela. Mostrar parte do texto cortado indica que eles podem deslizar para revelar.

O Guardian usa um menu de rolagem horizontal claro, com um call to action extra para ver “All” – isso aparece como um menu suspenso quando pressionado. Um bom exemplo de aplicação de diferentes métodos no espaço disponível.

O menu de rolagem horizontal no Google é uma lista de links de texto simples, que transbordam da borda da tela – uma forma simples de indicar mais conteúdo ao usuário. Cada link de texto tem um menu suspenso que aparece quando pressionado.

3. Dê aos botões e links áreas grandes e clicáveis.

Em vez de diminuir os botões no celular, faça-os maiores, para que sejam mais fáceis de tocar. Na verdade, isso não se aplica apenas a telas pequenas, é bom que elas sejam grandes, independentemente do dispositivo – de tablets com tela sensível ao toque a PCs de mesa.

Botões grandes melhoram a usabilidade. Além de tornar os botões maiores, os links de texto se beneficiam de serem maiores. Se, por exemplo, você tiver uma grade de manchetes de notícias, com um link de texto que diz “Leia mais” dentro de cada uma delas, em vez de fazer disso o link, faça com que todo o conteúdo bloqueie um link, para que o usuário possa clicar em qualquer lugar .

Mais fácil de usar. Melhor experiência para todos.

O botão Adicionar ao cesto no site Oliver Bonas é grande, claro e destaca-se da página com a sua cor contrastante.

O site Pretty Green Energy tem botões grandes e áreas grandes e clicáveis ​​nos itens da lista de conteúdo.

4. Equilibre os pesos e tamanhos das fontes.

A proporção de tamanho entre os cabeçalhos e o texto do parágrafo deve ser bem equilibrada. Cabeçalhos grandes não ficam bem em dispositivos móveis, especialmente se se estenderem por algumas linhas. Tudo deve ser redimensionado adequadamente.

Os dispositivos móveis mais recentes têm telas de alta resolução, o que torna o texto mais legível e fácil de ler. Você pode se dar ao luxo de diminuir um pouco nas telas de dispositivos móveis e aumentar os tamanhos das fontes quando chegar a uma tela maior.

A Nike usa um peso de fonte mais robusto no desktop, o que funciona bem no banner. No celular, eles clareiam a fonte e reduzem o tamanho para que caiba em uma linha.

No Drama reduz seus títulos H1 no celular para que caibam na tela e não sobrecarreguem a página.

5. Larguras de leitura ideais.

Ao fazer um layout mais amplo em telas maiores, é importante considerar os comprimentos de linha do seu conteúdo.

Se uma linha de texto for muito longa, é mais difícil de ler porque é difícil seguir linha a linha. Da mesma forma, ter linhas muito curtas quebra o ritmo da leitura, pois os olhos precisam se mover para frente e para trás com muita frequência.

A prática comum é manter os comprimentos de linha em cerca de 60-75 caracteres. Isso pode ser feito configurando suas áreas de texto para ter uma largura máxima de aproximadamente 500/700 pixels de largura.

99u mantém suas páginas bem equilibradas com larguras de leitura ideais, links de compartilhamento simples e uma barra lateral bem posicionada que não prejudica muito o artigo.

Além de ter as larguras de leitura corretas, o layout do artigo do The Guardian é descomplicado, com muito espaço em branco e uma barra lateral clara e organizada.

6. Coloque informações importantes perto do topo no celular.

Mostre números de telefone, informações de contato, compre agora call to actions, etc. na parte superior do celular. Os usuários móveis querem informações rapidamente, mas isso também funciona bem em qualquer dispositivo.

Mesmo com os tamanhos dos navegadores sendo tão variados agora e a ideia da “dobra” não existir mais, colocar as principais chamadas para ações no topo da página ainda é importante. Por exemplo, em uma página de detalhes de um produto de comércio eletrônico, é bom ter o botão "Adicionar à cesta" visível para a maioria dos usuários, sem que eles precisem rolar.

A Metris Kitchens coloca as principais informações no topo do celular, pois é importante que seus usuários vejam as informações de contato (encontre um showroom) e as ações de conversão (solicitar um folheto) de forma clara e rápida.

O Ebay garante que o preço e o botão comprar agora estejam claramente visíveis no celular.

7. Altere a ordem dos blocos de conteúdo quando eles forem recolhidos em telas menores.

Decida o que é mais importante mostrar primeiro em uma tela pequena e, em seguida, altere a ordem do conteúdo – isso pode ser feito por meio de CSS (e às vezes JS se o layout for muito complexo).

Se na área de trabalho houver um bloco de conteúdo de texto e um bloco de imagem posicionados um ao lado do outro, decida o que é mais relevante.

Ou uma barra lateral e uma área de conteúdo em uma página – no celular, se isso for recolhido, a barra lateral será a primeira e empurrará todo o conteúdo para baixo na página, portanto, seria bom trocar isso no celular.

Neste conteúdo editorial da Brown Thomas, as informações do produto são posicionadas primeiro no celular. Na área de trabalho, a ordem do conteúdo é trocada para que uma foto de estilo de vida apareça ao lado do produto.

A página de detalhes do produto Melanie F coloca a imagem do produto primeiro no celular e, em seguida, coloca as informações do produto lado a lado no desktop.

8. Ocultar conteúdo em telas menores.

No celular, você pode simplificar o layout ocultando o conteúdo que seria visível em telas maiores, ocultando-o completamente ou usando guias e acordeões para mostrar/ocultar conteúdo. Isso organiza a página em telas menores e permite que o usuário veja todas as principais informações, com opções para visualizar mais, se desejar.

Esta página do produto em christianlouboutin.com simplifica o cabeçalho e reduz as informações do produto no celular, deixando a imagem do produto como o primeiro bloco de conteúdo.

No Selfridges, o carrossel de imagens em miniatura é removido no celular, deixando apenas setas simples para a esquerda/direita para deslizar.

9. Mostrando mais conteúdo em telas mais amplas.

Ter uma tela mais larga permite que você empurre mais conteúdo para cima na tela. Mais conteúdo é visível para o usuário imediatamente, antes que ele precise rolar. Os layouts podem expandir e acomodar mais colunas.

Esta exibição de grade de portfólio em Jimmy Gleeson aumenta o número de itens visíveis à medida que a tela fica mais ampla, permitindo que mais conteúdo seja mostrado mais acima na página.

O layout de navegação da Smashing Magazine é bastante complexo e muda muito em diferentes tamanhos de tela. Este é um bom exemplo de realmente pensar no layout e maximizar todo o espaço disponível por dispositivo e tamanho de tela.

10. Não se esqueça dos tablets no modo retrato.

Às vezes, essa orientação se encaixa no layout móvel pequeno, que é mais básico e não utiliza todo o espaço da tela disponível, ou é agrupado com um layout de desktop que pode tornar o conteúdo todo compactado.

O melhor uso de consultas de mídia em seu CSS pode obter o layout certo.

O layout desta página de detalhes do produto Protesto ainda possui muitas informações em um espaço menor, sem alterar as proporções e o espaçamento do layout.

O layout de detalhes do produto Firebox não compromete nada no modo retrato de mesa. Tudo o que aparece no desktop continua lá e o conteúdo é apresentado de forma bem equilibrada e simples.

11. Substitua a funcionalidade de ampliação de imagem por longas páginas de galeria roláveis.

Em dispositivos pequenos, ter uma janela de imagem ampliada não funciona se a imagem que você já está vendo preencher a tela.

Para galerias de imagens, use uma página rolável longa ou um carrossel deslizante com setas para a esquerda/direita. A longa galeria rolável também funciona bem em tablets e desktops.

Esta galeria de imagens na Apple usa uma longa página rolável no desktop e no celular. As legendas são removidas no celular para simplificar ainda mais o layout.

Esta galeria de produtos no UrbanEars aparece na mesma página e se expande depois de pressionar um link. Ele mantém as partes boas fundamentais de um pop-up, ou seja. não vai para uma nova página, mas apresenta as imagens de uma maneira melhor e mais útil.

12. Otimize o UX para telas sensíveis ao toque.

Adicione gestos de furto a banners, menus, galerias de imagens etc.

As telas sensíveis ao toque são intuitivas por natureza, portanto, podemos ser mais sutis com os auxiliares de navegação, por exemplo, meia imagem fora da tela em um carrossel sugere que há mais conteúdo por vir.

Os eventos de foco são inconsistentes em telas sensíveis ao toque. Desative-os e substitua-os por eventos de toque. Se o conteúdo a ser exibido em foco não for crítico e apenas um enfeite sofisticado, desative-o nas telas de toque todos juntos.

Os estados de foco na página do portfólio do Born Group são animados na área de trabalho e mostram o título do projeto. Como essas informações ainda precisam estar acessíveis nas telas de toque, os eventos de foco são substituídos por eventos de toque – um toque para visualizar as informações e outro toque para visualizar o projeto.

O site Made adicionou eventos de furto ao banner da página inicial. Eles pensaram claramente em seus usuários e utilizam esses eventos de toque no resto do site, em lugares onde é natural deslizar – por exemplo, em um carrossel de produtos.

13. Use menos imagens.

Muitos efeitos, como gradientes de fundo e estados de foco de botão, podem ser alcançados por html e css puros. As páginas carregam mais rápido, o que é especialmente bom para dispositivos móveis, e menos tempo é desperdiçado criando muitos gráficos.

Usar fontes para seus ícones significa que você não precisa criar imagens. Eles são escaláveis, têm bordas mais limpas, carregam mais rápido e são bons para telas retina. Essa otimização funciona muito bem em todos os dispositivos e telas.

O site desk.com usa bem as fontes de ícones. Adicionar cor, que é tão fácil quanto alterar a cor da fonte, é uma ótima maneira de adicionar mais impacto à sua página.

O site Pretty Green Energy usa fontes de ícones grandes para os cabeçalhos das seções. Aumentar o tamanho das fontes dos ícones é simples e não requer edição de imagens.

14. Vídeos responsivos.

Esse método permite que vídeos de qualquer tamanho respondam automaticamente ao tamanho do dispositivo, sem a necessidade de definir alturas ou larguras explícitas no próprio vídeo.

É alcançado com apenas algumas linhas de css. Isso funciona bem com vídeos inseridos diretamente na página e em iframes.

Os vídeos em Anyilu se estendem pela página e preenchem todo o espaço. Isso dá um grande impacto à página. Eles respondem e redimensionam automaticamente em diferentes tamanhos de tela.

Os vídeos incorporados no Brown Thomas usam iframes e são totalmente responsivos. Nenhuma altura ou largura é especificada, permitindo fácil gerenciamento de conteúdo e criação rápida de páginas.

15. A dobra não existe mais.

Os dispositivos são menores, mais altos, mais largos e mais longos.

Não é importante enfiar tudo no topo da página. Deixe as páginas respirarem e se expandirem com blocos de conteúdo longos e fluidos e espaçamento generoso.

As pessoas rolam naturalmente. Ao dar-lhes mais conteúdo abaixo da “dobra”, você está, na verdade, convidando-os a se envolver mais com a página e a ler seu conteúdo.

A página do produto iMac na Apple é uma página longa e fluida, com muita coisa acontecendo à medida que você rola. A experiência atrai você. Eles também utilizam uma navegação fixa, de modo que a principal chamada para ações, ou seja, Compre agora, ainda esteja visível à medida que você desce a página.

As páginas do produto Sonos têm um bom equilíbrio entre blocos de texto de conteúdo de largura fixa e painéis de imagem em tela cheia mais amplos. Isso mantém a página interessante e mais envolvente à medida que você rola. O espaçamento é bem equilibrado sem ser superlotado.

Empacotando

Verifique sua análise. Aposto que o tráfego móvel é uma porcentagem maior do que você pensa. E aposto que está crescendo mês a mês.

Se seu site não for responsivo, todos os usuários de dispositivos móveis que acessarem seu site terão uma experiência ruim.

Mesmo que seja responsivo, tenho certeza de que há várias áreas em que ele pode ser melhorado.

Web design responsivo é minha especialidade. Posso trabalhar em qualquer site, WordPress, Modx ou outro. Meus clientes geralmente têm pelo menos mais de 10.000 visitas mensais e eu cobro de US$ 1.500 a US$ 3.000, dependendo da complexidade do seu site.

Contrate-me uma vez, farei o trabalho certo e você nunca mais terá que se preocupar com uma experiência móvel ruim.

Se você tiver dúvidas, confira meu portfólio e entre em contato comigo aqui.