RESPONSIVE WEB DESIGN
RICARDO TORRES
QUEM?
@RICARDOTORRES0
/RICARDO.RICTORRES
RICARDO@AGENCIAGIRA.COM.BR
ANOS 90...
640 x 480
2000...
http://alistapart.com/article/fluidgrids
RESPONSIVE
WEB
DESIGN?
MUITO ALÉM DAS
MEDIA-QUERIES
NÃO
ESCONDA
CONTEÚDO
POR QUÊ?
EXEMPLOS
AH!
MAS ESSE É PEIXE PEQUENO...
:(
http://mediaqueri.es
MAS
LEMBRE-SE...
NÃO
ESCONDA
CONTEÚDO
VAMOS
AO QUE
INTERESSA!
COMO
DESENHAR?
USE AS
FERRAMENTAS
QUE MAIS LHE
AGRADAM!
ACESSIBILIDADE
USABILIDADE
PADRÕES DE
NAVEGAÇÃO
NAVIGATION PATTERNS
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
VALE
LEMBRAR QUE...
POR ONDE COMEÇAR?
UM PASSO DE CADA VEZ!
MODULAÇÃO
http://goo.gl/SOswo
GRIDS
HTML
VIEWPORT
MEDIA QUERIES
(BREAKPOINTS)
http://alistapart.com/article/designing-for-breakpoints
GRIDS
TEXTO
DEVICE ORIENTATION
DEVICE ORIENTATION
DEVICE ORIENTATION
RESPONSIVE IMAGES*
RETINA IMAGES
(HDPI)
CASE
CASE
LER MENOS
E FAZER MAIS!
COM OU SEM
FRAMEWORK?
http://responsive.vermilion.com/compare.php
NÃO PODEMOS
EXAGERAR!
E FAZ O QUÊ
COM O
CONTEÚDO?
MOBILE
FIRST
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
RESPONSIVE
IMAGES
PROPOSTAS
http://usecases.responsiveimages.org
ART DIRECTION
http://usecases.responsiveimages.org
ART DIRECTION
PERFORMANCE
Devtools
http://coding.smashingmagazine.
com/2013/01/15/off-canvas-navigation-for-
jQuery Animation
http://coding.smashingmagazine.
com/2013/01/15/off-canvas-navigation-for-
CSS Transitions
TRUQUES...
GENERATED CONTENT
COMO DETECTAR?
https://github.com/ftlabs/fastclick
COMO
TESTAR?
MESMO QUE VOCÊ
TENHA TODO O
CUIDADO DO
MUNDO
https://gist.github.com/rictorres/3521351
https://gist.github.com/rictorres/5734585
http://goo.gl/7F4py
● OPERA MOBILE EMULATOR
● XCODE IOS SIMULATOR
● ANDROID SIMULATOR
● MOBILEXWEB.COM/EMULATORS
EMULADORES/SIMULADORES
POLYFILLS?
O QUE
NÃO FAZER
https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it
http://moz.com/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers
OBRIGADO! ;)
rictorres.com
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

502 views
425 views

Published on

Apresentação realizada no 2º Encontro Frontend Bahia. Original em: http://goo.gl/9wrpl5

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
502
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. RESPONSIVE WEB DESIGN RICARDO TORRES
  2. 2. QUEM? @RICARDOTORRES0 /RICARDO.RICTORRES RICARDO@AGENCIAGIRA.COM.BR
  3. 3. ANOS 90...
  4. 4. 640 x 480
  5. 5. 2000...
  6. 6. http://alistapart.com/article/fluidgrids
  7. 7. RESPONSIVE WEB DESIGN?
  8. 8. MUITO ALÉM DAS MEDIA-QUERIES
  9. 9. NÃO ESCONDA CONTEÚDO
  10. 10. POR QUÊ?
  11. 11. EXEMPLOS
  12. 12. AH! MAS ESSE É PEIXE PEQUENO... :(
  13. 13. http://mediaqueri.es
  14. 14. MAS LEMBRE-SE...
  15. 15. NÃO ESCONDA CONTEÚDO
  16. 16. VAMOS AO QUE INTERESSA!
  17. 17. COMO DESENHAR?
  18. 18. USE AS FERRAMENTAS QUE MAIS LHE AGRADAM!
  19. 19. ACESSIBILIDADE USABILIDADE
  20. 20. PADRÕES DE NAVEGAÇÃO NAVIGATION PATTERNS
  21. 21. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  22. 22. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  23. 23. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  24. 24. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  25. 25. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  26. 26. http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  27. 27. VALE LEMBRAR QUE...
  28. 28. POR ONDE COMEÇAR?
  29. 29. UM PASSO DE CADA VEZ!
  30. 30. MODULAÇÃO
  31. 31. http://goo.gl/SOswo GRIDS
  32. 32. HTML
  33. 33. VIEWPORT
  34. 34. MEDIA QUERIES (BREAKPOINTS) http://alistapart.com/article/designing-for-breakpoints
  35. 35. GRIDS
  36. 36. TEXTO
  37. 37. DEVICE ORIENTATION
  38. 38. DEVICE ORIENTATION
  39. 39. DEVICE ORIENTATION
  40. 40. RESPONSIVE IMAGES*
  41. 41. RETINA IMAGES (HDPI)
  42. 42. CASE
  43. 43. CASE
  44. 44. LER MENOS E FAZER MAIS!
  45. 45. COM OU SEM FRAMEWORK?
  46. 46. http://responsive.vermilion.com/compare.php
  47. 47. NÃO PODEMOS EXAGERAR!
  48. 48. E FAZ O QUÊ COM O CONTEÚDO?
  49. 49. MOBILE FIRST
  50. 50. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  51. 51. RESPONSIVE IMAGES
  52. 52. PROPOSTAS
  53. 53. http://usecases.responsiveimages.org ART DIRECTION
  54. 54. http://usecases.responsiveimages.org ART DIRECTION
  55. 55. PERFORMANCE
  56. 56. Devtools
  57. 57. http://coding.smashingmagazine. com/2013/01/15/off-canvas-navigation-for- jQuery Animation
  58. 58. http://coding.smashingmagazine. com/2013/01/15/off-canvas-navigation-for- CSS Transitions
  59. 59. TRUQUES...
  60. 60. GENERATED CONTENT
  61. 61. COMO DETECTAR?
  62. 62. https://github.com/ftlabs/fastclick
  63. 63. COMO TESTAR?
  64. 64. MESMO QUE VOCÊ TENHA TODO O CUIDADO DO MUNDO
  65. 65. https://gist.github.com/rictorres/3521351
  66. 66. https://gist.github.com/rictorres/5734585
  67. 67. http://goo.gl/7F4py
  68. 68. ● OPERA MOBILE EMULATOR ● XCODE IOS SIMULATOR ● ANDROID SIMULATOR ● MOBILEXWEB.COM/EMULATORS EMULADORES/SIMULADORES
  69. 69. POLYFILLS?
  70. 70. O QUE NÃO FAZER
  71. 71. https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it
  72. 72. http://moz.com/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers
  73. 73. OBRIGADO! ;) rictorres.com

×