Responsive web design, conteúdo em todos os dispositivos

  • View
    92

  • Download
    1

Embed Size (px)

Text of Responsive web design, conteúdo em todos os dispositivos

  1. 1. Responsive Web Design contedo em todos os dispositivos
  2. 2. CSS Javascript HTML
  3. 3. CSS Javascript HTML Linguagem de marcao Folha de estilos Linguagem de programao interpretada
  4. 4. Internetcomo usamos?
  5. 5. Sites que se reajustam conforme o tamanho da tela do aparelho CONCEITO
  6. 6. O problemado css fixo.
  7. 7. #wrapper { margin: 0 auto; text-align: left; width: 1024px; }
  8. 8. Anlise: Funciona bem com algumas telas maiores ou iguais tamanho definido (960px, 1000px) No se importa com mobile No se importa com acessibilidade
  9. 9. m ponto tcnica
  10. 10. www.globo.com m.globo.com VS
  11. 11. Anlise: Funciona bem com algumas telas se tem layout fluido Resolve problema do mobile com verso exclusiva Ruim para tcnicas SEO (Search Engine Optimization) Usurio fica confuso com os dois endereos Redirecionamentos de mobile/desktop e inverso
  12. 12. Responsivos
  13. 13. Anlise: Funciona bem em todos dispositivos Bom para SEO (Search Engine Optimization) Tratamento de imagens caminhando
  14. 14. O que torna possvel design responsivo?
  15. 15. Imagens & Recursos flexveis img { max-width: 100%; } Representa 100% de largura no espao em que esto contidas.
  16. 16. Imagens & Recursos flexveis Peso vs Tamanho 530kb 700px / 894px
  17. 17. Tag viewport
  18. 18. @media queries @media screen and (min-width: 768px) and (max-width: 992px){ ul, p{ line-height: 1.72em; font-size: 1.0em; } }
  19. 19. Developer tools
  20. 20. www.browserstack.com/responsive
  21. 21. Twitter Bootstrap
  22. 22. Suporte Nos diversos tipos de navegadores
  23. 23. Hoje, no precisamos se preocupar tanto com IE porque at minha me sabe o que navegador
  24. 24. www.caniuse.com
  25. 25. possvel dar suporte a navegadores sem suporte?
  26. 26. Porque Nem todos os sites so responsivos hoje?
  27. 27. Estrutura muito grande O custo no vale o esforo Falta de profissionais qualificados Padres ainda inconsistentes
  28. 28. Porque Responsive design to importante?
  29. 29. US$ 10 milhes de pagamentos mobile via Paypal Vendas no Ebay mobile = US$ 2 bilhes Vendas de aparelhos mveis ultrapassam a taxa de natalidade no mundo Aplicativos hbridos (HTML5 + CSS3) Webviews
  30. 30. Boas referncias http://sergiolopes.org/ http://mediaqueri.es http://tableless.com.br/ http://www.maujor.com
  31. 31. Obrigado!diogo@diogomachado.com