Your SlideShare is downloading. ×
0
Web design responsivo
Dyego Costa
dyego.costa@lambda3.com.br
@dyegoScosta

Victor Cavalcante
vcavalcante@lambda3.com.br
@v...
@dyegoScosta

@vcavalcante
Uma empresa democrática
•
•
•
•

Sem gerentes ou estrutura hierárquica
Livros abertos
Decisões por consenso
100% ágil

htt...
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 fluido
IMAGENS FLEXÍVEIS
IMAGENS FLEXIVEIS
img {
max-width: 100%;
}
Cross-browser 
.img-bonita {
width: 100%;
}
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<!...
Imagens flexíveis
MEDIA QUERIES
Media types
all braille
embossed screen

print handheld
projection tv

speech tty
Media types
<link rel="stylesheet" type="text/css“ media=“screen” href=“site.css" />
<link rel="stylesheet" type="text/css...
Media queries
@media screen and (min-width: 1024px) {
* { font-family: Segoe UI Light; }
}
@import url(“wide.css”) screen ...
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 queries
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...
Indicações
Links úteis

http://bit.ly/webresp
Obrigado!
Victor Cavalcante
vcavalcante@lambda3.com.br
@vcavalcante

Dyego Costa
dyego.costa@lambda3.com.br
@dyegoScosta
www.lambda3.com.br
Web design responsivo
Web design responsivo
Web design responsivo
Web design responsivo
Web design responsivo
Upcoming SlideShare
Loading in...5
×

Web design responsivo

1,774

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,774
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web design responsivo"

  1. 1. Web design responsivo Dyego Costa dyego.costa@lambda3.com.br @dyegoScosta Victor Cavalcante vcavalcante@lambda3.com.br @vcavalcante
  2. 2. @dyegoScosta @vcavalcante
  3. 3. Uma empresa democrática • • • • Sem gerentes ou estrutura hierárquica Livros abertos Decisões por consenso 100% ágil http://bit.ly/lambda3democracia
  4. 4. Números http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
  5. 5. Números
  6. 6. Por que não usar o “m ponto”?  URLs  Sharing  SEO  Performance
  7. 7. BUSTED!
  8. 8. Ingredientes Layout fluido Imagens flexíveis Media queries
  9. 9. Nosso paciente http://dyegocosta.com
  10. 10. LAYOUT FLUIDO
  11. 11. Layout fixo .pagina { width: 960px; margin: 0 auto; }
  12. 12. Fórmula mágica Target / Context = Result
  13. 13. Layout fixo
  14. 14. Layout fluido
  15. 15. IMAGENS FLEXÍVEIS
  16. 16. IMAGENS FLEXIVEIS img { max-width: 100%; }
  17. 17. Cross-browser  .img-bonita { width: 100%; } <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->
  18. 18. Imagens flexíveis
  19. 19. MEDIA QUERIES
  20. 20. Media types all braille embossed screen print handheld projection tv speech tty
  21. 21. 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; } }
  22. 22. Media queries @media screen and (min-width: 1024px) { * { font-family: Segoe UI Light; } } @import url(“wide.css”) screen and (min-width: 1024px);
  23. 23. Planejamento
  24. 24. Planejamento http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
  25. 25. Mudanças são necessárias
  26. 26. Mudanças são necessárias
  27. 27. Media queries
  28. 28. Frameworks • • • • Twitter Bootstrap Skeleton Foundation Gumby
  29. 29. 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
  30. 30. Indicações
  31. 31. Links úteis http://bit.ly/webresp
  32. 32. Obrigado! Victor Cavalcante vcavalcante@lambda3.com.br @vcavalcante Dyego Costa dyego.costa@lambda3.com.br @dyegoScosta
  33. 33. www.lambda3.com.br
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×