7 elementos para se considerar ao criar um design responsivo

A característica mais conhecida de um site responsivo é a capacidade que ele tem de se adequar ao tamanho da tela na qual está sendo exibido, com o objetivo de apresentar o conteúdo da melhor maneira. Neste conceito de site responsivo fica a dúvida: quais elementos devo usar para otimizar meu site e torná-lo mais acessível em qualquer dispositivo?

Basicamente você terá que montar um quebra-cabeças, em que poderá encolher, dobrar ou esticar as peças. E se elas estiverem dentro de um grid sua tarefa será bem mais fácil. Fique atento às dicas dos principais elementos que devem ser observados para você não se perder na criação de um design responsivo!

Imagens

As imagens estão relacionadas a dois desafios quando tratamos dos sites responsivos: desempenho e tamanho. Com a chegada das telas de alta densidade (as de retina, por exemplo), imagens tidas como de tamanho normal podem vir borradas e pixeladas. Imagens maiores podem solucionar este problema, mas acabam criaando outro no quesito desempenho, já que quanto maior, mais tempo leva para ela ser carregada e nem sempre o download é fácil com as conexões dos nossos dispositivos móveis.

E os usuários de telas menores que não precisam de imagens tão grandes? Será que daria para trabalhar com as mesmas? Como adaptá-las?

O primeiro passo para que as imagens possam ser trabalhadas de maneira mais otimizadas em sites responsivos é mudando a forma com a qual elas são marcadas e embutidas em página. O conceito seria usar as media queries, servindo imagens diferentes para cada tipo de dispositivo, sendo referenciadas na sua fonte.

Grids

Através dos grids você tem colunas fixas, que terão sua largura ajustadas de acordo com o espaço disponível. O número de colunas também pode ser ajustado, deixando que o navegador calcule a sua largura. Um número bem consensual é o de 12 colunas, que é facilmente dividido por 3, 4, 2 e 6 e que permite uma boa variedade de layouts.

Tipografia

O layout de um site vai depender muito do seu conteúdo. E a tipografia escolhida para os textos do site é muito importante. Enquanto as fontes medidas pela unidade “em” tem um tamanho herdado do seu elemento pai, a fonte medida pela unidade “rem” é relativa ao tamanho da fonte do seu elemento raiz. Para um site responsivo, você deverá alterar o tamanho de todas as fontes simplesmente mudando o tamanho da fonte especificada no elemento HTML.

Formulários

Quanto maior o formulário, mais complicado é adaptá-lo (e mais difícil é para que as pessoas o preencham até o final). Os formulários devem ser visualmente atraentes e fáceis de usar em qualquer dispositivo. Uma dica é que ele contenha o select, para que o usuário apenas selecione a opção, não precisando digitá-la. Habilitar a opção de feedback imediato ao clicar no botão enviar, solicitando a correção de eventuais erros, é ótimo, pois com as telas menores é fácil deixar passar alguma coisa. O atributo autocompletar também ajuda na montagem de formulários mais responsivos.

Tabelas

Grande parte das tabelas tem uma orientação horizontal e traz muitos dados de uma só vez. Este elemento deve ser observado nos sites responsivos para que a informação não se torne ilegível. Uma solução seria esconder colunas menos importantes e deixar que o usuário escolha quais ele quer ver. Uma outra solução é fixar uma única coluna a esquerda e deixar uma barra de rolagem, deixando que a pessoa faça esse movimento de leitura. O grande empecilho desta última é que alguns dispositivos não exibem uma barra de rolagem visível, o que é um problema para a eficiência do site responsivo.

Iframe

Quando incorporamos conteúdos de terceiros no nosso site tempos que ficar atentos a estes elementos. O maior problema aqui é que a maioria desses conteúdos, ao serem incorporados ao seu site, são feitos através de iframes, que exigem altura e largura fixas no seu código. Dessa forma, quando você incorporar um slideshow, mapa ou um vídeo no seu site, é preciso atenção para que eles não percam a sua proporção original e ainda assim fiquem responsivos.

Navegação

Outro grande desafio dos sites responsivos é com relação à navegação. Para que todos os usuários, independentemente do dispositivo, possam navegar no site com facilidade, é importante que ele apresente um menu simples, amigável. Há uma ferramenta em inglês chamada Responsive Design Testing Tool que mostra como fica a navegabilidade do seu site em diversas resoluções, como 768×1024, 1024×768, 240×320 e 480×640.

Criar um website responsivo é muito mais que escolher imagens certas, é todo um trabalho de elementos para que o quebra-cabeças fique com as peças encaixadas. A solução perfeita ainda não existe, então conte pra gente através dos comentários o que você tem feito com os elementos do seu site para que ele se torne mais acessível e adaptável.