Responsive Web Design

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

Transcript

1. RESPONSIVE WEB DESIGN RICARDO TORRES
2. QUEM? @RICARDOTORRES0 /RICARDO.RICTORRES RICARDO@AGENCIAGIRA.COM.BR
5. ANOS 90...
6. 640 x 480
7. 2000...
9. http://alistapart.com/article/fluidgrids
10. RESPONSIVE WEB DESIGN?
13. MUITO ALÉM DAS MEDIA-QUERIES
14. NÃO ESCONDA CONTEÚDO
15. POR QUÊ?
20. EXEMPLOS
22. AH! MAS ESSE É PEIXE PEQUENO... :(
27. http://mediaqueri.es
28. MAS LEMBRE-SE...
29. NÃO ESCONDA CONTEÚDO
30. VAMOS AO QUE INTERESSA!
31. COMO DESENHAR?
33. USE AS FERRAMENTAS QUE MAIS LHE AGRADAM!
34. ACESSIBILIDADE USABILIDADE
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...
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
55. GRIDS
56. TEXTO
57. DEVICE ORIENTATION
58. DEVICE ORIENTATION
59. DEVICE ORIENTATION
60. RESPONSIVE IMAGES*
61. RETINA IMAGES (HDPI)
63. CASE
64. CASE
65. LER MENOS E FAZER MAIS!
66. COM OU SEM FRAMEWORK?
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
75. PROPOSTAS
76. http://usecases.responsiveimages.org ART DIRECTION
77. http://usecases.responsiveimages.org ART DIRECTION
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
88. TRUQUES...
89. GENERATED CONTENT
90. COMO DETECTAR?
92. https://github.com/ftlabs/fastclick
93. COMO TESTAR?
95. MESMO QUE VOCÊ TENHA TODO O CUIDADO DO MUNDO
97. https://gist.github.com/rictorres/3521351
98. https://gist.github.com/rictorres/5734585
99. http://goo.gl/7F4py
101. • OPERA MOBILE EMULATOR • XCODE IOS SIMULATOR • ANDROID SIMULATOR • MOBILEXWEB.COM/EMULATORS EMULADORES/SIMULADORES
102. POLYFILLS?
103. O QUE NÃO FAZER
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