Download pptx - Web design responsivo

Transcript
Page 1: Web design responsivo

Web design responsivoDyego Costa

[email protected]@dyegoScosta

Victor [email protected]

@vcavalcante

Page 2: Web design responsivo

@dyegoScosta @vcavalcante

Page 3: Web design responsivo
Page 4: Web design responsivo

http://bit.ly/lambda3democracia

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

Page 5: Web design responsivo
Page 6: Web design responsivo
Page 7: Web design responsivo
Page 9: Web design responsivo

Números

Page 10: Web design responsivo
Page 11: Web design responsivo

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

URLs

Sharing

SEO

Performance

Page 12: Web design responsivo

BUSTED!

Page 13: Web design responsivo

Ingredientes

Layout fluido Imagens flexíveis Media queries

Page 14: Web design responsivo

Nosso paciente

http://dyegocosta.com

Page 15: Web design responsivo

LAYOUT FLUIDO

Page 16: Web design responsivo

Layout fixo

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

Page 17: Web design responsivo

Fórmula mágica

Target / Context = Result

Page 18: Web design responsivo

Layout fixo

Page 19: Web design responsivo

Layout fluidodemo

Page 20: Web design responsivo

IMAGENS FLEXÍVEIS

Page 21: Web design responsivo

IMAGENS FLEXIVEISimg { max-width: 100%;}

Page 22: Web design responsivo

Cross-browser

.img-bonita { width: 100%;}

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

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

Page 23: Web design responsivo

Imagens flexíveisdemo

Page 24: Web design responsivo

MEDIA QUERIES

Page 25: Web design responsivo

Media types

all braille

embossed

handheldprint

projection

screen

speech tty

tv

Page 26: Web design responsivo

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; }}

Page 27: Web design responsivo

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

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

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

Page 28: Web design responsivo

Planejamento

Page 29: Web design responsivo

Planejamento

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

Page 30: Web design responsivo

Mudanças são necessárias

Page 31: Web design responsivo

Mudanças são necessárias

Page 32: Web design responsivo

Media queriesdemo

Page 33: Web design responsivo

Frameworks• Twitter Bootstrap• Skeleton• Foundation• Gumby

Page 34: Web design responsivo

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

Page 35: Web design responsivo

Indicações

Page 36: Web design responsivo

Links úteis

http://bit.ly/webresp

Page 37: Web design responsivo

Obrigado!Victor Cavalcante

[email protected]@vcavalcante

Dyego [email protected]

@dyegoScosta

Page 38: Web design responsivo

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


Recommended