Layout: fixo, lÃquido/fluÃdo ou elástico?
Quinta-feira, 19 de Outubro de 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.
Ivo Gomes tem 29 anos e é licenciado em
Rui Moura
19 Outubro, 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 Outubro, 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 Outubro, 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 Outubro, 2006, 14:42
Parabéns pelo post.
Gaspar
20 Outubro, 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 Outubro, 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
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 Outubro, 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 Outubro, 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 Outubro, 2006, 12:32
Muito legal cara!!!
tiro onda!
Nuno
2 Novembro, 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 Novembro, 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 Junho, 2007, 04:05
Oi
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 Junho, 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 Junho, 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 Agosto, 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 Abril, 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 Abril, 2008, 16:02
Perdoem-me por isto mas pensava seriamente que se escrevia equipa e não equipe…
Lu
6 Maio, 2008, 10:42
Perdoem-me por isto mas pensava seriamente que se escrevia equipa e não equipe…
No Brasil se escreve equipe