Responsive Web Design

Responsive Web Design

Apresentação realizada no 2º encontro Frontend Bahia (https://www.facebook.com/events/481352118626380/).
Original em: http://goo.gl/9wrpl5

414738201197c2a837b986748c80e16e?s=128

Ricardo Torres

June 08, 2013
Tweet

Transcript

  1. RESPONSIVE WEB DESIGN RICARDO TORRES

  2. QUEM? @RICARDOTORRES0 /RICARDO.RICTORRES RICARDO@AGENCIAGIRA.COM.BR

  3. None
  4. None
  5. ANOS 90...

  6. 640 x 480

  7. 2000...

  8. None
  9. http://alistapart.com/article/fluidgrids

  10. RESPONSIVE WEB DESIGN?

  11. None
  12. None
  13. MUITO ALÉM DAS MEDIA-QUERIES

  14. NÃO ESCONDA CONTEÚDO

  15. POR QUÊ?

  16. None
  17. None
  18. None
  19. None
  20. EXEMPLOS

  21. None
  22. AH! MAS ESSE É PEIXE PEQUENO... :(

  23. None
  24. None
  25. None
  26. None
  27. http://mediaqueri.es

  28. MAS LEMBRE-SE...

  29. NÃO ESCONDA CONTEÚDO

  30. VAMOS AO QUE INTERESSA!

  31. COMO DESENHAR?

  32. None
  33. USE AS FERRAMENTAS QUE MAIS LHE AGRADAM!

  34. ACESSIBILIDADE USABILIDADE

  35. None
  36. None
  37. PADRÕES DE NAVEGAÇÃO NAVIGATION PATTERNS

  38. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

  39. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

  40. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

  41. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

  42. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

  43. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

  44. VALE LEMBRAR QUE...

  45. None
  46. POR ONDE COMEÇAR?

  47. UM PASSO DE CADA VEZ!

  48. MODULAÇÃO

  49. http://goo.gl/SOswo GRIDS

  50. HTML

  51. VIEWPORT

  52. MEDIA QUERIES (BREAKPOINTS) http://alistapart.com/article/designing-for-breakpoints

  53. None
  54. None
  55. GRIDS

  56. TEXTO

  57. DEVICE ORIENTATION

  58. DEVICE ORIENTATION

  59. DEVICE ORIENTATION

  60. RESPONSIVE IMAGES*

  61. RETINA IMAGES (HDPI)

  62. None
  63. CASE

  64. CASE

  65. LER MENOS E FAZER MAIS!

  66. COM OU SEM FRAMEWORK?

  67. None
  68. http://responsive.vermilion.com/compare.php

  69. NÃO PODEMOS EXAGERAR!

  70. E FAZ O QUÊ COM O CONTEÚDO?

  71. MOBILE FIRST

  72. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

  73. RESPONSIVE IMAGES

  74. None
  75. PROPOSTAS

  76. http://usecases.responsiveimages.org ART DIRECTION

  77. http://usecases.responsiveimages.org ART DIRECTION

  78. None
  79. None
  80. None
  81. PERFORMANCE

  82. Devtools

  83. http://coding.smashingmagazine. com/2013/01/15/off-canvas-navigation-for- jQuery Animation

  84. http://coding.smashingmagazine. com/2013/01/15/off-canvas-navigation-for- CSS Transitions

  85. None
  86. None
  87. None
  88. TRUQUES...

  89. GENERATED CONTENT

  90. COMO DETECTAR?

  91. None
  92. https://github.com/ftlabs/fastclick

  93. COMO TESTAR?

  94. None
  95. MESMO QUE VOCÊ TENHA TODO O CUIDADO DO MUNDO

  96. None
  97. https://gist.github.com/rictorres/3521351

  98. https://gist.github.com/rictorres/5734585

  99. http://goo.gl/7F4py

  100. None
  101. • OPERA MOBILE EMULATOR • XCODE IOS SIMULATOR • ANDROID

    SIMULATOR • MOBILEXWEB.COM/EMULATORS EMULADORES/SIMULADORES
  102. POLYFILLS?

  103. O QUE NÃO FAZER

  104. None
  105. None
  106. None
  107. None
  108. https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it

  109. http://moz.com/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers

  110. OBRIGADO! ;) rictorres.com