Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Padrões de Web design responsivo

Os padrões de Web design responsivo estão evoluindo rapidamente, mas há muitos padrões estabelecidos que funcionam bem em dispositivos móveis e computadores.

A maioria dos layouts usados por páginas da Web responsivas pode ser categorizada em um de cinco padrões: mostly fluid, column drop, layout shifter, tiny tweaks e off canvas. Em alguns casos, uma página pode usar uma combinação de padrões, como column drop e off canvas. Esses padrões, originalmente identificados por Luke Wroblewski, fornecem um ponto de início sólido para qualquer página responsiva.

Os padrões

Para simplificar e facilitar a compreensão, cada exemplo abaixo foi criado com uma marcação real usando flexbox, geralmente com três div de conteúdo contidos em um div de contêiner primário. Cada exemplo foi programado começando com a menor visualização e pontos de interrupção foram adicionados conforme a necessidade. O modo flexbox layout também é bem suportado por navegadores modernos, embora ainda possa exigir a prefixação do fabricante para obter melhor suporte.

Mostly fluid

O padrão mostly fluid consiste principalmente em uma grade fluida. Em telas grandes ou médias, ele geralmente permanece do mesmo tamanho, apenas ajustando as margens em telas maiores.

Em telas menores, a grade fluida causa um refluxo do conteúdo principal, enquanto as colunas são empilhadas verticalmente. Uma grande vantagem desse padrão é que geralmente exige apenas um ponto de interrupção entre telas pequenas e telas grandes.

Experimente

Na visualização menor, cada conteúdo div é empilhado verticalmente. Quando a largura da tela atinge 600 pixels, o conteúdo principal div permanece em width: 100%, enquanto o div secundário é mostrado como duas colunas abaixo do div principal. Acima de 800 pixels, a largura do contêiner div torna-se fixa e ele é centralizado na tela.

Estes são alguns dos sites que usam esse padrão:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
  .c3, .c4, .c5 {
    width: 33.33%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Column drop

Para layouts de várias colunas de largura completa, o column drop simplesmente empilha as colunas verticalmente conforme a largura da janela fica estreita demais para o conteúdo.

Em algum momento, isso resultará em todas as colunas empilhadas verticalmente. Selecionar pontos de interrupção para esse padrão de layout depende do conteúdo e varia de acordo com o design.

Experimente

Como no exemplo do padrão mostly fluid, o conteúdo é empilhado verticalmente na menor visualização, mas, conforme a tela se expande além de 600 pixels, o div do conteúdo primário e secundário utiliza a largura total da tela. A ordem do div é definida usando a ordem da propriedade CSS. Em 800 pixels, todos os três conteúdos de div são mostrados, usando a largura total da tela.

Estes são alguns dos sites que usam esse padrão:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

Layout shifter

O padrão layout shifter é o padrão mais responsivo, com vários pontos de interrupção em várias larguras de tela.

O segredo desse layout é a forma com a qual o conteúdo se move, em vez de fluir e cair abaixo de outras colunas. Devido às diferenças significativas entre cada ponto de interrupção principal, é mais complexo de se manter e provavelmente envolve mudanças dentro dos elementos, não apenas no layout de conteúdo geral.

Experimente

Este exemplo simplificado mostra o padrão layout shifter. O conteúdo é empilhado verticalmente em telas menores, mas muda significantemente conforme a tela aumenta, com um div à esquerda e dois div empilhados à direita.

Estes são alguns dos sites que usam esse padrão:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Tiny tweaks

O tiny tweaks simplesmente faz pequenas mudanças no layout, como ajustar o tamanho da fonte, redimensionar imagens ou mover ligeiramente o conteúdo.

Isso funciona bem em layouts de coluna única, como sites de uma página linear e artigos com muito texto.

Experimente

Como o nome em inglês implica, pouco muda no exemplo conforme o tamanho da tela muda. Enquanto a largura da tela aumenta, o tamanho da fonte e o preenchimento a acompanham.

Estes são alguns dos sites que usam esse padrão:

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 500px) {
  .c1 {
    padding: 20px;
    font-size: 1.5em;
  }
}

@media (min-width: 800px) {
  .c1 {
    padding: 40px;
    font-size: 2em;
  }
}

Off canvas

Em vez de empilhar o conteúdo verticalmente, o padrão off canvas remove o conteúdo usado com menos frequência — como menus de navegação ou de aplicativo — mostrando-os apenas quando o tamanho da tela for suficiente. Em telas menores, o conteúdo pode ser visto com apenas um clique.

Experimente

Em vez de empilhar conteúdo verticalmente, este exemplo usa uma declaração transform: translate(-250px, 0) para ocultar dois div de conteúdo da tela. O JavaScript é usado para mostrar os divs adicionando uma classe aberta ao elemento para torná-lo visível. Conforme a tela fica maior, o posicionamento fora da tela é removido dos elementos e eles são mostrados dentro da janela de visualização visível.

Observe nessa amostra, o Safari para iOS 6 e Android Browser não suportam o recurso flex-flow: row nowrap do flexbox, portanto, tivemos que reverter para o posicionamento absoluto.

Estes são alguns dos sites que usam esse padrão:

body {
  overflow-x: hidden;
}

.container {
  display: block;
}

.c1, .c3 {
  position: absolute;
  width: 250px;
  height: 100%;

  /*
    This is a trick to improve performance on newer versions of Chrome
    #perfmatters
  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 

  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;

  z-index: 1;
}

.c1 {
  /*
  Using translate3d as a trick to improve performance on older versions of Chrome
  See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  #perfmatters
  */
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

.c2 {
  width: 100%;
  position: absolute;
}

.c3 {
  left: 100%;
}

.c1.open {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

.c3.open {
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

@media (min-width: 500px) {
  /* If the screen is wider then 500px, use Flexbox */
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .c1 {
    position: relative;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  .c2 {
    position: static;
  }
}

@media (min-width: 800px) {
  body {
    overflow-x: auto;
  }
  .c3 {
    position: relative;
    left: auto;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}