Your SlideShare is downloading. ×
Web design responsivo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web design responsivo

1,755
views

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,755
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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