Layout Fluído ou Responsivo

10:07

Muitas pessoas confundem os layout fluídos com os responsivos, pensam que tudo que é responsivo apenas estica e diminui, mas não é bem assim. Layouts fluídos são bem diferentes de responsivos, pois o Fluído (como o nome diz) flui com o tamanho da tela do usuário, enquanto o Responsivo responde ao tamanho.

A equipe da Turbosite reuniu dois artigo para explicar melhor essa diferença. Reunimos conteúdo do blog Debug True e do blog Ferramentas Blog, abaixo você pode conferir

 

Layout Responsivos

Os layouts responsivos são aqueles que precisam ter uma atenção maior da área de UX, quando é analisada toda a usabilidade do site, contemplando todos os dispositivos e se possível partindo do princípio “mobile first”, onde toda a arquitetura começa sendo pensada a partir do menor dispositivo utilizável seguindo em ordem crescente e adequando as informações.

O layout não segue a mesma estrutura em todos os dispositivos, muitos trocam as informações de lugar para melhor visualização, as vezes escondem e mostram a partir de um click, mudam os tamanhos das fontes, ícones e qualquer outro elemento. Para esse tipo de desenvolvimento são utilizadas as media queries css e algumas libs como bootstrap,  groundwork e o LazyLoad.

A seguir você confere 3 estados diferentes para layout e sua respectiva reação com a página.

  1. Monitores com resolução de 1024px de largura ou superior e Internet Explorer 8 e inferior. Foi declarado uma largura absoluta de 960 px para o corpo do site.
  2. Largura igual ou inferir a 900px. Aqui declaramos que existem apenas larguras relativas de 100%.
  3. Largura igual ou inferir a 400px. Ocultamos a sidebar do lado esquerdo (apenas para ilustrar o exemplo).

layout-responsivo-02

Neste exemplo podemos ver claramente como o efeito cascata do CSS funciona corretamente com o Media Queries, desta forma o CSS que fizemos como padrão é mantido normalmente por todo o documento, sendo alterado apenas quando declaramos alguma modificação com o Media Queries.

Note também que o css declarado para a largura de janela de 900px é mantido para o de 400px.

 

Layouts Fluídos

Os layouts fluídos são aqueles que acompanham o tamanho da tela, apenas aumentando e diminuindo, não trocando estrutura e não pensando muito na usabilidade, vamos pensar em acessar um site em uma tv de 50″ e acessar o mesmo site em um celular onde esse site é visto da mesma forma pelos 2 dispositivos, é claro que ficará horrível em um dos casos se não nos dois, para construir esse tipo de layout não se pensa muito em “px” e sim em “%”, para que o elemento se estique de acordo com o pai tendo assim a sua “fluidez”. Aqui tem um exemplo simples de como ele funciona: 960.gs.

Para ilustra melhor o que estamos dizendo, a imagem a seguir exemplifica um layout construído em “%”.

layout-fluido

Veja que caso o usuário tenha a tela muito grande o texto ficará praticamente em apenas uma linha e quando diminuímos a tela o texto fica totalmente espremido na sidebar.

 

Layouts Fluídos Híbridos

Temos também os layouts fluídos híbridos onde seguem o mesmo padrão dos fluídos, porém com uma limitação de largura, nesse caso utilizamos o “max-width” e “min-width” assim conseguimos ter certo controle do layout.

Para demonstrar como funciona o Fluído Híbrido, é aplicado um max-width de 960px e min-width de 600px no exemplo anterior.

layout-fluido-hibrido-02

 

Para conferir na prática a diferença entre cada layout, na lista abaixo abaixo você pode acessar um exemplo de página para cada tipo layout. Apenas altere o zoom da página para testemunhar o efeito de cada layout em diferentes resoluções de tela.