responsive

web design

SeePix's Talk #005

(The Gif Edition)

Here's the mini-cherry on top of the regular cherry on top of the sundae of awesomeness that is...

Barney Stinson

Front End Developement

me!

Conceito

Um site para cada tela e/ou

device com o mesmo código.

Adaptive

(multiple fixed layout)

Responsive

(multiple fluid grid layout)

Uma mistura!

Largura fixa para desktops.

Fluid para outros devices.

Aplicação/Soluções

(Parte delas pelo menos!)

Stop Thinking in Pages.
Start Thinking in Sytems.

Jeremy Keith

flexibilidade

use %, em, rem.

target / contexto = resultado

Sass:

    
    section[role="main"]{
        width: percentage ( 300px / 960px ); // 31.25%
    }

Grids

Organização do layout,

ritmo entre os blocos,

ritmo vertical (tipografia agradece!)

etc.

Exemplo:

12 colunas de 85px cada com 20px de gutter = 1240px

Grids são as melhores amigas dos Media Queries...

Frameworks

(Foundation, Bootstrap poupam tempo)

O ideal é criar sua propria solução para um melhor controle. Atualmente na Seepix:

Sass + Compass
Zen Grids
Jade

Media Queries

(workshop)

Best practices

Conteúdo é rei

Mobile First

Design in Browser

Crie de maneira modular (Sass FTW!)

Otimize, otimize, otimize...

Fuçe, todo dia aparecem novidades

Pense tambem...

Tempo e dinheiro
Suporte dos navegadores
(Modernizr/Conditionizr)
Perfs
Content (sim, de novo!)
Website vs Web App

lembre-se que...

There is no silver bullet

(É sim, IE sucks)

Obrigado!

Email - tom@seepix.com.br
Twitter: @pixelefant
Dribbble: /pixelefant

Sim, essa apresentação está feita com CSS & JS!

rwd

By pixelefant