Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 01/09/06

Novo trabalho – Liquid Layout

Layouts líquidos são aqueles que se adaptam ŕ resolução do usuário, ou seja, se “encaixam” na resolução, seja 800×600, 1280×1024 e por aí vai.

A grande vantagem é que layouts líquidos (ou liquid layouts) oferecem um aproveitamento de tela maior e melhor, dando mais flexibilidade tanto na parte visual como no conteúdo do site. Porém sempre devemos estar atentos ŕ medida máxima de largura do site, para não prejudicar a leiturabilidade do mesmo, como já foi discutido em outro artigo por aqui.

O trabalho feito não foi para nenhum cliente. É só um exemplo que fiz para praticar esta “técnica” e poder utilizá-la da melhor forma possível quando for pertinente. Disponível para visualização em Portfolio.

Assuntos: Geral, Portfolio, Web Design
Trackback Feed deste artigo

13 comentários para "Novo trabalho – Liquid Layout"

  1. Mario | 1/09/06 - 10:19 am

    Apesar de os layouts líquidos poderem ser uma boa alternativa nem sempre são uma alternativa viável. Não que seja contra layouts liquidos, mas prefiro outras alternativas.

    Topo
  2. Doufer | 1/09/06 - 10:24 am

    Cadę o trabalho??? Dę uma palinha!

    Abraço!

    Topo
  3. Eugenio Grigolon | 1/09/06 - 11:22 am

    A única coisa que não gosto em liquid layouts é a quantidade de conteúdo. Sites de empresas raramente tem bastante conteúdo para ser colocado. Assim, o site fica com 2 linhas apenas, e isso é muito ruim.

    Topo
  4. Carlos Eduardo de Souza | 1/09/06 - 11:34 am

    Aí é que entra o max-width… Pena que não funciona no IE, aí temos que utilizar hacks :(

    Topo
  5. Jader Rubini | 1/09/06 - 9:27 pm

    Bacana o estudo, cara… muito bom. Parabéns
    Eu também prefiro buscar outras soluçőes a usar um layout líquido, mas quem sabe um dia eu não deixo de preguiça e começo a estudar isso?… rsrs

    PS.: “leiturabilidade” foi foda… hehe.
    Legibilidade, seria o correto. ;P

    Topo
  6. Micox | 4/09/06 - 8:35 am

    Cara, pra larguras iguais ou SUPERIORES a 800px ficou ótimo, só que vc se esqueceu de larguras INFERIORES.
    Se a tela for menor ou mesmo se usuário não deixar o navegador MAXIMIZADO seu layout quebra TOTALMENTE.

    Seria bom então, pra simplicar seu trabalho e não ter que refazer novamente, colocar um min-width lá né? heheh Vc falou do max-width mas esqueceu do min. hehe. Diboas.

    Mas o ideal mesmo seria vc refazer pensando também em navegadores NĂO MAXIMIZADOS e telas menores que 800.

    Aí sim ficaria REALMENTE LIQUID.

    Valeus. Falow véio, bom trabalho aí!!!

    Topo
  7. Maicon Junches | 4/09/06 - 10:32 am

    Poxa, gostei hein! É bem interessante isso =) Abração!

    Topo
  8. Eugenio Grigolon | 4/09/06 - 11:20 am

    Carlos, onde vocę teria o hack para max-width?

    Topo
  9. Carlos Eduardo de Souza | 4/09/06 - 2:40 pm

    Cara, pra larguras iguais ou SUPERIORES a 800px ficou ótimo, só que vc se esqueceu de larguras INFERIORES.
    Se a tela for menor ou mesmo se usuário não deixar o navegador MAXIMIZADO seu layout quebra TOTALMENTE.

    Seria bom então, pra simplicar seu trabalho e não ter que refazer novamente, colocar um min-width lá né? heheh Vc falou do max-width mas esqueceu do min. hehe. Diboas.

    Mas o ideal mesmo seria vc refazer pensando também em navegadores NĂO MAXIMIZADOS e telas menores que 800.

    Aí sim ficaria REALMENTE LIQUID.

    Bom, claro que eu havia percebido que em resoluçőes menores que 800×600 ficava desfigurado, mas, em nenhum site que desenvolvi houve visitas de usuários com resoluçőes menores.
    Agora, se o motivo for devido ŕ dispositivos diferentes, então que seja desenvolvido um CSS voltado ŕ um media-type diferente =)
    Então ainda o considero um layout líquido, pois em resoluçőes maiores ocupa um espaço maior, garantindo melhor aproveitamento da tela.

    O hack para o IE é o seguinte:

    width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");

    É só inserir este código em seu CSS.

    Neste caso, a largura máxima seria de 1000px. Se desejar fazer uma altura máxima, é só trocar o “Width” por Height.

    Obrigado pelos conselhos e sugestőes!

    Topo
  10. Eugenio Grigolon | 5/09/06 - 9:50 am

    Onde existe uma referęncia sobre hacks IE ?

    Topo
  11. Micox | 5/09/06 - 10:17 pm

    Não estou dizendo com relação a resoluçőes de tela inferiores (que existem apesar de tudo) estou dizendo também com relação a LARGURA DO NAVEGADOR. Tem pessoas que não gostam de usar o navegador maximizado.
    Se podemos fazer pra funcionar bem em todos, por que fazer bem pra funcionar só em alguns? hehe, eis a questão.

    Topo
  12. Carlos Eduardo de Souza | 5/09/06 - 11:06 pm

    Concordo com vocę.
    Não havia pensado por esse lado, então, falha minha :)

    É por isso que estudamos e compartilhamos com a comunidade, a fim de receber críticas que nos acrescentam, assim como a sua!

    Topo
  13. xana | 8/02/10 - 6:11 pm

    Ando à procura de textos sobre liquid layout. Toda a gente fala mto nos codigos HTML mas pouco se fala como fica o desenho no flash e isso me intriga. alguém tem alguma noção do tamanho do palco e codigos action script. Obgada e já agora vao ver este site www,tonycarreira.com

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons