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.
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.
Doufer | 1/09/06 - 10:24 am
Cadę o trabalho??? Dę uma palinha!
Abraço!
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.
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
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
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í!!!
Maicon Junches | 4/09/06 - 10:32 am
Poxa, gostei hein! É bem interessante isso =) Abração!
Eugenio Grigolon | 4/09/06 - 11:20 am
Carlos, onde vocę teria o hack para max-width?
Carlos Eduardo de Souza | 4/09/06 - 2:40 pm
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:
É 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!
Eugenio Grigolon | 5/09/06 - 9:50 am
Onde existe uma referęncia sobre hacks IE ?
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.
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!
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