Successfully reported this slideshow.
Your SlideShare is downloading. ×

Design Responsivo por uma Web única

Ad

DESIGNRESPONSIVO
POR UMA
WEB ÚNICA

Ad

@sergio_caelum
sergiolopes.org

Ad

sergiolopes.org
10% off:
OLHOSEO10

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 89 Ad
1 of 89 Ad

More Related Content

More from Caelum (20)

Design Responsivo por uma Web única

  1. 1. DESIGNRESPONSIVO POR UMA WEB ÚNICA
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. sergiolopes.org 10% off: OLHOSEO10
  4. 4. MOBILE BOMBANDO
  5. 5. APP ou WEB?
  6. 6. WEB-FIRST
  7. 7. SITE MOBILE ou DESIGN RESPONSIVO?
  8. 8. www.uol.com.br
  9. 9. SITE MOBILE m.uol.com.br
  10. 10. bostonglobe.com
  11. 11. SITE MOBILE ou DESIGN RESPONSIVO?
  12. 12. SITE MOBILE ou DESIGN RESPONSIVO? MOBILE ???
  13. 13. MOBILE
  14. 14. MOBILE TELA PEQUENA
  15. 15. MOBILE PORTABILIDADE TELA PEQUENA
  16. 16. MOBILE 3G PORTABILIDADE TELA PEQUENA
  17. 17. MOBILE 3G TOUCH PORTABILIDADE TELA PEQUENA
  18. 18. NÃO EXISTE MOBILE
  19. 19. terra.com.br
  20. 20. m.terra.com.br
  21. 21. tablet.terra.com.br
  22. 22. DESIGNRESPONSIVO
  23. 23. LAYOUT FLUÍDO
  24. 24. 960px 470px470px
  25. 25. MEDIDAS FLEXÍVEIS
  26. 26. MEDIDAS FLEXÍVEIS %,em,rem,vh
  27. 27. 100% 49%49%
  28. 28. PROPORÇÕES
  29. 29. NUMA TELA DE 320px 100% 49% 49%
  30. 30. LAYOUT CONDICIONAL
  31. 31. NUMA TELA DE 320px
  32. 32. .formulario, .endereco { width: 49%; } @media (max-width: 600px) { .formulario, .endereço { width: 100%; } } CSS
  33. 33. .formulario, .endereco { width: 49%; } @media (max-width: 600px) { .formulario, .endereco { width: 100%; } } CSS
  34. 34. CSS3 MEDIA QUERIES
  35. 35. .formulario, .endereco { width: 49%; } @media (max-width: 600px) { .formulario, .endereco { width: 100%; } } CSS
  36. 36. DESIGNRESPONSIVO FLEXÍVEL ADAPTÁVEL
  37. 37. FRAMEWORKS & FERRAMENTAS
  38. 38. CRIAÇÃO PHOTOSHOP?
  39. 39. CRIAÇÃO DESIGN IN THE BROWSER
  40. 40. GRIDS BOOTSTRAP,FOUNDATION,ETC
  41. 41. TESTES EMULADORES & APARELHOS
  42. 42. LIBS ZEPTO,HAMMER,MICROJS
  43. 43. SITE MOBILE ou DESIGN RESPONSIVO?
  44. 44. DESIGN ADAPTATIVO RESPON SIVO
  45. 45. DESIGN ADAPTATIVO RESPON SIVOSEMPRE
  46. 46. SITE MOBILE ou DESIGN RESPONSIVO?
  47. 47. SITE MOBILE ou DESIGN RESPONSIVO? SITE ÚNICO
  48. 48. www.uol.com.br
  49. 49. SITE MOBILE m.uol.com.br
  50. 50. m.uol.com.br
  51. 51. SEO
  52. 52. ONE WEB
  53. 53. ESTRATÉGIA
  54. 54. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
  55. 55. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
  56. 56. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
  57. 57. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
  58. 58. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
  59. 59. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
  60. 60. MOBILE-FIRST
  61. 61. DESIGNRESPONSIVO POR UMA WEB ÚNICA
  62. 62. OBRIGADO sergiolopes.org @sergio_caelum
  63. 63. sergiolopes.org 10% off: OLHOSEO10

×