Web design responsivo

  • View
    1.765

  • Download
    1

Embed Size (px)

Text of Web design responsivo

  • 1. Web design responsivo Dyego Costa dyego.costa@lambda3.com.br @dyegoScostaVictor Cavalcante vcavalcante@lambda3.com.br @vcavalcante

2. @dyegoScosta@vcavalcante 3. Uma empresa democrtica Sem gerentes ou estrutura hierrquica Livros abertos Decises por consenso 100% gilhttp://bit.ly/lambda3democracia 4. Nmeroshttp://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011 5. Nmeros 6. Por que no usar o m ponto? URLsSharingSEOPerformance 7. BUSTED! 8. Ingredientes Layout fluido Imagens flexveis Media queries 9. Nosso paciente http://dyegocosta.com 10. LAYOUT FLUIDO 11. Layout fixo .pagina { width: 960px; margin: 0 auto; } 12. Frmula mgicaTarget / Context = Result 13. Layout fixo 14. Layout fluido 15. IMAGENS FLEXVEIS 16. IMAGENS FLEXIVEIS img { max-width: 100%; } 17. Cross-browser .img-bonita { width: 100%; } 18. Imagens flexveis 19. MEDIA QUERIES 20. Media types all braille embossed screenprint handheld projection tvspeech tty 21. Media types @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. Planejamentohttp://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning 25. Mudanas so necessrias 26. Mudanas so necessrias 27. Media queries 28. Frameworks Twitter Bootstrap Skeleton Foundation Gumby 29. Dicas Preocupe-se com performance No redimensione imagens com CSS Siga os padres sugeridos pela W3C (web standards) Design responsivo nem sempre a resposta 30. Indicaes 31. Links teishttp://bit.ly/webresp 32. Obrigado! Victor Cavalcante vcavalcante@lambda3.com.br @vcavalcanteDyego Costa dyego.costa@lambda3.com.br @dyegoScosta 33. www.lambda3.com.br