DESIGNRESPONSIVOPOR UMAWEB ÚNICA
@sergio_caelumsergiolopes.org
sergiolopes.org10% off:OLHOSEO10
MOBILEBOMBANDO
APP ouWEB?
WEB-FIRST
SITE MOBILE ouDESIGN RESPONSIVO?
www.uol.com.br
SITE MOBILEm.uol.com.br
bostonglobe.com
SITE MOBILE ouDESIGN RESPONSIVO?
SITE MOBILE ouDESIGN RESPONSIVO?MOBILE???
MOBILE
MOBILETELA PEQUENA
MOBILEPORTABILIDADETELA PEQUENA
MOBILE3GPORTABILIDADETELA PEQUENA
MOBILE3G TOUCHPORTABILIDADETELA PEQUENA
NÃO EXISTEMOBILE
terra.com.br
m.terra.com.br
tablet.terra.com.br
DESIGNRESPONSIVO
LAYOUT FLUÍDO
960px470px470px
MEDIDASFLEXÍVEIS
MEDIDASFLEXÍVEIS%,em,rem,vh
100%49%49%
PROPORÇÕES
NUMA TELADE 320px100%49% 49%
LAYOUTCONDICIONAL
NUMA TELADE 320px
.formulario,.endereco {width: 49%;}@media (max-width: 600px) {.formulario,.endereço {width: 100%;}}CSS
.formulario,.endereco {width: 49%;}@media (max-width: 600px) {.formulario,.endereco {width: 100%;}}CSS
CSS3MEDIA QUERIES
.formulario,.endereco {width: 49%;}@media (max-width: 600px) {.formulario,.endereco {width: 100%;}}CSS
DESIGNRESPONSIVOFLEXÍVELADAPTÁVEL
FRAMEWORKS&FERRAMENTAS
CRIAÇÃOPHOTOSHOP?
CRIAÇÃODESIGN IN THE BROWSER
GRIDSBOOTSTRAP,FOUNDATION,ETC
TESTESEMULADORES & APARELHOS
LIBSZEPTO,HAMMER,MICROJS
SITE MOBILE ouDESIGN RESPONSIVO?
DESIGNADAPTATIVORESPONSIVO
DESIGNADAPTATIVORESPONSIVOSEMPRE
SITE MOBILE ouDESIGN RESPONSIVO?
SITE MOBILE ouDESIGN RESPONSIVO?SITE ÚNICO
www.uol.com.br
SITE MOBILEm.uol.com.br
m.uol.com.br
SEO
ONE WEB
ESTRATÉGIA
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
MOBILE-FIRST
DESIGNRESPONSIVOPOR UMAWEB ÚNICA
OBRIGADOsergiolopes.org@sergio_caelum
sergiolopes.org10% off:OLHOSEO10
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Upcoming SlideShare
Loading in …5
×

Design Responsivo por uma Web única

3,878
-1

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×