Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Responsivo por uma Web única

4,460 views

Published on

Palestra de Sérgio Lopes no OlhóSEO 2013 - Florianópolis

Published in: Technology

Design Responsivo por uma Web única

  1. 1. DESIGNRESPONSIVOPOR UMAWEB ÚNICA
  2. 2. @sergio_caelumsergiolopes.org
  3. 3. sergiolopes.org10% off:OLHOSEO10
  4. 4. MOBILEBOMBANDO
  5. 5. APP ouWEB?
  6. 6. WEB-FIRST
  7. 7. SITE MOBILE ouDESIGN RESPONSIVO?
  8. 8. www.uol.com.br
  9. 9. SITE MOBILEm.uol.com.br
  10. 10. bostonglobe.com
  11. 11. SITE MOBILE ouDESIGN RESPONSIVO?
  12. 12. SITE MOBILE ouDESIGN RESPONSIVO?MOBILE???
  13. 13. MOBILE
  14. 14. MOBILETELA PEQUENA
  15. 15. MOBILEPORTABILIDADETELA PEQUENA
  16. 16. MOBILE3GPORTABILIDADETELA PEQUENA
  17. 17. MOBILE3G TOUCHPORTABILIDADETELA PEQUENA
  18. 18. NÃO EXISTEMOBILE
  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. 960px470px470px
  25. 25. MEDIDASFLEXÍVEIS
  26. 26. MEDIDASFLEXÍVEIS%,em,rem,vh
  27. 27. 100%49%49%
  28. 28. PROPORÇÕES
  29. 29. NUMA TELADE 320px100%49% 49%
  30. 30. LAYOUTCONDICIONAL
  31. 31. NUMA TELADE 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. CSS3MEDIA QUERIES
  35. 35. .formulario,.endereco {width: 49%;}@media (max-width: 600px) {.formulario,.endereco {width: 100%;}}CSS
  36. 36. DESIGNRESPONSIVOFLEXÍVELADAPTÁVEL
  37. 37. FRAMEWORKS&FERRAMENTAS
  38. 38. CRIAÇÃOPHOTOSHOP?
  39. 39. CRIAÇÃODESIGN IN THE BROWSER
  40. 40. GRIDSBOOTSTRAP,FOUNDATION,ETC
  41. 41. TESTESEMULADORES & APARELHOS
  42. 42. LIBSZEPTO,HAMMER,MICROJS
  43. 43. SITE MOBILE ouDESIGN RESPONSIVO?
  44. 44. DESIGNADAPTATIVORESPONSIVO
  45. 45. DESIGNADAPTATIVORESPONSIVOSEMPRE
  46. 46. SITE MOBILE ouDESIGN RESPONSIVO?
  47. 47. SITE MOBILE ouDESIGN RESPONSIVO?SITE ÚNICO
  48. 48. www.uol.com.br
  49. 49. SITE MOBILEm.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. DESIGNRESPONSIVOPOR UMAWEB ÚNICA
  62. 62. OBRIGADOsergiolopes.org@sergio_caelum
  63. 63. sergiolopes.org10% off:OLHOSEO10

×