Layout ou design líquido ou fluído é um tipo de desenho em que o conteúdo do site se adapta à resolução do equipamento do utilizador.
O layout líquido acompanha o tamanho do ecrã, aumentando e diminuindo sem trocar a estrutura e sem valorizar em demasia a usabilidade. Por outras palavras, com um design fluído o conteúdo acaba por ocupar todo o ecrã, independente da sua resolução. Isso permite mostrar mais conteúdo em monitores maiores e ao mesmo tempo manter-se visível em ecrãs mais pequenos.
O layout fluído ou líquido também fornece uma consistência em larguras relativas, permitindo que a página responda de forma mais dinâmica quando o utilizador altera o tamanho das fontes. O objetivo do design líquido é, precisamente, manter o mesmo peso espacial em todos os elementos. Daí o nome, líquido. É só imaginar um líquido num recipiente a ocupar todo o espaço, independente da forma, para perceber este conceito.
Regra geral, em design líquido trabalha-se com medidas em percentagem, que variam de acordo com o tamanho útil do browser do utilizador.
Principais vantagens do layout líquido
- Os conteúdos adaptam-se melhor à resolução do ecrã do utilizador.
- Os conteúdos ocupam toda a área visível do ecrã, permitindo transmitir mais informação.
- Não há espaço vazio à volta do site.
Principais desvantagens do layout líquido
- Maior dificuldade na leitura de linhas de texto demasiado longas.
- Perca de controlo sobre o posicionamento de alguns elementos na página, devido aos tamanhos que variam consoante os ecrãs onde são visionados. As colunas de texto podem ficar largas demais, por exemplo.
- Possibilidade de surgirem problemas com elementos de largura fixa (como imagens) dentro de uma coluna líquida, ou seja, se a coluna ficar menor que a imagem, alguns navegadores ou browsers podem aumentar a largura da mesma sem considerarem as limitações impostas pelo designer.
- Possibilidade de alguns browsers sobreporem o texto com a imagem para tentar manter as percentagens corretas.
Tipos de layout
Normalmente listam-se quatro tipos de layout na web: líquido ou fluído, fixo, adaptado e responsivo. Cada um possui características e formas de desenvolvimento diferente que exigem preocupações específicas durante a etapa de conceção.
Diferenças entre os principais tipos de layout
O layout fluído acompanha o tamanho do ecrã, aumentando e diminuindo sem trocar a estrutura e sem valorizar em demasia a usabilidade, enquanto que o layout fixo tem um tamanho definido pelo web designer que se mantém independente do equipamento usado pelo utilizador (seja um desktop, seja um smartphone).
Face ao layout fluído, o layout fixo tem a vantagem de ter a mesma aparência independente da resolução do ecrã. Além disso, é mais fácil desenvolver um esquema com largura fixa porque as preocupações com adaptações a mudanças para resoluções diversas são menores. Porém, em monitores com resoluções muito baixas ou muito altas, a resolução pode ficar comprometida e dificultar a leitura.
Por seu turno, o layout adaptado é um design que, como o próprio nome indica, se adapta a cada tipo de resolução. É quase o mesmo que ter várias páginas estáticas para equipamentos diferentes, mas com apenas uma página de conteúdo. A grande vantagem deste modelo é que a experiência de navegação é adaptada ao equipamento que o utilizador está a usar. A grande desvantagem é que este é o design que demora mais tempo a desenvolver.
Por último, o layout responsivo ou design responsivo é aquele que reajusta a página quando a resolução é reduzida: quando o ecrã se torna pequeno demais para que o conteúdo seja visionado corretamente, arranja-o de forma a caber num layout mais adequado. Isto quer dizer que o design não é adaptado para aparelhos específicos, mas o layout é adaptado para o conteúdo. Com as técnicas de design responsivo, todas as imagens, fontes e qualquer outro elemento HTML são redimensionadas, aproveitando ao máximo o espaço útil do ecrã.
No layout responsivo, ao contrário do adaptado, não é necessário programar o site para funcionar em cada resolução existente. E, ao contrário do líquido, este design leva em conta todos os objetos de uma página na Internet e não só o texto.
