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);
  }
}