Responsive web design

1.972 visualizações

Publicada em

Publicada em: Tecnologia

Responsive web design

  1. 1. ProfessorAdriano Teixeira de Souza
  2. 2.  Adriano Teixeira de Souza  Fasul: Professor nas disciplinas de Estrutura de Dados, Paradigmas de Linguagens de Programação, Sistemas Distribuídos  C.Vale: Analista de sistemas sênior e líder técnico de desenvolvimento de sistemas em ambiente web e desktop
  3. 3. 1280 x 800 Photo: Steve Rhodes
  4. 4. 16 : 9 Photo: Steve Rhodes
  5. 5. Netbook tela de 8.9” Photo: Steve Rhodes
  6. 6. Várias telas
  7. 7. Mais é melhor 5120 x 1600
  8. 8. 2006 Smart Phones Flickr: photographer
  9. 9. 9 de Janeiro de 2007 Flickr: photographer
  10. 10. 2008 Smart Phones Flickr: photographer
  11. 11. 2009 Smart Phones Flickr: photographer
  12. 12. Android, BlackBerryFlickr: photographer
  13. 13. 2010 iPad – Vendas de 3 milhões de dispositivos em 80 diasFlickr: photographer
  14. 14. iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”Flickr: photographer
  15. 15. Muitas telasFlickr: photographer
  16. 16. A web deve ser acessível por qualquer pessoa em qualquer lugar.
  17. 17.  1 em 5 usuários acessam a internet de dispositivos móveis todo os dias O tráfego de dados móveis quase triplicou em 2010. Mantendo a tendências dos últimos 3 anos. Acesso a internet por dispositivos móveis deve ultrapassar a de desktops entre 3 a 5 anos. Vídeo-games e televisões atuais estão vindo com acesso a internet.
  18. 18.  Design Web Responsivo  Trabalhar com um layout que se adapta as diferentes telas onde será apresentado  A mesma página web poderia ser apresentada de forma diferente em diversos dispositivos
  19. 19. “Uma grid flexível, com imagens flexíveis e que incorpore media queries para criar um layout adaptável e responsivo” Ethan Marcotte (@beep) http://www.alistapart.com/articles/responsive-web-design/
  20. 20. Mobile design
  21. 21.  Grid Flexível Imagens Flexíveis Media Queries
  22. 22.  Grid flexível  Definindo tamanho em proporção ▪ % em vez de px, cria o fluid layout ▪ imagens também podem utilizar esta técnica CSS3 Media Queries  Estilo condicional  Permite a você definir apresentações para específicos tamanhos de tela, dispositivos e mais Jeffrey Zeldman: “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.”
  23. 23.  Utilize Eric Meyer CSS Reset Divida o site em módulos, ou partes, de forma que possam ser movidas e redimensionadas conforme a necessidade Utilize em’s e % para dimensionar tamanhos e larguras Elemento / contexto = resultado Não arredonde casas decimais
  24. 24.  Esta regra diz para a imagem não exceder a largura do container. Overflow: hidden também funciona.
  25. 25.  Use Javascript para carregar imagens no tamanho apropriado  https://github.com/filamentgroup/responsive- images Problemas de redimensionamento  http://unstoppablerobotninja.com/entry/fluid- images
  26. 26.  min-width: referência as dimensões do viewport (área que o web site aparece) min-device-width referencia as dimensões de tela do dispositivos (talvez a forma mais segura para identificar dispositivos, iPad, iPhone, etc.) É possível selecionar baseado em dpi não somente width É possível selecionar baseado em profundidade de cores
  27. 27. O que nós podemos testar width • color height • color-index device-width • monochrome device-height • resolution orientation • scan aspect-ratio • grid device-aspect-ratio http://www.w3.org/TR/css3-mediaqueries/
  28. 28.  Antes de iniciar com smartfones, precisamos adicionar isto na seção head do nosso HTML. A propriedade Initial-scale configura o nível de zoom para 1.0 ou 100%, então o browsers viewport sabe que irá mostrar um website igual a largura da tela do dispositivo e não no seu layout padrão.
  29. 29.  Consolidação Web browsers são mais compatíveis com padrões de mercado  Google Chrome: Webkit  Safari: Webkit  Firefox: Gecko  IE8 é muito bom em relação aos anteriores
  30. 30.  Opera 9.5+ Firefox 3.5+ Safari 3 Chrome Mobile Webkit Opera Mobile
  31. 31. code.google.com/p/css3-mediaqueries-js/ IE8 e anteriores Firefox 1 & 2 Safari 2
  32. 32.  Android: Chrome: Webkit iOS: Safari: Webkit Blackberry: Webkit (últimas versões)
  33. 33.  Faixa de dispositivos que o conteúdo será visto Como o layout será apresentado de forma eficiente em diferentes plataformas O tamanho padrão de imagens não deve estar baseado no layout alvo padrão (você pode ter algumas imagens diferentes para dispositivos diferentes). Tenha um plano para uma diversidade de largura de telas

×