1. BE
WATER
MY
FRIEND
LAYOUT
FLUIDO
COM
COLUMNAL

2. VENDAS 2º TRIMESTRE 2012
NOTEBOOKS ~50M
TABLETS ~25M
SMARTPHONES ~154M
http://bit.ly/V2kOXR http://tcrn.ch/N2pRxL http://bit.ly/bQEDvk

3. 480×272 PSP
480×320 iPhone 3
800×240 Nintendo 3DS
960×640 iPhone 4S
1136×640 iPhone 5
1280×800 MacBook Pro
2048×1536 iPad

4. @media (max-width: 800px) {
body {
background: #ccc;
}
}

5. MOBILE FIRST

6. GRID
ORGANIZAÇÃ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 da
HARMONIA
é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 de
PREVISIBILIDADE 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. LAYOUT FLUIDO
CSSGRID.NET

8. GRID
960.GS

9. COLUMNAL É
OPEN SOURCE
http://bit.ly/14lDbrH

10. CARACTERÍSTICAS DO COLUMNAL
DEBUGGER
SUB COLUNAS
PREFIXO E SUFIXO
ESPAÇAMENTO VERTICAL
SISTEMA GRID PARA RASCUNHO
TEMPLATES PARA WIREFRAME
COMPATÍVEL COM O IE

11. MÃO NA
MASSA!

13. SE VOCÊ PUSER O LAYOUT EM UM SMARTPHONE
ELE SE TORNA O SMARTPHONE
SE VOCÊ PUSER O LAYOUT EM UM TABLET
ELE SE TORNA O TABLET
SE VOCÊ PUSER O LAYOUT EM UM NOTEBOOK
ELE SE TORNA O NOTEBOOK

14. BE WATER
MY FRIEND

15. OBRIGADO!