Curso: Web Design Responsivo

  • View
    121

  • Download
    0

Embed Size (px)

Text of Curso: Web Design Responsivo

  1. 1. WEB DESIGN RESPONSIVO
  2. 2. INTRODUO
  3. 3. FERRAMENTAS NECESSRIAS
  4. 4. FERRAMENTAS NECESSRIAS EDITOR DE TEXTO: Brackets; Coda; Dreamweaver; Notepad++; Sublime Text. BROWSER: Chrome; Firefox; Opera; Safari; Internet Explorer 9+; etc
  5. 5. POR QU?
  6. 6. NO PASSADO Tnhamos conexo lenta; No existia acesso Wi-Fi; Sites para dispositivos mveis eram verses simples dos sites originais; Era preciso manter mltiplas verses de um site. http://media.smashingmagazine.com/wp-content/uploads/2013/05/picnic_with_art_direction_mini.jpg
  7. 7. http://icant.co.uk/talks/h5/pictures/posscon/clinton-obama-smartphones.jpg
  8. 8. http://digitalclaritygroup.com/wordpress/wp-content/uploads/2012/12/DCG-Insight-Understanding-the-Mobile-Shift-Nov-2012.pdf
  9. 9. http://www.proxxima.com.br/home/mobile/2013/06/05/Brasileiros-acessando-internet-por-dispositivos-moveis-ultrapassou-via-
  10. 10. WEB DESIGN RESPONSIVO
  11. 11. LAYOUT FIXO
  12. 12. http://www.savewalterwhite.com www.savewalterwhite.com
  13. 13. LAYOUT FLUDO
  14. 14. http://d.alistapart.com/responsive-web-design/ex/ex-site-exible.html
  15. 15. LAYOUT RESPONSIVO
  16. 16. http://www.simonmarxen.dk/portfolio/?p=165 In the Bubble - Simon Marxen Arquitetura responsiva
  17. 17. Ethan Marcotte (2010) Responsive Web Design: um nico site que se adapta a qualquer dispositivo, independente do tamanho da tela e orientao. http://alistapart.com/d/responsive-web-design/
  18. 18. 1. Layout exvel, baseado em grid ! 2. Imagens e mdias exveis ! 3. Media queries (CSS3)
  19. 19. UM WEBSITE, MLTIPLOS LAYOUTS
  20. 20. http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  21. 21. VANTAGENS Layout customizado Adaptao de contedo
  22. 22. VANTAGENS Imagens exveis http://media.smashingmagazine.com/wp-content/uploads/2013/05/picnic_with_art_direction_mini.jpg
  23. 23. VANTAGENS http://media02.hongkiat.com/serving-responsive-images/responsive-img.jpg Velocidade de carregamento
  24. 24. VANTAGENS Otimizao para ferramentas de busca Centralizao de contedo Apenas um cdigo-fonte para dar manuteno
  25. 25. http://thumbnails.visually.netdna-cdn.com/responsive--native-in-the-ux-lifecycle_502919a230df9.png
  26. 26. LAYOUT ADAPTATIVO
  27. 27. Aaron Gustafson (2011) Web Design Adaptativo um outro termo para progressive enhancement: leva em conta vrios nveis de HTML, CSS, JavaScript e tecnologia assistiva http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
  28. 28. MOBILE FIRST
  29. 29. O QUE MOBILE FIRST?
  30. 30. MELHOR EXPERINCIA DO USURIO! MOBILE FIRST Foco no contedo Priorizar o necessrio Usar somente o que for preciso + + =
  31. 31. No esconder contedo... ? MOBILE FIRST
  32. 32. MOBILE FIRST Pense relativo, no esttico ou absoluto; Aprimoramentos CSS/JavaScript; Evite carregar dados desnecessrios; Transies CSS (JavaScript so acelerados por hardware); Sprites CSS/SVG; SIMPLIFIQUE!
  33. 33. UNIDADES RELATIVAS
  34. 34. http://s2.manifo.com/usr/5/536D6/60/manager/pixel/nyan_cat___minecraft_pixel_art_by_soulsylver-d3hy8gz.png Pixel hater...
  35. 35. TIPOGRAFIA E A RELAO px / em
  36. 36. px em 12 .75 16 1 24 1.5 32 2 font-size: 100%;
  37. 37. QUAL O SEGREDO? http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg
  38. 38. alvo contexto = resultado QUAL O SEGREDO? http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg
  39. 39. EXERCCIO 1 - INCIO
  40. 40. TRABALHANDO COM MEDIA QUERIES
  41. 41. VIEWPORT
  42. 42. VIEWPORT width (pixel-width/device-width); height (pixel-height/device-height); initial-scale; minimum-scale; maximum-scale; user-scalable (yes/no). !