Be Water My Friend - Layout Fluido com Columnal

493 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
493
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Be Water My Friend - Layout Fluido com Columnal

  1. 1. BEWATERMYFRIENDLAYOUTFLUIDOCOMCOLUMNAL
  2. 2. VENDAS 2º TRIMESTRE 2012NOTEBOOKS ~50MTABLETS ~25MSMARTPHONES ~154Mhttp://bit.ly/V2kOXR http://tcrn.ch/N2pRxL http://bit.ly/bQEDvk
  3. 3. 480×272 PSP480×320 iPhone 3800×240 Nintendo 3DS960×640 iPhone 4S1136×640 iPhone 51280×800 MacBook Pro2048×1536 iPad
  4. 4. @media (max-width: 800px) { body { background: #ccc; }}
  5. 5. MOBILE FIRST
  6. 6. GRIDORGANIZAÇÃO Antes mesmo da invenção da impressão, já se utilizavam sistemas de grid ainda nos tempos medievais, chamado Villiards Diagram.CONTINUIDADE Na segunda guerra mundial a técnica teve a sua ascenção por conta dos designers gráficos daHARMONIA época. Nos anos 80 houve um movimento contra o uso da técnica por ser muito associada ao meio corporativo e na busca por formas mais orgânicas dePREVISIBILIDADE estruturar o conteúdo.MANUTENIBILIDADE Atualmente os grids são bastante utilizados pelos web designers, sendo adotado como um padrão na área.COLABORATIVIDADE http://bit.ly/roJwb2 http://bit.ly/Vz4f
  7. 7. LAYOUT FLUIDOCSSGRID.NET
  8. 8. GRID960.GS
  9. 9. COLUMNAL ÉOPEN SOURCEhttp://bit.ly/14lDbrH
  10. 10. CARACTERÍSTICAS DO COLUMNALDEBUGGERSUB COLUNASPREFIXO E SUFIXOESPAÇAMENTO VERTICALSISTEMA GRID PARA RASCUNHOTEMPLATES PARA WIREFRAMECOMPATÍVEL COM O IE
  11. 11. MÃO NAMASSA!
  12. 12. SE VOCÊ PUSER O LAYOUT EM UM SMARTPHONEELE SE TORNA O SMARTPHONESE VOCÊ PUSER O LAYOUT EM UM TABLETELE SE TORNA O TABLETSE VOCÊ PUSER O LAYOUT EM UM NOTEBOOKELE SE TORNA O NOTEBOOK
  13. 13. BE WATERMY FRIEND
  14. 14. OBRIGADO!

×