Nos últimos tempos, percebemos não só o crescente hábito das pessoas de consultar celular a todo momento, como também o surgimento de um grande número de aparelhos com acesso a internet, desde relógios até geladeiras.
O Responsive design, ou design responsivo, ganhou popularidade graças a esse hábito: o conteúdo que é publicado na internet precisa ser acessível em diferentes aparelhos, que costumam oferecer algumas limitações em relação ao tradicional desktop.
O Brasil já possui mais de um smartphone ativo por habitante. Mais do que nunca, o usuário precisa conseguir localizar o que está procurando, mesmo que ele busque em aparelhos mais limitados e com telas menores.
Neste artigo, você vai entender um pouco mais sobre que é o responsive design e como alguns dos elementos que compõem um design responsivo funcionam. Também linkamos alguns artigos e materiais que podem te ajudar a entender melhor o que compõe um responsive design.
Confira!
O que é responsive design?
Mas afinal, o que é — de verdade — o responsive design?
O termo foi criado pela Ethan Marcote para se referir à prática de ajustar automaticamente o conteúdo de um site à tela em que ele será exibido.
Ter um design responsivo consiste em adaptar o conteúdo de seu site ou produto a diferentes tipos de telas de forma automática, por meio do CSS.
Antigamente todos os sites se preocupavam apenas em desenvolver um layout para desktop, já que ainda não haviam smartphones ou outros aparelhos que acessassem a internet da forma como conhecemos hoje.
Quando a internet móvel surgiu (quem se lembra do WAP?), ainda que muito limitada, alguns produtores de conteúdo começaram a planejar formas de disponibilizar seus materiais também pelo celular.
Desde então, a conexão à internet se desenvolveu muito, fazendo com que o consumo de conteúdo se torne mais fácil. Por isso é tão importante fazer com que seu conteúdo seja acessível com a menor perda possível por diferentes telas.
Qual é a importância do responsive design?
Não é muito difícil encontrarmos páginas com letras muito pequenas, imagens exageradamente grandes e menus difíceis de acessar quando acessadas pelo celular.
É difícil encontrar a informação que você estava procurando, a lentidão é grande e o consumo de dados costuma ser bastante alto em alguns casos, fatores que tornam a experiência extremamente ruim.
As chances de um usuário voltar a seu site quando ele se encontra em tais condições é muito menor do que se as informações estiverem claras, em um tamanho coerente e com elementos que se enquadrem de verdade na realidade dos acessos mobile.
Além disso, ter um design responsivo é essencial em termos de SEO. Os mecanismos de busca avaliam diversos fatores nos sites para fazer o ranqueamento, e responsividade é um dos mais importantes.
O Google consegue identificar quando um site não atende às expectativas de quem está pesquisando a partir de fatores como o tempo em que o usuário permaneceu na página, como ele interagiu com ela e se ele voltou para a página de buscas e clicou em outro resultado.
Sites que não retém usuários não ranqueam em boas posições nos sites de busca. Um design responsivo tem impacto direto nisso: se a navegabilidade for ruim, a pessoa não se manterá na página.
A velocidade de carregamento também impacta diretamente nos resultados de SEO, já que usuários não costumam permanecer em páginas que demoram mais de 3 segundos para carregar.
Isso vale para o mobile também. A internet acessada pelo celular costuma ser mais lenta e instável. Por isso, quanto mais rápido e otimizado seu site for, melhor.
Mas como fazer?
A parte prática é bem mais simples do que parece! Hoje, o CSS — que é a linguagem responsável pelos estilos na web — possui nativamente funcionalidades que permitem incluir a responsividade de maneira simples.
Além de adaptar o conteúdo de acordo com o tamanho da tela, também é possível deixá-lo fluído, o que significa que os elementos da página não vão ficar estáticos. Pelo contrário, eles vão adequar suas posições de acordo com o espaço disponível. Isso é possível graças às diversas unidades de medida que são englobadas pelo CSS.
Tempos atrás a internet era toda baseada em pixels. Assim, se você precisasse adicionar qualquer tipo de estilo à sua página web, o melhor jeito de fazê-lo era determinando os tamanho exatos de cada elemento.
Isso mudou com o surgimento de novas unidades de medida dentro do CSS. Agora temos em, rem, e também a opção de trabalhar diretamente com porcentagens, frações (fr) e medidas derivadas do tamanho da tela (vh, vw). Vamos abordar neste post somente o em, o rem, e as medidas de tamanho da tela.
Em e rem
A unidade de medida em é baseada no tamanho-base da fonte do elemento no navegador, que por padrão é 16px, ou seja, essa unidade é baseada em pixels, mas ainda assim consegue ser responsiva.
Por quê? Acontece que esse tamanho-base está ligado ao zoom do navegador. Assim, se uma pessoa com problemas de visão aumenta o zoom da tela, o elemento escala de acordo.
Enquanto o em está ligado ao elemento que o contém, o rem é mais generalista, tirando seu tamanho-base do corpo da página. Muitas vezes, usá-lo é suficiente para deixar a página mais responsiva, mas existem situações em que, para ter um controle maior do design por área, é melhor usar em.
Viewport
O viewport é a tela em que uma página está contida. Assim, para que um programador possa ter mais controle usando o próprio viewport como unidade de medida, surgiram vh (viewport height) e vw (viewport width).
Com isso, é possível controlar a área que cada elemento vai ocupar na tela independente do zoom. Cada unidade de viewport corresponde a 1% da área equivalente, ou seja, 1vh significa 1% da altura da tela.
Flexibilidade
É possível deixar o layout de um elemento flexível determinando o jeito que ele se mostra, ou seja, com a propriedade display. Definindo-a como flex, é possível usar uma série de propriedades que controlam a fluidez do elemento.
Este artigo no site CSS-Tricks traz uma boa explicação de como usar estas propriedades para alcançar o layout desejado. Além disso, os jogos Flexbox Froggy e Flexbox Defense ensinam a propriedade flex de maneira lúdica e interativa.
Media-queries
Muitos artigos que abordam a responsividade no contexto de código falam exclusivamente de media-queries.
Aqui, optamos por deixá-la por último porque responsividade não se resume somente a adaptar o tamanho, como já foi dito anteriormente. Essas queries ajudam a organizar o layout, mas o tamanho-base e a fluidez devem sempre acompanhar as mudanças no tamanho da tela.
As queries permitem separar o código por tamanho da tela e, assim, pode-se explicitar, usando pixels, como exibir determinados elementos na página.
É importante lembrar, ao usá-las, de organizar o código referente ao estilo separado do layout, para não ocorrerem surpresas desagradáveis ao se mudar o tamanho da tela. Aqui há uma boa explicação de media-queries e aqui uma coletânea de exemplos.
Boas práticas para um design responsivo
Verifique a informação em telas menores
Verifique se todas as informações do seu site estão acessíveis e legíveis confortavelmente em telas menores.
Caso não tenha um celular disponível, você consegue verificar isso pelo “inspecionar” do Google. Clique com o botão direito na página e selecione “inspecionar” (ou simplesmente digite F11). Depois, selecione o formato responsivo.
Mantenha em tela apenas aquilo que for necessário
Imagens utilizadas para ilustrar determinados tipos de conteúdo no desktop não necessariamente precisam estar presentes em outros tamanhos de tela.
É mais difícil manter o nível de detalhamento de um desktop em um celular, então evite manter imagens que não são essenciais em seu layout responsivo.
Quando as imagens forem, sim, necessárias, deixe-as otimizadas: imagens mais leves carregam mais rápido e utilizam menos dados de quem estiver acessando. Dê preferência para a opção “Salvar para a web” em suas ferramentas de edição e escolha o formato mais adequado.
Você também pode utilizar ferramentas online de otimização de imagens. Leia mais sobre isso aqui e aqui.
Por último: teste!
Nem todos os navegadores leem seu código de forma igual, por isso é importante testar seu site em vários deles (isso vale para desktop e mobile).
Seguindo as dicas e tutoriais que trouxemos por aqui, você consegue ter uma boa noção de onde começar no processo de tornar seu site responsivo. Acessibilidade é um assunto importante e que, quando colocada como prioridade, pode ser uma grande aliada no desenvolvimento de sua presença digital!
Lívia é Desenvolvedora e Brunna é Webdesigner na Take
