Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Princípios básicos do Web design responsivo

O uso de dispositivos móveis para navegar pela Internet está crescendo a um ritmo surpreendente, mas, infelizmente, grande parte da Web não é otimizada para esses dispositivos. Dispositivos móveis frequentemente são limitados pelo tamanho de suas telas e exigem uma abordagem diferente para o layout do conteúdo.

Existem diversos tamanhos de tela entre celulares, "phablets" (mistura de celular e tablet), tablets, desktops, consoles de jogos, TVs e até wearables. Os tamanhos das telas estão sempre mudando, então é importante que seu site possa se adaptar a qualquer tamanho de tela, hoje ou no futuro.

O Web design responsivo, originalmente definido por Ethan Marcotte em A List Apart, reage às necessidades dos usuários e seus dispositivos. O layout muda de acordo com o tamanho da tela e os recursos do dispositivo. Por exemplo, em um celular, os usuários veriam o conteúdo em uma só coluna, enquanto um tablet poderia mostrar o mesmo conteúdo em duas colunas.

Responsive Web Design

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.

You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

This is a free course offered through Udacity

Take Course

Defina a janela de visualização

Páginas otimizadas para uma variedade de dispositivos devem incluir uma tag meta viewport no cabeçalho do documento. Uma tag meta viewport instrui o navegador como controlar o tamanho e o dimensionamento da página.

TL;DR

  • Use a tag meta viewport para controlar a largura e o dimensionamento da janela de visualização dos navegadores.
  • Inclua width=device-width para corresponder à largura da tela em pixels independentes de dispositivo.
  • Inclua initial-scale=1 para estabelecer uma relação 1:1 entre pixels CSS e pixels independentes de dispositivo.
  • Garanta que sua página seja acessível não desativando o dimensionamento do usuário.

Para tentar oferecer a melhor experiência, navegadores móveis renderizarão a página à largura de uma tela de desktop (geralmente cerca de 980 pixels, mas isso varia de acordo com os dispositivos) e tentarão melhorar a aparência do conteúdo aumentando os tamanhos das fontes e dimensionando o conteúdo para que ele caiba na tela. Isso significa que os tamanhos das fontes podem parecer inconsistentes para os usuários, que precisarão tocar duas vezes ou controlar o zoom com gestos de pinça para ver e interagir com o conteúdo.

<meta name="viewport" content="width=device-width, initial-scale=1">

Usar o valor meta viewport width=device-width instrui a página a acompanhar a largura da tela em pixels independentes de dispositivos. Isso permite que a página ajuste o fluxo do conteúdo para diferentes tamanhos de telas, seja para renderização em pequenos celulares ou para um grande monitor de desktop.

Alguns navegadores mantêm a largura da página constante ao girar para o modo paisagem e ampliar o zoom em vez de ajustar o fluxo de acordo com a tela. Adicionar o atributo initial-scale=1 instrui os navegadores a estabelecer uma relação 1:1 entre pixels CSS e pixels independentes de dispositivos independentemente da orientação do dispositivo, além de permitir que a página tire total proveito da largura total do modo paisagem.

Observação: Use uma vírgula para separar atributos e garantir que navegadores mais antigos consigam analisá-los corretamente.

Garanta uma janela de visualização acessível

Além de definir uma initial-scale, você também pode definir os seguintes atributos para a janela de visualização:

  • minimum-scale
  • maximum-scale
  • user-scalable

Quando definidos, eles podem impedir que o usuário ajuste o zoom da janela de visualização, potencialmente causando problemas de acessibilidade.

Dimensione o conteúdo de acordo com a janela de visualização

Em computadores e dispositivos móveis, os usuários estão acostumados a navegar por sites verticalmente, mas não horizontalmente; forçar o usuário a navegar horizontalmente ou diminuir o zoom para ver toda a página resulta em uma experiência do usuário inadequada.

TL;DR

  • Não use elementos grandes com larguras fixas.
  • O conteúdo não deve depender de uma largura de janela de visualização específica para ser renderizado corretamente.
  • Use consultas de mídia CSS para aplicar diferentes estilos para pequenas e grandes telas.

Ao desenvolver um site móvel com uma tag meta viewport, é fácil criar por acidente um conteúdo de página que não cabe na porta de visualização especificada. Por exemplo, uma imagem que é exibida em uma largura maior do que a janela de visualização pode fazer com que a página seja rolada horizontalmente. Você deve ajustar esse conteúdo para caber na largura da janela de visualização. Assim, o usuário não precisará navegar horizontalmente.

Como as dimensões e as larguras das telas em pixels CSS variam significativamente entre dispositivos (por exemplo, entre celulares e tablets e mesmo entre diferentes celulares), o conteúdo não deve depender de uma largura de janela de visualização específica para ser renderizado corretamente.

Definir grandes larguras absolutas de CSS para elementos de página (como o exemplo abaixo), fará com que div seja largo demais para a janela de visualização de um dispositivo mais estreito (por exemplo, um dispositivo com uma largura de 320 pixels CSS, como um iPhone). Em vez disso, considere usar valores de largura relativos, como width: 100%. Da mesma forma, tenha cuidado ao usar grandes valores de posicionamento absolutos que podem fazer com que o elemento fique fora da janela de visualização em telas pequenas.

Use consultas de mídia do CSS para aumentar a capacidade de resposta

Consultas de mídia são filtros simples que podem ser aplicados a estilos CSS. Eles facilitam a mudança de estilos com base nas características do dispositivo que está renderizando o conteúdo, incluindo o tipo de exibição, a largura, a altura, a orientação e até mesmo a resolução.

TL;DR

  • Consultas de mídia podem ser usadas para aplicar estilos com base nas características do dispositivo.
  • Use min-width em vez de min-device-width para garantir a experiência mais ampla.
  • Use tamanhos relativos para elementos para evitar interrupções no layout.

Por exemplo, você pode colocar todos os estilos necessários para impressão dentro de uma consulta de mídia de impressão:

<link rel="stylesheet" href="print.css" media="print">

Além de usar o atributo media no link da folha de estilo, existem duas outras maneiras de aplicar consultas de mídia que podem ser incorporadas em um arquivo CSS: @media e @import. Por motivos de desempenho, qualquer um dos dois primeiros métodos são recomendados em vez da sintaxe @import (consulte Evite importações de CSS).

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

A lógica que se aplica a consultas de mídia não é mutuamente exclusiva e qualquer filtro que atenda a esses critérios. O bloco CSS resultante é aplicado usando as regras padrão de precedência no CSS.

Aplique consultas de mídia baseadas no tamanho da janela de visualização

Consultas de mídia nos permitem criar uma experiência responsiva, onde estilos específicos são aplicados a telas pequenas, telas grades e qualquer tela intermediária. A sintaxe da consulta de mídia permite a criação de regras que podem ser aplicadas dependendo das características do dispositivo.

@media (query) {
  /* CSS Rules used when query matches */
}

Embora existam vários itens para os quais possamos fazer consultas, os mais usados para um Web design responsivo são min-width, max-width, min-height e max-height.

Parâmetros
min-width Regras aplicadas para qualquer largura de navegador acima do valor definido na consulta.
max-width Regras aplicadas para qualquer largura de navegador abaixo do valor definido na consulta.
min-height Regras aplicadas para qualquer altura de navegador acima do valor definido na consulta.
max-height Regras aplicadas para qualquer altura de navegador abaixo do valor definido na consulta.
orientation=portrait Regras aplicadas a qualquer navegador cuja altura é maior ou igual à largura.
orientation=landscape Regras aplicadas a qualquer navegador cuja largura é maior do que a altura.

Vejamos um exemplo:

Visualização de uma página que usa consultas de mídia para alterar as propriedades conforme ela é redimensionada.
Visualização de uma página que usa consultas de mídia para alterar as propriedades conforme ela é redimensionada.
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>

Experimente

  • Quando o navegador tiver entre 0 e 640 pixels de largura, max-640px.css será aplicado.
  • Quando o navegador tiver entre 500 e 600 de largura, os estilos em @media serão aplicados.
  • Quando o navegador tiver 640 ou mais pixels de largura, min-640px.css será aplicado.
  • Quando a largura do navegador for maior do que sua altura, landscape.css será aplicado.
  • Quando a altura do navegador for maior do que sua largura, portrait.css será aplicado.

Uma observação sobre min-device-width

Também é possível criar consultas baseadas em min-device-width, mas essa prática é altamente desencorajada.

A diferença é sutil, mas muito importante: min-width é baseado no tamanho da janela do navegador, enquanto min-device-width é baseado no tamanho da tela. Infelizmente, alguns navegadores, incluindo o navegador Android legado, não informam a largura do dispositivo corretamente, informando o tamanho da tela em pixels de dispositivo em vez da largura da janela de visualização esperada.

Além disso, o uso do min-device-width pode impedir que o conteúdo se adapte em desktops ou outros dispositivos que permitam que as janelas sejam redimensionadas, pois a consulta é baseada no tamanho do dispositivo, não no da janela do navegador.

Use any-pointer e any-hover para interações flexíveis

Começando com o Chrome 39, suas folhas de estilo podem programar seletores que cobrem vários tipos de ponteiro e comportamentos de passar o cursor. Os recursos de mídia any-pointer e any-hover são semelhantes a pointer e hover em termos de permitir que você consulte os recursos do ponteiro do usuário. Entretanto, any-pointer e any-hover operam em conjunto com todos os dispositivos ponteiro em vez de apenas com o dispositivo ponteiro principal.

Use unidades relativas

Um conceito essencial por trás do design responsivo é a fluidez e a proporcionalidade em oposição a layouts com largura fixa. Usar unidades relativas para medição pode ajudar a simplificar os layouts e impedir a criação acidental de componentes grandes demais para a janela de visualização.

Por exemplo, definir width: 100% em um div de nível superior garante que ele abranja a largura a janela de visualização e nunca seja grande ou pequeno demais para a janela de visualização. O div será encaixado, independentemente de ser um iPhone de 320 pixels de largura, um Blackberry Z10 de 342 pixels de largura ou um Nexus 5 de 360 pixels de largura.

Além disso, o uso de unidades relativas permite que os navegadores renderizem o conteúdo com base no nível de zoom dos usuários sem a necessidade de adicionar barras de rolagem horizontais na página.

Não recomendado—largura fixa

div.fullWidth {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

Recommended—responsive width

div.fullWidth {
  width: 100%;
}

Como escolher pontos de interrupção

Não defina pontos de interrupção com base em classes de dispositivos. Definir pontos de interrupção com base em dispositivos, produtos, nomes de marcas ou sistemas operacionais específicos disponíveis atualmente pode tornar a manutenção um pesadelo. Em vez disso, o próprio conteúdo deve determinar como o layout se ajusta ao contêiner.

TL;DR

  • Crie pontos de interrupção com base no conteúdo, nunca em dispositivos, produtos ou marcas específicas.
  • Crie um design para o menor dispositivo móvel primeiro e aprimore a experiência progressivamente conforme mais espaço ficar disponível na tela.
  • Mantenha as linhas de texto em um limite máximo de 70 ou 80 caracteres.

Selecione os principais pontos de interrupção começando pequeno e progredindo

Visualização da previsão do tempo em uma tela pequena.

Projete o conteúdo para que ele caiba primeiro em uma tela pequena e expanda a tela até que um ponto de interrupção se torne necessário. Isso permite que você otimize pontos de interrupção com base no conteúdo e mantenha o menor número possível de pontos de interrupção.

Vamos examinar o exemplo que vimos no início: a previsão do tempo. A primeira etapa é fazer com que a previsão seja exibida de forma adequada em uma tela pequena.

Visualização da previsão do tempo conforme a página fica mais larga.
Visualização da previsão do tempo conforme a página fica mais larga.

Em seguida, redimensione o navegador até que haja muito espaço branco entre os elementos e a previsão não esteja tão bonita. Essa decisão é relativamente subjetiva, mas mais de 600 pixels é largo demais.

Para inserir um ponto de interrupção em 600 pixels, crie duas novas folhas de estilo, uma a ser usada quando o navegador tiver até 600 pixels de largura e uma para quando ele tiver mais de 600 pixels.

<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">

Experimente

Visualização da previsão do tempo projetada para uma tela mais larga.
Visualização da previsão do tempo projetada para uma tela mais larga.

Por fim, refatore o CSS. Neste exemplo, inserimos os estilos mais comuns, como fontes, ícones, posicionamento básico e cores, em weather.css. Layouts específicos para a tela pequena devem, então, ser colocados em weather-small.css e estilos para telas grandes em weather-large.css.

Selecione pontos de interrupção secundários quando necessário

Além de escolher os principais pontos de interrupção para quando o layout for significativamente alterado, também é útil ajustar para alterações pequenas. Por exemplo, entre os principais pontos de interrupção, pode ser interessante ajustar as margens ou o preenchimento de um elemento ou aumentar o tamanho da fonte para que ela pareça mais natural no layout.

Vamos começar otimizando o layout para telas pequenas. Neste caso, vamos aumentar a fonte quando a largura da janela de visualização for maior do que 360 pixels. Em seguida, quando houver espaço suficiente, podemos separar as temperaturas máximas e mínimas para que elas fiquem na mesma linha em vez de uma em cima da outra. Vamos também ampliar um pouco os ícones de clima.

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}
Antes de adicionar pontos de interrupção secundários.
Antes de adicionar pontos de interrupção secundários.
Após adicionar pontos de interrupção secundários.
Após adicionar pontos de interrupção secundários.

Da mesma forma, para telas grandes, é ideal se limitar à largura máxima do painel de previsão para que ele não consuma toda a largura da tela.

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

Otimize o texto para leitura

A teoria de legibilidade clássica sugere que uma coluna ideal deve conter entre 70 e 80 caracteres por linha (cerca de 8 a 10 palavras em inglês). Dessa forma, sempre que a largura de um bloco de texto ultrapassar 10 palavras, considere adicionar um ponto de interrupção.

Antes de adicionar pontos de interrupção secundários.
Antes de adicionar pontos de interrupção secundários.
Após adicionar pontos de interrupção secundários.
Após adicionar pontos de interrupção secundários.

Vamos examinar o exemplo de postagem do blog acima em mais detalhes. Em telas menores, a fonte Roboto a 1em funciona perfeitamente com 10 palavras por linha, mas telas maiores exigirão um ponto de interrupção. Nesse caso, se a largura do navegador for superior a 575 pixels, o conteúdo ideal terá 550 pixels.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

Experimente

Nunca oculte o conteúdo por completo

Tenha cuidado ao escolher qual conteúdo ocultar ou mostrar dependendo do tamanho da tela. Não oculte conteúdo simplesmente porque ele não cabe na tela. O tamanho da tela não é um indicativo definitivo do desejo de um usuário. Por exemplo, eliminar a contagem de pólen da previsão do tempo pode ser um problema sério para pessoas que sofrem com alergia na primavera e que precisam determinar se podem sair ou não.

Visualize pontos de interrupção de consultas de mídia no Chrome DevTools

Quando terminar de configurar seus pontos de interrupção de consultas de mídia, é recomendável verificar como seu site ficará com eles. É possível redimensionar a janela do navegador para acionar os pontos de interrupção, mas há uma maneira melhor: o Chrome DevTools. As duas capturas de tela abaixo demonstram o uso do DevTools para visualizar a aparência de uma página em diferentes pontos de interrupção.

Exemplo do recurso de consultas de mídia do DevTools

Para visualizar sua página em diferentes pontos de interrupção:

Abra o DevTools e ative o Device Mode.

Use os controles de janela de visualização para selecionar Responsive, colocando o DevTools no Responsive Mode.

Por fim, abra o menu Device Mode e selecione Show media queries para exibir os pontos de interrupção como barras coloridas acima da página.

Clique em uma das barras para visualizar a página enquanto a consulta de mídia está ativa. Clique com o botão direito em uma barra para passar para a definição da consulta de mídia. Consulte Consultas de mídia para obter mais ajuda.