Responsive Web Design @ Semcomp 2013

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!

414738201197c2a837b986748c80e16e?s=128

Ricardo Torres

October 18, 2013
Tweet

Transcript

  1. RESPONSIVE WEB DESIGN RICARDO TORRES

  2. QUEM? twitter.com/ricardotorres0 fb.com/ricardo.rictorres ricardo@agenciagira.com.br github.com/rictorres

  3. None
  4. None
  5. O QUE É?

  6. http://alistapart.com/article/"uidgrids

  7. None
  8. http://alistapart.com/article/responsive-web-design

  9. POR QUÊ?

  10. None
  11. http://goo.gl/8aJytI

  12. http://bradfrostweb.com/

  13. None
  14. EXEMPLOS

  15. None
  16. AH! MAS ESSE É PEIXE PEQUENO... :(

  17. None
  18. None
  19. None
  20. None
  21. QUANDO?

  22. CONSIDERAÇÕES •  Tempo e Dinheiro •  Browser support •  Performance

    •  Conteúdo •  Mobile Website?
  23. VAMOS AO QUE INTERESSA!

  24. COMO DESENHAR?

  25. None
  26. USE AS FERRAMENTAS QUE MAIS LHE AGRADAM!

  27. None
  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/

  34. None
  35. None
  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

  42. None
  43. DEVICE ORIENTATION

  44. DEVICE ORIENTATION

  45. NÃO ESCONDA CONTEÚDO

  46. COM OU SEM FRAMEWORK?

  47. None
  48. NÃO PODEMOS EXAGERAR!

  49. http://responsive.vermilion.com/compare.php

  50. RESPONSIVE IMAGES

  51. RESPONSIVE IMAGES*

  52. None
  53. RETINA IMAGES (HDPI)

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

  55. None
  56. PERFORMANCE

  57. None
  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

  63. None
  64. COMO TESTAR?

  65. None
  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/

  72. None
  73. OBRIGADO! ;) rictorres.com