Responsive Web Design @ Semcomp 2013

Apresentação realizada na Semcomp 2013 em Salvador, Bahia. (http://semcomp.com.br)

Versão original com gifs animados: http://goo.gl/DKOOvI

O que você precisa saber para começar a desenvolver seu site/app de forma responsiva. Como definir breakpoints? Desenhar no Photoshop ou no navegador? Devo usar framework? Qual? Como mensurar e melhorar a performance? Progressive enhancement e/ou graceful degradation? Todas essas perguntas são respondidas nessa apresentação!

Transcript

1. RESPONSIVE WEB DESIGN RICARDO TORRES
2. QUEM? twitter.com/ricardotorres0 fb.com/ricardo.rictorres ricardo@agenciagira.com.br github.com/rictorres
5. O QUE É?
6. http://alistapart.com/article/"uidgrids
8. http://alistapart.com/article/responsive-web-design
9. POR QUÊ?
11. http://goo.gl/8aJytI
12. http://bradfrostweb.com/
14. EXEMPLOS
16. AH! MAS ESSE É PEIXE PEQUENO... :(
21. QUANDO?
22. CONSIDERAÇÕES •  Tempo e Dinheiro •  Browser support •  Performance •  Conteúdo •  Mobile Website?
23. VAMOS AO QUE INTERESSA!
24. COMO DESENHAR?
26. USE AS FERRAMENTAS QUE MAIS LHE AGRADAM!
28. ACESSIBILIDADE USABILIDADE
29. PADRÕES DE NAVEGAÇÃO NAVIGATION PATTERNS
30. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
31. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
32. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
33. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
36. POR ONDE COMEÇAR?
37. UM PASSO DE CADA VEZ!
38. http://goo.gl/SOswo GRIDS
39. MOBILE FIRST
40. http://bradfrostweb.com/blog/web/mobile-#rst-responsive-web-design/
41. MEDIA QUERIES (BREAKPOINTS) http://alistapart.com/article/designing-for-breakpoints
43. DEVICE ORIENTATION
44. DEVICE ORIENTATION
45. NÃO ESCONDA CONTEÚDO
46. COM OU SEM FRAMEWORK?
48. NÃO PODEMOS EXAGERAR!
49. http://responsive.vermilion.com/compare.php
50. RESPONSIVE IMAGES
51. RESPONSIVE IMAGES*
53. RETINA IMAGES (HDPI)
54. http://usecases.responsiveimages.org ART DIRECTION
56. PERFORMANCE
58. Devtools
59. 3 LIMITES IMPORTANTES •  0,1 segundo •  1 segundo •  10 segundos http://goo.gl/AOTXu
60. https://github.com/ftlabs/fastclick
61. COMO DETECTAR?
62. MESMO QUE VOCÊ TENHA TODO O CUIDADO DO MUNDO
64. COMO TESTAR?
66. http://goo.gl/7F4py
67. https://gist.github.com/rictorres/3521351
68. https://gist.github.com/rictorres/5734585
69. REFERÊNCIAS
70. http://mediaqueri.es
71. http://bradfrost.github.io/this-is-responsive/
73. OBRIGADO! ;) rictorres.com