Responsive Web Design – Como fazer um site parecer bom em telefones e tablets

Agora que o navegador sabe o que está acontecendo, podemos utilizar técnicas populares para tornar nosso site responsivo. 🙌

Se você é novo no design da web responsivo, as consultas de mídia são o primeiro e mais importante recurso CSS a aprender. As consultas de mídia permitem estilizar elementos com base na largura da janela de exibição. Uma estratégia CSS popular é escrever primeiro os estilos para dispositivos móveis e criar sobre eles estilos mais complexos e específicos para computadores.

As consultas de mídia são uma parte importante do design responsivo da web, comumente usado para layouts de grade, tamanhos de fonte, margens e preenchimento que diferem entre o tamanho e a orientação da tela.

Abaixo está um exemplo de um caso de uso comum do primeiro estilo móvel, no qual uma coluna tem 100% de largura para dispositivos menores, mas em viewports maiores é de 50%.

.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}

O código acima é um exemplo simples, mas o que está realmente fazendo é bastante interessante.

1. Ao considerar o dispositivo móvel primeiro, o elemento “column” está definido para ter uma largura de 100%;
2. Usando um min-width consulta de mídia, definimos regras especificamente para viewports com uma largura mínima de 600px (viewports maiores que 600px) Portanto, para viewports maiores que 600px, o elemento da coluna terá uma largura de 50% do pai.

Embora as consultas de mídia sejam essenciais para o design responsivo da web, muitos outros novos recursos de CSS também estão se tornando amplamente adotados e suportados nos navegadores. O Flexbox é um desses novos e importantes recursos de CSS em termos de design web responsivo.

O que é o Flexbox?

Você pode estar se perguntando – “o que o Flexbox faz”? A melhor pergunta é – “o que o Flexbox não pode fazer”? Qual é a maneira mais fácil de centralizar verticalmente com CSS? Flexbox. Como você cria um layout de grade responsivo? Flexbox. Como podemos alcançar a paz global? Flexbox.

O módulo Flexbox Layout (Caixa flexível) fornece uma maneira mais eficiente de organizar, alinhar e distribuir espaço entre os itens em um contêiner, mesmo quando seu tamanho é dinâmico (daí a palavra “flex”).

No exemplo abaixo, combinamos consultas de mídia, conforme explicado acima, para criar uma grade responsiva.

Realizamos o seguinte com este código:

1. Estabeleça um layout flexbox com display: flex na nossa main elemento contêiner.
2. Estilo para celular primeiro. Nós definimos o main elemento para flex-wrap: wrap que permite que os elementos filhos sejam agrupados em nosso layout do flexbox, conforme ilustrado abaixo na figura 1. Definimos flex-basis: 100% no nosso div elementos para garantir que eles abranjam 100% da largura pai no layout da caixa flexível (figura 1).
3. Estilo para dispositivos maiores, como tablets e desktop. Utilizamos uma consulta de mídia semelhante ao nosso exemplo na seção anterior para definir nosso contêiner main elemento para flex-wrap: nowrap. Isso garante que os elementos filhos não sejam quebrados e que eles mantenham uma coluna dentro de um tipo de linha de layout. Pela configuração div para flex-basis: 33% na consulta de mídia – estabelecemos colunas com 33% da largura do pai.
4. Neste exemplo, a mágica apareceria em dispositivos maiores com nossas regras combinadas de consulta de mídia e flexbox. Porque nós definimos display: flex, e como não substituímos a regra na consulta de mídia, temos um layout de caixa flexível para celular, tablet e computador. A consulta de mídia flex-basis: 33% e herdado display: flex As regras nos fornecerão um layout reconhecível do flexbox, como visto na figura 2. No passado, para obter esse tipo de layout de coluna, precisaríamos realizar trabalhos pesados ​​e escrever emaranhados de CSS.

O Flexbox oferece uma ótima maneira de obter layouts variados e fluidos. Em alguns casos, podemos não ter essa liberdade no espaço vertical. Talvez seja necessário ajustar um elemento dentro de uma altura fixa. Nesta situação, temos outra técnica à nossa disposição – rolagem horizontal.

Pode chegar um momento em que o conteúdo excederá a janela de visualização sem uma maneira elegante de lidar com ela. Eis … estouro de rolagem para o resgate. 🦸

Os usos comuns para esta técnica incluem menus e tabelas roláveis. Abaixo está um exemplo de um menu rolável.

  Responsive Web Design
  RWD
  Responsive menu
  Overflow scroll example
  This is a lot of content!
  Yes
  we
  have
  another
  item

Como você fez isso? Vamos dar um mergulho mais profundo.

• overflow-y: scroll é o ingrediente principal desta receita. Ao especificá-lo, os elementos filhos sobrecarregarão o eixo horizontal com o comportamento de rolagem.
• Não tão rápido! Embora você possa pensar overflow-y seria suficiente, também temos que dizer ao navegador para não agrupar os elementos filhos com white-space: nowrap 🤷

Agora que temos algumas técnicas de layout RWD na manga, vamos dar uma olhada nos elementos que apresentam desafios específicos à sua natureza visual – imagens e vídeo.

Imagens responsivas

Usando atributos modernos de tag de imagem, podemos acomodar uma variedade de dispositivos e resoluções. Abaixo está um exemplo de uma imagem responsiva.

Isso está fazendo muitas coisas. Vamos dividir:

1. Pela configuração max-width: 100% a imagem será ampliada ou reduzida com base na largura do contêiner.
2. Usando uma combinação de picture, sourcee img Na verdade, estamos processando apenas uma imagem e carregando apenas a imagem mais adequada com base no dispositivo do usuário.
3. WebP é um formato de imagem moderno que oferece compactação superior para imagens na web. Utilizando source podemos referenciar uma imagem WebP para usar em navegadores que a suportam e outra source para referenciar uma versão PNG das imagens que não suportam WebP.
4. srcset é usado para informar ao navegador qual imagem usar com base na resolução do dispositivo.
5. Nós estabelecemos carregamento preguiçoso nativo utilizando o loading="lazy" par de atributo / valor.

Vídeo responsivo

O vídeo responsivo é outro assunto que inspirou um grande número de artigos e documentação.

Uma estratégia importante para estabelecer imagens responsivas, vídeo, iframes e outros elementos envolve o uso da proporção. A caixa de proporção não é uma técnica nova e uma ferramenta bastante útil para você se destacar como desenvolvedor da web.

Este artigo fornece uma demonstração sólida sobre como obter vídeos com largura “fluida”. Vamos dar uma olhada no código e detalhá-lo.

Neste exemplo, temos um vídeo do YouTube incorporado como um iframe e um div recipiente com videoWrapper classe. Este código está indo muito … vamos nos aprofundar.

• position: relative no elemento contêiner permite que os elementos filhos utilizem o posicionamento de absolvição em relação a ele.
• height: 0 combinado com padding-bottom: 56.25% é o ingrediente chave aqui que estabelece um comportamento dinâmico, impondo uma 16:9 proporção da tela.
• position: absolute, top: 0 e left: 0 definido no iframe cria um comportamento no qual o elemento se posiciona absolutamente em relação ao pai … colando-o no canto superior esquerdo.
• E finalmente a largura e a altura de 100% tornam o filho, elemento iframe 100% de seu pai. O pai, .videoWrapper assume o controle total do estabelecimento desse layout da proporção.

Eu sei … é muito. Podemos fazer mais para fazer com que o vídeo e as imagens tenham a melhor aparência em telefones e tablets. Ademais, eu incentivaria a pesquisa sobre esses tópicos de forma independente.

Ok, agora que somos mestres em web design responsivo, como podemos testar o que fizemos? Felizmente, temos várias ferramentas para simular e monitorar a experiência do usuário em uma variedade de dispositivos.

Existem diversas ferramentas úteis para nos ajudar a criar sites com design responsivo. Abaixo estão alguns que considero especialmente úteis.

Emulação para dispositivos móveis do Chrome DevTools

O DevTools do Chrome fornece emulação móvel de uma variedade de tablets e dispositivos móveis. Ele também fornece uma opção “responsiva”, que permite definir um tamanho de viewport personalizado.

Monitorando o desempenho de sites móveis com Foo

O Lighthouse é uma ferramenta de código aberto que fornece uma maneira de analisar o desempenho do site específico para um dispositivo.

Foo usa o Lighthouse nos bastidores para monitorar o desempenho do site e fornece feedback para análise. Você pode configurar o monitoramento para dispositivos móveis e de mesa para obter feedback contínuo sobre a capacidade de resposta do seu site.

Por exemplo, um relatório do Lighthouse chamará imagens carregadas incorretamente com base no dispositivo.

Conclusão

O design responsivo da web continuará evoluindo rapidamente, mas, se permanecermos atualizados sobre as tendências atuais, podemos oferecer a melhor experiência para nossos usuários. Espero que essas ferramentas e técnicas sejam úteis!

Não apenas os usuários do nosso site se beneficiarão de um design versátil, mas também os mecanismos de pesquisa classificarão nossas páginas da Web mais alto.