Design Responsivo por uma Web nica

  • View
    3.457

  • Download
    3

Embed Size (px)

DESCRIPTION

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

Text of Design Responsivo por uma Web nica

  • 1. DESIGNRESPONSIVOPOR UMAWEB NICA

2. @sergio_caelumsergiolopes.org 3. sergiolopes.org10% off:OLHOSEO10 4. MOBILEBOMBANDO 5. APP ouWEB? 6. WEB-FIRST 7. SITE MOBILE ouDESIGN RESPONSIVO? 8. www.uol.com.br 9. SITE MOBILEm.uol.com.br 10. bostonglobe.com 11. SITE MOBILE ouDESIGN RESPONSIVO? 12. SITE MOBILE ouDESIGN RESPONSIVO?MOBILE??? 13. MOBILE 14. MOBILETELA PEQUENA 15. MOBILEPORTABILIDADETELA PEQUENA 16. MOBILE3GPORTABILIDADETELA PEQUENA 17. MOBILE3G TOUCHPORTABILIDADETELA PEQUENA 18. NO EXISTEMOBILE 19. terra.com.br 20. m.terra.com.br 21. tablet.terra.com.br 22. DESIGNRESPONSIVO 23. LAYOUT FLUDO 24. 960px470px470px 25. MEDIDASFLEXVEIS 26. MEDIDASFLEXVEIS%,em,rem,vh 27. 100%49%49% 28. PROPORES 29. NUMA TELADE 320px100%49% 49% 30. LAYOUTCONDICIONAL 31. NUMA TELADE 320px 32. .formulario,.endereco {width: 49%;}@media (max-width: 600px) {.formulario,.endereo {width: 100%;}}CSS 33. .formulario,.endereco {width: 49%;}@media (max-width: 600px) {.formulario,.endereco {width: 100%;}}CSS 34. CSS3MEDIA QUERIES 35. .formulario,.endereco {width: 49%;}@media (max-width: 600px) {.formulario,.endereco {width: 100%;}}CSS 36. DESIGNRESPONSIVOFLEXVELADAPTVEL 37. FRAMEWORKS&FERRAMENTAS 38. CRIAOPHOTOSHOP? 39. CRIAODESIGN IN THE BROWSER 40. GRIDSBOOTSTRAP,FOUNDATION,ETC 41. TESTESEMULADORES & APARELHOS 42. LIBSZEPTO,HAMMER,MICROJS 43. SITE MOBILE ouDESIGN RESPONSIVO? 44. DESIGNADAPTATIVORESPONSIVO 45. DESIGNADAPTATIVORESPONSIVOSEMPRE 46. SITE MOBILE ouDESIGN RESPONSIVO? 47. SITE MOBILE ouDESIGN RESPONSIVO?SITE NICO 48. www.uol.com.br 49. SITE MOBILEm.uol.com.br 50. m.uol.com.br 51. SEO 52. ONE WEB 53. ESTRATGIA 54. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20" 55. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20" 56. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20" 57. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20" 58. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20" 59. 3" 4" 5" 7" 9" 10" 13" 15" 17" 20" 60. MOBILE-FIRST 61. DESIGNRESPONSIVOPOR UMAWEB NICA 62. OBRIGADOsergiolopes.org@sergio_caelum 63. sergiolopes.org10% off:OLHOSEO10