Web design responsivo como um conceito já existe há muito tempo; na verdade, é a maneira de fato de construir sites hoje em dia. No momento, as pessoas estão acessando sites com telefones celulares mais do que qualquer outro dispositivo, por isso é muito importante garantir que seu site seja adequado para telas pequenas e grandes.

É útil nos lembrarmos do básico, então neste artigo abordaremos 4 aspectos de HTML e CSS que tornam um site responsivo.

Estas são as áreas em que nos concentraremos – elas servem como uma espécie de lista de verificação:

1. Janela de exibição
2. Consultas de mídia
3. meios de comunicação
4. Contêineres responsivos

1. Verifique a metatag da janela de visualização

A janela de visualização é a área visível de uma página da Web em um dispositivo. O primeiro passo para tornar seu site responsivo é garantir que o site seja dimensionado com precisão em todas as telas.

A metatag da janela de visualização é usada para definir a escala da janela de visualização:

width=device-width define a largura da janela de visualização para a largura do dispositivo no qual a página da Web está sendo carregada. initial-scale=1 define a janela de visualização para uma escala de zoom de 1 (ou 100%) da largura do dispositivo.

“Sem um metatag da janela de visualização, os dispositivos móveis renderizam as páginas em larguras de tela típicas de desktop e, em seguida, reduzem as páginas, tornando-as difíceis de ler.” – web.dev

Outro fato a ser observado é que a A tag é procurada pelos mecanismos de pesquisa para determinar se um site é compatível com dispositivos móveis, afetando diretamente o SEO do seu site.

2. As consultas de mídia são suas amigas

As páginas da Web responsivas terão layouts diferentes, dependendo da quantidade de espaço disponível. Tamanhos de tela menores são mais propensos a ter layouts de um bloco mais simples, enquanto telas maiores podem ter designs de layout mais complicados.

Uma consulta de mídia é usada para alterar o estilo de uma página da Web em diferentes tamanhos de tela. Ele usa o @media regra para definir uma condição para a qual o estilo CSS deve ser aplicado. A regra de mídia consiste em um tipo de mídia e um recurso de mídia, no formato:

@media screen and (max-width: 768px) {...}

A consulta de mídia acima se aplicaria a páginas da Web em uma tela com largura máxima de 768 px.

Nesta demonstração, usamos consultas de mídia para aplicar diferentes layouts para telas de celular, tablet e desktop (aqui está a versão de página inteira para facilitar o redimensionamento).

Use o design Mobile-First

Como mais pessoas visualizam sites em seus telefones, o design móvel deve ser priorizado. Começar com o design móvel primeiro é uma boa maneira de garantir que os elementos principais da sua página sejam exibidos em todas as telas.

Além disso, as telas de dispositivos móveis geralmente têm layouts mais simples, o que significa que é mais fácil construir a partir de uma base móvel básica do que dividir um layout de desktop complicado para telas de dispositivos móveis.

Se fôssemos recriar o layout na imagem acima para telas de dispositivos móveis, seria algo assim:

nav {
  width: 100%;
  height: 50px;
  background-color: #4282aa;
  margin-bottom: 8px;
}

aside {
  display: none;
}

main {
  width: 100%;
}

header {
  width: 100%;
  height: 200px;
  background-color: #0F1C37;
  margin-bottom: 8px;
}

article {
  width: 100%;
  height: 100px;
  background-color: #8CB89F;
  margin-bottom: 8px;
}

Agora que temos o estilo básico reduzido, podemos estendê-lo para telas maiores. Usaremos uma condição de “largura mínima”, em vez de uma condição de “largura máxima”. Isso ditará que, quando uma tela atingir uma largura mínima de 768px, podemos introduzir estilos mais complexos. Este é o estilo para o layout da tela do tablet:

@media (min-width: 768px) {
  main {
    display: flex;
    flex-wrap: wrap;
  }
  
  header {
    flex: 1 0 100%;
  }
  
  article {
    flex: 1 0 30%;
    margin-right: 8px;
  }
  
  article:last-child {
    margin-right: 0;
  }
}

E, finalmente, estendemos nossa largura mínima e incluímos estilo para desktop e telas maiores:

@media (min-width: 1024px) {
  aside {
    display: block;
    float: left;
    width: calc(30% - 8px);
    background-color: #175873;
    height: 308px;
    margin-right: 8px;
  }
  
  main {
    width: 70%;
    float: left;
  }
}

3. Mídia responsiva é importante!

Quando se trata de mídia responsiva, é importante definir imagens e vídeos para dimensionar de acordo com o tamanho da tela.

A renderização de imagens ou vídeos em seu tamanho original sem dimensionamento corre o risco de fazer com que a mídia cause um estouro na página da web.

Podemos evitar mídia maior que o tamanho da página da Web definindo o max-width propriedade em CSS:

img,
video {
  max-width: 100%;
}

Com essa propriedade, todas as mídias presentes na página da Web serão tão grandes quanto a largura de seu contêiner pai.

Para obter mais informações sobre diferentes maneiras de incorporar vídeos, confira este post sobre CSS Tricks.

Renderizando imagens diferentes com base no tamanho da tela

Outro aspecto da mídia responsiva é exibir a imagem certa para o tamanho de tela certo. Se uma imagem grande for reduzida para uma tela de celular, o conteúdo poderá ficar ilegível. Também não é necessário carregar um arquivo muito grande se sua largura não for necessária de qualquer maneira. Vamos ser mais seletivos!

O conceito de renderização de imagens diferentes usando media queries pode ser realizado com o picture marcação.

Neste código, a fonte padrão para o img tag é definida como a menor imagem. o source tags atualiza a tag img src com a srcset quando o media condição for atendida.

Redimensione a demonstração abaixo para ver como as imagens são atualizadas com base no tamanho da tela (aqui está a versão em tela cheia para brincar):

4. Contêineres Responsivos para Melhores Layouts

Um site responsivo fica bem em todas as telas e isso inclui maior telas. Uma das desvantagens de não projetar para telas maiores é ter sua página da Web esticada quando exibida em uma tela ampla ou projetor. Aqui está um layout de artigo simples onde flutuamos algumas imagens para a esquerda e para a direita:

E este é o artigo em uma tela maior:

Os comprimentos dos parágrafos tornam-se tão longos que o conteúdo é quase ilegível. E as imagens causam uma enorme lacuna entre as linhas do texto.

Podemos resolver esse problema usando um contêiner responsivo:

.container {
  max-width: 900px;
  width: 100%;
  margin: auto;
}

O recipiente leva um max-width valor e usa o auto margem para colocar o conteúdo no centro.

Vamos adicionar o container class para o conteúdo em nossa marcação:

  

    
Responsive Containers
    
Create content for large screens
  


  
Lorem Ipsum
    
    
Lorem ipsum dolor

Redimensione a demonstração e veja como o conteúdo fica em telas menores e maiores.

E aí está, uma implementação fácil para conteúdo responsivo em telas grandes.

Para layouts modernos de próximo nível, você também pode usar a grade CSS. Confira nosso guia para iniciantes:

• 

  Layout de grade CSS

  Layout de grade CSS: um guia de início rápido

  Ian Yates

Conclusão

Para resumir, para tornar um site responsivo, você terá que:

1. Defina a meta tag da janela de visualização para dimensionar
2. Use consultas de mídia para criar layouts diferentes
3. Defina larguras máximas para mídia na página para evitar estouro
4. Use contêineres para ajustar o conteúdo em telas maiores e encolher em telas menores.

Leitura mais responsiva