O documento discute o layout fluido na era da convergência entre diferentes resoluções de tela. Apresenta os tipos de layout fluido como pseudo-fluido, fluido total, fluido artificial e fluido em blocos. Também discute cuidados com texto e layouts engessados, além de mostrar exemplos práticos de implementação de layout fluido.

1. Layout Fluido com Tableless Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br

2. Indicação Sistemas http://www.google.com/analytics/ Webmail http://gmail.com/ Buscas http://www.google.com.br/

3. Convergência A importancia do layout fluido na era de transição 800x600 // 1024x768 e de convergencia

4. Cuidados Texto muito largo 7 - 11 palavras por linha http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm Layouts onde o design é muito engessado

5. 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

6. Tipos de layout fluido Fluido por resolução http://www.themaninblue.com/experiment/ResolutionLayout/

7. Praticando

8. Setup Demonstração do ECOTRIP Preparação Arquivos SSI > DW Templates Preview in browser – FF Analise do HTML e CSS

9. 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 COLUNS http://www.alistapart.com/articles/fauxcolumns/ Fluido total na home?

10. 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

11. Conclusões delicious.com/hugodiasneto/sdd

12. Layout Fluido com Tableless Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br Dúvidas?