web design responsivo

Web design responsivoDyego Costa

dyego.costa@lambda3.com.br@dyegoScosta

Victor Cavalcantevcavalcante@lambda3.com.br

@vcavalcante

@dyegoScosta @vcavalcante

http://bit.ly/lambda3democracia

Uma empresa democrática• Sem gerentes ou estrutura hierárquica• Livros abertos• Decisões por consenso• 100% ágil

Números

http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011

Números

Por que não usar o “m ponto”?

URLs

Sharing

SEO

Performance

BUSTED!

Ingredientes

Layout fluido Imagens flexíveis Media queries

Nosso paciente

http://dyegocosta.com

LAYOUT FLUIDO

Layout fixo

.pagina { width: 960px; margin: 0 auto;}

Fórmula mágica

Target / Context = Result

Layout fixo

Layout fluidodemo

IMAGENS FLEXÍVEIS

IMAGENS FLEXIVEISimg { max-width: 100%;}

Cross-browser

.img-bonita { width: 100%;}

<!--[if lt IE 7]><link rel="stylesheet" type="text/css"

href="ie6.css" /><![endif]-->

Imagens flexíveisdemo

MEDIA QUERIES

Media types

all braille

embossed

handheldprint

projection

screen

speech tty

tv

Media types

<link rel="stylesheet" type="text/css“ media=“screen” href=“site.css" /><link rel="stylesheet" type="text/css“ media=“print” href=“print.css" />

@media screen { * { font-family: Segoe UI Light; }}

Media queries@media screen and (min-width: 1024px) {

* { font-family: Segoe UI Light; }}

@import url(“wide.css”) screen and (min-width: 1024px);

Planejamento

Planejamento

http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

Mudanças são necessárias

Mudanças são necessárias

Media queriesdemo

Frameworks• Twitter Bootstrap• Skeleton• Foundation• Gumby

Dicas• Preocupe-se com performance• Não redimensione imagens com CSS• Siga os padrões sugeridos pela W3C (web

standards)• Design responsivo nem sempre é a resposta

Indicações

Links úteis

http://bit.ly/webresp

Obrigado!Victor Cavalcante

vcavalcante@lambda3.com.br@vcavalcante

Dyego Costadyego.costa@lambda3.com.br

@dyegoScosta

www.lambda3.com.brwww.lambda3.com.br