O que é “design responsivo” e como usá-lo?

Shutterstock / Lukas Kurka

O design responsivo é a ideia de fazer com que seu site tenha uma ótima aparência em qualquer resolução — não apenas no desktop e no celular. Com um site responsivo, seus sites para desktop e celular são a mesma página e se adaptam ao tamanho da janela.

O que é design responsivo?

O design responsivo permite que seu site seja redimensionado para caber em qualquer tela. Em vez de projetar em torno de um layout específico ou criar um site para celular e desktop separado, seu site deve ser dimensionado para caber em qualquer dispositivo. No mundo real, as pessoas usarão seu site de várias maneiras diferentes; existem telefones pequenos, telefones grandes, tablets, tablets no modo paisagem, netbooks, laptops e iMacs 5K.

Dê uma olhada na página inicial howtogeek. com. No desktop, possui um cabeçalho com um logotipo, categorias principais, botões de mídia social e, por fim, um menu de hambúrguer com categorias estendidas. As caixas de artigos são dispostas em uma grade que se dimensiona com o tamanho da tela, mas só ocupará cerca de 1000 px (pois aumentar demais pode parecer estranho). Ao todo, há muito espaço para trabalhar, então o site parece o melhor aqui.

Diminua um pouco a tela para o tamanho de um tablet e não haverá tanto espaço. O texto se quebra de maneira diferente, as imagens são reduzidas ou cortadas e as categorias principais desaparecem.

As caixas de artigo mantêm o layout, mas ao custo de ter linhas extras de texto. No entanto, o artigo de primeira página é mais importante e manterá sua proporção e diminuirá sem cortes.

E em dispositivos muito pequenos, você não pode realmente ter todos aqueles botões no menu e não há espaço suficiente para colocar as caixas de artigo próximas umas das outras, então o menu é reduzido em um menu de hambúrguer e as caixas de artigos são dispostas em uma coluna. Esta coluna sempre ocupará a largura total do dispositivo (menos 20 px de cada lado para preenchimento).

Você mesmo pode testar isso para ver como o seu site é dimensionado. Abra as ferramentas de desenvolvedor do Chrome clicando com o botão direito em qualquer lugar e selecionando “ Inspecionar. ” Pressione o botão dos dispositivos móveis no canto superior direito do painel que aparece e selecione “ Responsivo ” como o tipo de dispositivo:

Você pode agarrar as alças na borda do seu site para ajustar o tamanho ou pode inserir valores de pixel manuais. Você também pode visualizar como ficará em resoluções móveis populares (embora você ainda deva testar em um dispositivo real).

Como funciona o design responsivo?

Antes de fazer qualquer design responsivo, você deve corrigir um bug nas páginas móveis e na janela de visualização. Sem esta metatag no cabeçalho HTML &’ s, sua página móvel pode ser reduzida e não ser exibida corretamente. Isso já pode estar definido, pois é um padrão bastante comum, mas se não for, vá em frente e adicione-o:

 < meta content = "largura = largura do dispositivo, escala inicial = 1" nome = "janela de visualização" / > 

A principal forma de tornar os sites responsivos é com a propriedade mágica display: flex, também conhecida como flexbox. O Flexbox funciona ajustando o tamanho dos itens dentro de um contêiner para dimensionar com uma mudança no tamanho da janela. Você começa criando um contêiner e configurando-o para exibir: flex:

 . container {display: flex; }

E então, defina o parâmetro flex de todos os filhos:

 . child {flex: 1; }

Isso fará com que os filhos se expandam e ocupem tanto espaço quanto o contêiner permitir. Por exemplo, se você tivesse dois filhos, cada um ocuparia 50% do espaço:

Se, em vez disso, você definir o segundo filho para flex: 2, ele ocupará o dobro de espaço do outro (66% no total).

Quando a tela encolher, os filhos encolherão com ela. Eles atingirão um ponto em que não podem ser menores do que o tamanho do conteúdo, mas você pode fazê-los passar para outra linha (como o texto) com flexão no contêiner.

 . container {flex-wrap: wrap; }

Agora, você nunca mais terá o problema de ter o conteúdo do seu site fora da tela ou tão comprimido que fique ilegível.

Outra tecnologia CSS por trás do design responsivo são as consultas de mídia. As consultas de mídia são como declarações CSS If que permitem verificar um valor antes de aplicar algum CSS. Você pode usar isso para estilizar componentes dinamicamente com base na largura do navegador. Por exemplo, se você tivesse uma barra de menus principal que deseja ocultar no celular e substituí-la por um menu de hambúrguer, poderá ocultá-la com uma consulta @mídia:

 . topmenu {display: block} tela @media e (largura máxima: 600px) {. topmenu {display: none; }} 

600px é apenas um valor arbitrário usado para definir os limites da maioria dos dispositivos móveis, mas você pode ter muitos pontos de interrupção que alteram o estilo. Você pode usá-los em combinação com o flexbox para alterar as propriedades flex com base no tamanho do dispositivo; por exemplo, um uso comum é exibir listas horizontais verticalmente e alinhadas ao centro, para facilitar a leitura em dispositivos móveis.

Há muito mais sobre design responsivo do que podemos cobrir aqui, então se você &’ quiser aprender mais sobre o CSS por trás dele, você pode ler este excelente guia para flexbox de Truques CSS ou ler o Documentação da W3Schools para consultas de mídia.

Como tornar meu site responsivo?

Se você não quiser perder tempo refazendo o seu site com o flexbox em mente, há muitos modelos de site responsivos que você pode usar como base, incluindo muitos gratuitos. Muitos modelos que você pode usar com provedores de hospedagem gerenciada (GoDaddy, SquareSpace, Wix, etc.) serão responsivos imediatamente. Underscores é um ótimo template gratuito para WordPress.

Se você deseja codificá-lo sozinho, mas não deseja fazer tudo manualmente, existem muitas bibliotecas de terceiros para trabalhar com o flexbox. O mais popular deles é o Bootstrap, que adiciona classes fáceis de usar para trabalhar com o flexbox (junto com muitos outros elementos de IU úteis). Com o Bootstrap, você especifica contêineres com a classe de linha e, a seguir, especifica o tamanho da coluna com classes como col-md-6, e o CSS é gerenciado para você. Por exemplo, o código a seguir organizará cada div em uma linha de três no desktop e adicionará um ponto de interrupção de consulta de mídia para transformá-lo em uma coluna de largura total no celular:

 < div class = "linha" > < div class = "col-md-4 col-sm-12" > // conteúdo < / div > < div class = "col-md-4 col-sm-12" > // conteúdo < / div > < div class = "col-md-4 col-sm-12" > // conteúdo < / div > < / div > 

Os tamanhos são medidos em 12, então col-md-4 definirá o div para 33% de largura em tamanho médio ("md") e col-sm-12 irá definir para 100% de largura em dispositivos pequenos (" sm ").

O Bootstrap também tem uma tonelada de temas e modelos para você começar. Ele foi projetado para ajudá-lo a decolar muito rapidamente e se livrar do tempo gasto mexendo com HTML e CSS clichê (daí o nome).