Responsive web design, conteúdo em todos os dispositivos

434 visualizações

Publicada em

Visão geral do que vem a ser responsive design.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Responsive web design, conteúdo em todos os dispositivos

  1. 1. Responsive Web Design conteúdo em todos os dispositivos
  2. 2. CSS Javascript HTML
  3. 3. CSS Javascript HTML Linguagem de marcação Folha de estilos Linguagem de programação 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. Análise: ● Funciona bem com algumas telas maiores ou iguais tamanho definido (960px, 1000px) ● Não se importa com mobile ● Não se importa com acessibilidade
  9. 9. “m ponto” técnica
  10. 10. www.globo.com m.globo.com VS
  11. 11. Análise: ● Funciona bem com algumas telas se tem layout fluido ● Resolve problema do mobile com versão exclusiva ● Ruim para técnicas SEO (Search Engine Optimization) ● Usuário fica confuso com os dois endereços ● Redirecionamentos de mobile/desktop e inverso
  12. 12. Responsivos
  13. 13. Análise: ● Funciona bem em todos dispositivos ● Bom para SEO (Search Engine Optimization) ● Tratamento de imagens caminhando
  14. 14. O que torna possível design responsivo?
  15. 15. Imagens & Recursos flexíveis img { max-width: 100%; } Representa 100% de largura no espaço em que estão contidas.
  16. 16. Imagens & Recursos flexíveis Peso vs Tamanho 530kb 700px / 894px
  17. 17. Tag viewport <meta name="viewport" content="width=device-width, initial-scale=1">
  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, não precisamos se preocupar tanto com IE porque até minha mãe sabe o que é navegador
  24. 24. www.caniuse.com
  25. 25. É possível dar suporte a navegadores sem suporte?
  26. 26. Porque Nem todos os sites são responsivos hoje?
  27. 27. Estrutura muito grande O custo não vale o esforço Falta de profissionais qualificados Padrões ainda inconsistentes
  28. 28. Porque Responsive design é tão importante?
  29. 29. US$ 10 milhões de pagamentos mobile via Paypal Vendas no Ebay mobile = US$ 2 bilhões Vendas de aparelhos móveis ultrapassam a taxa de natalidade no mundo Aplicativos híbridos (HTML5 + CSS3) Webviews
  30. 30. Boas referências http://sergiolopes.org/ http://mediaqueri.es http://tableless.com.br/ http://www.maujor.com
  31. 31. Obrigado!diogo@diogomachado.com

×