Existem três tipos de layouts (até agora) no mundo do CSS:

• Layouts Fixos, o sólido.
• Layouts Elásticos, o líquido.
• Layouts Líquidos, o gasoso.

“Hã? Você bebeu? Líquido não é líquido? Gás elástico?”

Calma, as palavras sólido, líquido e gasoso são só pra comparar os três tipos de layout baseados nas propriedades da matéria.

Na natureza as coisas sólidas não se adaptam a forma do ambiente, as coisas líquidas se adaptam mas não se expandem e as coisas gasosas se adaptam e se expandem. No CSS é muito parecido.

Layouts Fixos, os enrustidos

Os layouts fixos são aqueles que sempre tem a mesma largura, nunca mudam mesmo que você mude o tamanho da janela, aumente ou diminua as fontes do navegador, grite ou faça manha. São durões igual vidro, e tão quebráveis quanto. Você aumenta um pouco a fonte e tudo já fica distorcido. Sólidos? só no conceito, na verdade são os mais molengas.

Layouts Elásticos, os moderados.

Esses são aqueles que parecem fixos, mas quando você meche neles eles se adaptam. Basta mudar a fonte do navegador e ele fica mais largo. São baseados em proporcionalidade, quanto maior a fonte, mais largo.

Elásticos são o modelo ideal porque teoricamente, quanto maior a tela do usuário, mais ele vai querer aumentar a fonte.

O melhor exemplo é o layout do SimpleBits, praticamente à prova de balas.

Layouts Líquidos, os exagerados.

Os líquidos mudam com a largura da tela. Se o usuário tem aquele super monitor de 96 polegadas wide screen, ele vai ter que correr de um lado pro outro pra ler e adquirir torcicolo.

Eles ainda não são um perigo real, mas tem potencial. As telas hoje não andam tão grandes, mas a tendência é crescer e uma hora os defeitos dos líquidos vão começar a aparecer.

Além disso, você tem que tomar cuidado com a altura dos layouts líquidos. No final, elementos com posicionamento absoluto e flutuantes podem sofrer consequências de dimensões muito baixas na altura das linhas que esticam demais.

Bizarrices

Só tenho um exemplo de um wide-layout. Ele não rola verticalmente e sim horizontalmente. Arriscado e genial, caiu como uma luva no blog aí do link, por ser compatível com o tema.

Qual devo escolher?

Não vou dizer que cada um tem sua vantagem, não tem. Os elásticos são sempre os melhores.

Alguns portais exagerados de hoje em dia, podem necessitar do líquido pra não expremer o conteúdo. Nesse caso você pode colocar um botão pra alternar de líquido pra elástico. Aqui tem um exemplo meu.

Uma boa alternativa hoje em dia são os líquidos com bordas proporcionais. Eles esticam, mas não chegam nos limites da tela. O Acorda pra Web! é assim.

Você já tinha parado pra pensar nisso?

Esse post foi adicionado em 4/4/2007 at 11:15 pm e está registrado em Uncategorized. Você pode acompanhar os comentários desse post através do feed RSS 2.0. Você pode deixar uma resposta, ou adicionar um trackback do seu próprio site.