Layout Fluido com Tableless

Hugo Diashugodias@meetweb.com.br

Materiais da palestra em www.hugodias.com.br

Indicação

• Sistemas– http://www.google.com/analytics/

• Webmail– http://gmail.com/

• Buscas– http://www.google.com.br/

Convergência

• A importancia do layout fluido na era de transição 800x600 // 1024x768 e de convergencia

Cuidados

• Texto muito largo– 7 - 11 palavras por linha– http://psychology.wichita.edu/surl/usabilitynew

s/42/text_length.htm

• Layouts onde o design é muito engessado

Tipos de layout fluido

• Pseudo-fluido– http://meetweb.com.br/mw2/

agencia_diferenciais.asp

• Fluido total– http://news.google.com/

• Fluido artificial– http://www.bradesco.com.br/ – http://www.terra.com.br/

• Fluido em blocos– http://www.uxmag.com/features/101/

experiencing-and-designing-experience

Tipos de layout fluido

• Fluido por resolução– http://www.themaninblue.com/experiment/

ResolutionLayout/•

Praticando

Setup

• Demonstração do ECOTRIP• Preparação

– Arquivos– SSI > DW Templates– Preview in browser – FF– Analise do HTML e CSS

Praticando

• Definir conceitualmente elementos fixos e elementos fluidos!

• Descontruindo a largura fixa – Retirar largura dos

boxes principais• Galerias fluidas

– Clear > Float• 2 colunas de conteúdo

complementares em Atividades > Rapel– Float nas 2– Clear:both após

• Blocos da homepage– Formação de imagem

• MAX-WIDTH pra evitar blocos muito largos de texto– Problemas com o IE6– Soluções com JS– Menu deve ter largura

maxima declarada

• FAUX COLUNShttp://www.alistapart.com/articles/fauxcolumns/

• Fluido total na home?

Importante

• Exigências– Regra, apesar do IE6 não obedecer...

float só onde tem WIDHT; – Tem que ter float em todos os blocos para

"descer".Ex.: Rodapé que sobe.. :(

• Evitar position:absolute quando estiver usando float

Conclusões

delicious.com/hugodiasneto/sdd

Layout Fluido com Tableless

Hugo Diashugodias@meetweb.com.br

Materiais da palestra em www.hugodias.com.br

Dúvidas?Dúvidas?