Back to blog 19 Out 2006

CSS & Webstandards

Layout: fixo, líquido/fluído ou elástico?

This is an archive post from 19 October 2006.

Ao conceber ou redesenhar um website, normalmente coloca-se sempre esta dúvida: o layout vai ser fixo ou líquido?

Um layout fixo permite ter mais controlo sobre o website porque as páginas terão sempre a mesma largura e os conteúdos irão comportar-se sempre da mesma maneira.
Um layout líquido ou fluído permite que a página se adapte à largura do ecrã do utilizador, ocupando todo o espaço visível em vez de ficar encostada a um canto ou centrada como acontece com os layouts fixos.

Ambas as soluções têm os seus pontos positivos e negativos.

Layout Fixo

Pontos positivos:

O webdesigner tem controlo sobre a forma como a informação é apresentada;
As linhas de texto têm uma largura fixa e curta, o que facilita a leitura de texto no ecrã;

Pontos negativos:

Num ecrã com uma resolução grande, o website fica encostado a um dos lados ou centrado na página, com muito espaço disponível à sua volta;
Menor acessibilidade, uma vez que o layout não se adapta às necessidades do utilizador;

Layout Líquido/Fluído

Pontos positivos:

Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução de ecrã do utilziador;
Os conteúdos ocupam toda a área visível do ecrã, permitindo transmitir mais informação;
Deixa de haver espaço vazio à volta do website;

Pontos negativos:

Maior dificuldade na leitura de linhas de texto demasiado longas;
Perde-se o controlo sobre o posicionamento de alguns elementos na página;

Não se pode dizer que um dos layouts seja melhor do que o outro porque ambos são opções válidas, dependendo do contexto do website que estamos a desenvolver. No entanto, existe um ponto intermédio: o layout elástico.

Layout Elástico

Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluído. Ou seja, a largura da página é extensível até um certo ponto a partir do qual se torna fixa. Na prática, isto significa que podemos ter uma página que tenha uma largura mínima de 800px e uma largura máxima de 1280px. A partir dos 800px para baixo ou dos 1280px para cima (valores de exemplo), a largura não se altera e a página funciona como uma página com layout fixo.

Isto permite ter, ao mesmo tempo, controlo dos elementos na página por parte do webdesigner e controlo da largura da janela por parte do utilizador, eliminando assim alguns pontos negativos identificados nos dois tipos de layouts anteriores.

Outro factor interessante é o facto de, num monitor com uma largura muito grande (vamos imaginar um ecrã com 2028px de largura ;) ) o nosso website elástico ocuparia cerca de metade do ecrã e o texto poderia tornar-se demasiado pequeno para se conseguir ler. Ao aumentar o tamanho do texto no browser (Firefox: CTRL+), a largura da página irá aumentar na mesma escala. Desta forma, o website irá aumentar a sua largura máxima consoante o tamanho do texto!

Para conseguir este efeito, basta definir a largura máxima da página em unidades "EM". Desta forma, a largura da página irá comportar-se da mesma forma como o tamanho do texto, ou seja, responde aos comandos do utilizador para aumentar ou diminuir o seu tamanho.

Se tiverem um monitor com uma resolução grande (superior a 1024px) podem experimentar aumentar o tamanho do texto agora e verão que a largura desta mesma página irá acompanhar o aumento do texto. Caso a largura da janela seja inferior a 1024px, a página mantém-se fixa e o texto aumenta.

Para mais informações sobre como implementar este tipo de layout, consultem este artigo do Roger Johansson sobre Layouts Elásticos.

20 comentários

Rui Moura

19 de Outubro de 2006, 19:35

Muito útil. Costumo preferir os layouts fixos, sinceramente, mas esta solução parece-me muito boa. É de facto um ponto intermédio, que resguarda o layout de ecrãs com resoluções megalómanas que poderiam destruir a aparência do site (se bem que resoluções acima de 1600 não sejam muito usadas …)

Mais uma coisa a implementar no novo layout … Já começam a ser “tecnologias” a mais …

Luís Fernandes

20 de Outubro de 2006, 09:05

Ora viva!
Ivo, mais uma vez parabéns por todo o trabalho, por este blog e por este artigo…
Anda me lembro da primeira vez que ouvi falar do “liquid design”, numa consulta biblográfica em 2001, num livro do Zeldman. Na altura achei sensacional e parecia que não havia razão nenhuma para contiuar com o design fixo. Na altura o conceito baseava-se no design da estrutura em percentagens… nada muito além disso.
Acho que a abordagem do layout elástico faz todo o sentido e resolve muitos problemas. Pois quanto à resolução, eu uso 2304×960, mas já usei 2560x… pois trabalho com monitor spanning e por vezes defronto-me muitas das vezes com distorções indesejadas…

andr3

20 de Outubro de 2006, 10:42

Muito bem dito Ivo. :)

Acho que só falta dizer que o desenvolvimento de layouts fixos tende a ser um pouco mais rápido que os outros, visto ser mais estático/directo.

Gostei desse “approach” do Roger, usando as expression() do IE + conditional comments.. Quando fiz o site da Cadi usei uma solução baseada em Javascript, que não me deixou muito contente. Por alguma razão nunca tinha lido esse artigo. :) Thanks!

Thalis Valle

20 de Outubro de 2006, 14:42

Parabéns pelo post.

Gaspar

20 de Outubro de 2006, 18:42

Bem Ivo, sempre em alta :)

Também escrevi á pouco sobre ele mas eu estou a criar várias páginas para depois interligá-las todas entre si, e não só sobre os layouts mas um pouco de tudo sobre o CSS dicas e bugs. Espero terminar rápido.
Estou a criar uma layout que há-de ser elástico se tudo correr bem.
Uma pergunta que usa as resoluções muito altas o texto tem tendecia a ficar pequeno e por sua vez defenido com um tamanho maior?

dextro

20 de Outubro de 2006, 20:43

Por acaso já apliquei ao layout do meu blog uma largura minima mas a maxima ainda não apliquei visto que tenho apenas um modesto monitor de 1024 :oops:

Mas assim que descobrir uma forma de o testar vou fazer os possiveis para colmatar essa falha.

Quanto ao artigo tenho de mencionar que está muito bom como sempre e que acertaste num ponto critico para todos os webdesigners. Na minha modesta opinião os layouts elasticos são a solução. Outra solução engraçada mas mais complexa de fazer são layouts elasticos que mostram mais informação quanto maior for a janela.

Por exemplo: um blog que até 1024×768 mostra duas colunas (uma com menu e outra com o texto do blog) mas quando se atinge esse valor passa a mostrar uma terceira coluna com informação interessante mas não tão relevante como links interessantes, ultimos comentarios, etc…

Acho no entanto que esta ultima “funcionalidade” se poderia tornar injusta… Não estou a ver bem como se sairia se analizassemos a acessibilidade da mesma…

Mario

21 de Outubro de 2006, 14:14

E porque não ajustar o tamanho do texto para aumentar com a largura da página mantendo a proporção constante?

Há sempre a opção de utilizar diferentes folhas de estilo para ser o utilizador a decidir o tamanho que mais se adequa.

Eugenio Grigolon

26 de Outubro de 2006, 12:33

Prefiro layouts fixos, como você mesmo disse, fica melhor para posicionar elementos e trabalhar com eles.

Ótimo post. E gostei muito do layout novo!

Leonardo Procópio

30 de Outubro de 2006, 12:32

Muito legal cara!!!
tiro onda!

Nuno

2 de Novembro de 2006, 23:11

Layout fixo é preferível já que sabemos que não muitas pessoas que tenham monitores acima de 1280×1024.

De qualquer forma o método das percentagens também é boa opção. É capaz de ser a que sacrifica menos pontos da lista.

thiago luiz

12 de Novembro de 2006, 02:32

eu sou do brasil, e sempre acesso o seu site, você tem um conhecimento muito desejavel sobre os padroões w3.org..
Abraços e até mais :)

Tiago

9 de Junho de 2007, 04:05

Sou um principiante e gostaria de saber se é possivel ter todos os posts numa unica pagina, isto é, sem ser preciso ir a “postagens antigas” para ver os posts mais antigos.

Será aumentando o tamanho em Html?

Obrigado

Ivo Gomes

10 de Junho de 2007, 12:33

Olá Tiago. Tudo é possível, mas se tiveres por exemplo 500 posts, torna-se demasiado moroso o carregamento da página toda. Isso não depende do HTML, mas sim da forma como o blog está programado para mostrar os conteúdos.

klub24

12 de Junho de 2007, 01:27

Boas,

Bem 1º que tudo quero agradecer as dicas oferecidas ao pexoal.
Sou MCSA, mas 1 newbie a fazer blogs.

No entanto, é com a ajuda do Ivo e de outros que consegui ficar em 1º lugar no ranking do google, em: assistencia gratis.

Tkxs 1 vez mais, continua …

abraços,

Eliel Cezar

24 de Agosto de 2007, 22:24

Gostei do artigo. Eu normalmente trabalho com layout fixo, mas é muito mais por comodidade… tenho procurado ler e estudar um pouco mais para, em breve, produzir um site elástico e compatível com diversos browsers.

Fernando Aoki

22 de Abril de 2008, 15:19

pequena observação para conhecimento geral futuro:
a palavra “fluido” quando é substantivo ou adjetivo NÃO RECEBE ACENTO AGUDO.
Quem recebe o acento agudo é o famigerado particípio passado do verbo “fluir”, o verdadeiro “fluído”.
Desde que aprendi isso há cerca de quatro anos, NUNCA consegui articular uma frase usando esta palavra que não parecesse “forçação de barra”:
Ex.: >>Quando a equipe de reparos chegou, o óleo já tinha fluído pela rede de esgoto.<<

Dextro

22 de Abril de 2008, 16:02

Perdoem-me por isto mas pensava seriamente que se escrevia equipa e não equipe…