Nem todos os layouts são responsivos e nem toda responsividade é fluida. E existem mais tipos de layouts do que você imagina, sendo comum confundir os inúmeros termos utilizados em desenvolvimento multi-device.

No mercado existem inúmeras telas e dispositivos com alturas e larguras diferentes, sendo impossível criar um único layout que fique bom para todos, também não é possível criar um layout para cada dispositivo, por isso é importante pensarmos em dimensões entre larguras ao invés de layouts fixos.

Existem 4 tipos de layouts no mercado, que são:

• Static
• Liquid
• Adaptative
• Responsive

Para facilitar o entendimento disponibilizei um arquivo do Figma com as configurações de todos layouts (largura) com um protótipo funcional.

---

Estático (Static / Fixed)

Layouts estáticos tem uma largura fixa independente da resolução, eram muito comuns no passado e hoje felizmente eles quase não existem mais. O container ou body é formatado para não se mover em sua largura (daí o nome estático).

A desvantagem desse tipo de layout é que ao visualizar o site em resoluções menores será exibido uma barra de rolagem horizontal e será necessário rolar a barra para ver o conteúdo completo conforme imagem abaixo:

Exemplo de site Estático ou Fixo

---

Fluído (Fluid / Liquid)

Com o layout fluido ou líquido, como o nome já diz, ele se comporta de acordo com o movimento do elemento pai que é o navegador, você especifica seus tamanhos não em pixel, mas em porcentagem, ou seja, se o tamanho da tela mudar, a proporção dos elementos permanecerá igual, porém os elementos se adaptarão internamente.

A desvantagem deste layout é que em telas menores as colunas podem ficar muito estreitas a ponto de não podermos compreender seus conteúdos, imagine um texto extenso em uma coluna de 50pixels de largura ou menor. Isso vale também para elementos como imagens e vídeo que deveriam permanecer em tamanho fixo mas nesse tipo de layout eles de adaptarão com a largura podendo quebrar a experiência, esse layout ao meu ver é bem problemático.

Esse tipo de layout só é vantajoso se comparado ao fixo (anterior), hoje em dia é quase impossível se projetar interfaces 100% fluídas, ambos os cenários Estático e Fluído quase não são usados hoje em dia.

Exemplo de site Liquido ou Fluido

Adaptativo (Adaptative)

Imagine que você tenha muitas resoluções (breakpoints) e em cada uma delas o seu layout terá que se encaixar na largura que sua tela está reduzindo ou aumentando, então cada página terá x adaptações baseadas nos seus breakpoints, ou seja, se a configuração for ter 4 quebras de layout, todas as suas páginas terão 4 adaptações de layout, por isso é muito importante pensar em containers e não em posições absolutas, dessa forma cada adaptação de layout se encaixará no breakpoint entre suas dimensões pré-determinadas conforme imagem abaixo:

A cada breakpoint a tela irá se adequar ao novo formato de layout de forma instantânea, sem responsividade nem fluidez, a ideia do layout adaptativo é a troca sem movimento.

Pensando no ponto positivo é fácil trabalhar com templates de página tendo em vista que os containers sempre serão alterados conforme seus breakpoints pré-determinados, caso o Design System exista regras breakpoints igual o Bootstrap faz melhor ainda.

A parte negativa (ou não) é que existe a necessidade de entender os padrões a fundo e não é aconselhável sair desse padrão devido a consistência do projeto e que haverá uma necessidade de alterar código para que isso funcione corretmanete, mas sim é possível alterar essa regra em avaliando e testando o formato e alinhando com o time de Design System para escalar esse ajuste em Design e código.

Exemplo de site adaptativo

Responsivo (Responsive)

O design Responsivo é o melhor de todos os cenários (na minha opinião), pois ele integra os 2 melhores modelos em 1 só que é o fluído e adaptativo, dessa forma a troca de breakpoints fica mais suave devido ao encaixe do conteúdo nos containers (fluído) antes de alterar o layout no (adaptativo) conforme imagem abaixo:

Apesar de existir uma regra pré-definida dos Breakpoints o conteúdo sempre está “vivo” se adaptando aos containers deixando assim um sentimento de site inteligente e personalizado em cada pixel da tela.

Esse é o formato mais usado hoje no mercado, podendo existir uma mistura de Responsivo até X largura e abaixo disso Adaptativo, as misturas podem ser interessante.

Exemplo de site responsivo

---

Bônus – O que pode alterar a cada Breakpoints?

Breakpoints (Layout Responsivo como é chamado no mercado) são nada mais que blocos de CSS agrupados de acordo com a Largura ou altura do dispositivo, podendo ser 1 valor de mínimo/máximo ou 2 valores especificando um intervalo conforme abaixo:

Único Valor de tamanho mínimo ou máximo:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Valores de mínimos e máximos determinando um intervalo:

@media only screen and (min-width: 360px) and (max-width: 768px) {
	// do something in this width range.
}

Como funciona na prática?

Vamos pensar que temos uma base de estilos que irá transitar entre todas as resoluções, porém, em determinada largura eu quero aplicar uma mudança de largura, cor e espaçamento por exemplo, o código seria conforme abaixo:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 980px;
  margin: 0 auto;
  margin-top: 40px;
  text-color:black;
}

.boxes {
  width: 100px;
}


@media only screen and (min-width: 320px) and (max-width: 576px) {
  .container {
    width: 100%;
    padding-left: 23px;
    text-color: red;
  }
  .boxes {
    width: 100%;
  }
}

Posso alterar QUALQUER propriedade dos estilos com Breakpoints, dessa forma não ficamos limitados apenas as larguras com as adaptações de conteúdo e elementos visuais com larguras e algura conforme estamos acostumados a fazer com as ferramentas de mercado de Design (como o Figma) que não dão suporte a isso (mentira que Framer e Webflow fazem isso, corre lá conhecer elas).

Conclusão

Quer aprender um pouco mais sobre isso? Sugiro estudar o Bootstrap e mexer na prática com o código dele, dê uma lida na documentação do site que é na minha opinião uma das melhores do mercado. Link para Breakpoints

Agradecimentos

*Thanks to Nick Davison who developed the Liqui dap sive website that I use to explain the different examples of applying layout types to websites.

*Referências do artigo e de imagens do site UX Alpaca.