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.
- 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.
- Largura igual ou inferir a 900px. Aqui declaramos que existem apenas larguras relativas de 100%.
- Largura igual ou inferir a 400px. Ocultamos a sidebar do lado esquerdo (apenas para ilustrar o exemplo).
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 “%”.
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.
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.