Design Responsivo - MobCamp 2014

1,791 views

Published on

Palestra de Design Responsivo do Sérgio Lopes na MobCamp 2014

Published in: Technology
1 Comment
29 Likes
Statistics
Notes
No Downloads
Views
Total views
1,791
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
71
Comments
1
Likes
29
Embeds 0
No embeds

No notes for slide

Design Responsivo - MobCamp 2014

  1. 1. DESIGNRESPONSIVO POR UMA WEB ÚNICA
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. sergiolopes.org
  4. 4. SITE MOBILE ou DESIGN RESPONSIVO?
  5. 5. NÃO EXISTE MOBILE
  6. 6. ONE WEB
  7. 7. DESIGNRESPONSIVO
  8. 8. LAYOUT FLUÍDO
  9. 9. 960px 470px470px
  10. 10. MEDIDAS FLEXÍVEIS
  11. 11. MEDIDAS FLEXÍVEIS %,em,rem,vh
  12. 12. 100% 49%49%
  13. 13. PROPORÇÕES
  14. 14. NUMA TELA DE 320px 100% 49% 49%
  15. 15. LAYOUT CONDICIONAL
  16. 16. NUMA TELA DE 320px
  17. 17. .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereço { width: 100%; } } CSS
  18. 18. .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereco { width: 100%; } } CSS
  19. 19. CSS3 MEDIA QUERIES
  20. 20. .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereco { width: 100%; } } CSS
  21. 21. DESIGNRESPONSIVO FLEXÍVEL ADAPTÁVEL
  22. 22. IMPLEMENTANDO DESIGNRESPONSIVO
  23. 23. CRIAÇÃO PHOTOSHOP?
  24. 24. CRIAÇÃO DESIGN IN THE BROWSER
  25. 25. LAYOUT FLUÍDO
  26. 26. MEDIDAS FLEXÍVEIS
  27. 27. %
  28. 28. <body>
  29. 29. <body> <main> width: 90%;
  30. 30. <body> <main> width: 90%; 90%
  31. 31. <body> <main> width: 90%; 90% 5% 5%
  32. 32. <body> <main> width: 90%; 90% 5% 5% 1280px
  33. 33. <body> <main> width: 90%; 90% 5% 5% 1280px 1152px
  34. 34. <body> <main> width: 90%; 90% 5% 5% 1280px 1152px 54px 54px
  35. 35. <body> <main> width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px
  36. 36. <body> <main> width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px 324px
  37. 37. <body> <main> width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px 324px 18px 18px
  38. 38. <body> <main> width: 90%;
  39. 39. <body> <main> width: 90%; <section> width: 50%; <section> width: 50%;
  40. 40. <body> <main> width: 90%; <section> width: 50%; <section> width: 50%; 33% 33% 33% 33% 33% 33%
  41. 41. % font-size
  42. 42. <body>
  43. 43. <body> <main> font-size: 125%;
  44. 44. <body> <main> font-size: 125%; <p>
  45. 45. <body> <main> font-size: 125%; <section> font-size: 90%; <p>
  46. 46. <body> <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p>
  47. 47. <body> <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p> <p> <p>
  48. 48. <body> <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p> <p> <p> 16px
  49. 49. <body> <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p> <p> <p> 16px 20px
  50. 50. <body> <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p> <p> <p> 16px 20px 20px
  51. 51. <body> <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p> <p> <p> 16px 20px 20px 18px
  52. 52. <body> <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p> <p> <p> 16px 20px 20px 18px 27px
  53. 53. <body> <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p> <p> <p> 16px 20px 20px 18px 18px 27px
  54. 54. <main> font-size: 125%; <section> font-size: 90%; <h1> font-size: 150%; <p> <p> <p> 20px 25px 25px 22px 22px 33px <body> font-size: 20px;
  55. 55. <main> font-size: 1.25em; <section> font-size: .9em; <h1> font-size: 1.5em; <p> <p> <p> 20px 25px 25px 22px 22px 33px <body> font-size: 20px;
  56. 56. <main> font-size: 1.25em; <section> font-size: 90%; <h1> font-size: 1.5em; <p> <p> <p> 20px 25px 25px 22px 22px 33px <body> font-size: 20px;
  57. 57. % font-size em
  58. 58. font-size: 120%; font-size: 1.2em;
  59. 59. <main> <p> margin: 1em 0; max-width: 40em; <body> <p> margin: 1em 0; max-width: 40em; <p> margin: 1em 0; max-width: 40em;
  60. 60. <main> font-size: 1.5em; <p> margin: 1em 0; max-width: 40em; <body> <p> margin: 1em 0; max-width: 40em; <p> margin: 1em 0; max-width: 40em;
  61. 61. em
  62. 62. rem
  63. 63. <main> font-size: 1.5rem;
  64. 64. <main> font-size: 1.5rem; <p>
  65. 65. <main> font-size: 1.5rem; <section> font-size: .5rem; <p>
  66. 66. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p>
  67. 67. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p>
  68. 68. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p> 16px
  69. 69. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p> 16px 24px
  70. 70. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p> 16px 24px 24px
  71. 71. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p> 16px 24px 24px 8px
  72. 72. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p> 16px 24px 24px 8px 32px
  73. 73. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p> 16px 24px 24px 8px 8px 32px
  74. 74. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p> 20px 30px 30px 10px 10px 40px
  75. 75. <main> font-size: 1.5rem; <section> font-size: .5rem; <h1> font-size: 2rem; <p> <p> <p> 20px 30px 30px 10px 10px 40px <html>
  76. 76. vw & vhVIEWPORT UNITS
  77. 77. <body> <main> width: 90vw; <section> width: 45vw; <section> width: 45vw; 15 vw 15 vw 15 vw 15 vw 15 vw 15 vw
  78. 78. PRÁTICA
  79. 79. FLUÍDO... <ul class="menu"> <li><!-- home --></li> <li><!-- menu --></li> <li><!-- busca --></li> </ul>
  80. 80. FLUÍDO... .menu { margin: 2%; width: 96%; } .menu > li { width: 33.3%; }
  81. 81. FLUÍDO... 320px 400px
  82. 82. <div class="main"> <h1>iOS 7</h1> <h2>The mobile OS from a whole new perspe <img src="iphone.png" alt="iPhone 5"> <a href="/watch">Watch the keynote</a> <a href="/more">Learn more</a> </div>
  83. 83. .main img { position: relative; top: -1em; }
  84. 84. .main img { position: relative; top: -1em; } ! @media (min-width: 400px) { .main img { top: -2em; } }
  85. 85. .news { float: left; width: 100%; } @media (min-width: 768px) { .news { width: 50%; } } @media (min-width: 1024px) { .news { width: 25%; } }
  86. 86. CSS3 MEDIA QUERIES BOAS PRÁTICAS
  87. 87. .news { float: left; width: 100%; } @media (min-width: 768px) { .news { width: 50%; } } @media (min-width: 1024px) { .news { width: 25%; } }
  88. 88. FRAMEWORKS RESPONSIVOS TWITTER BOOTSTRAP
  89. 89. FRAMEWORKS RESPONSIVOS 320 and up 320px 480px 600px 768px 992px 1382px
  90. 90. BREAKPOINTS DE CONTEÚDO
  91. 91. MEDIA QUERIES MOBILE FIRST
  92. 92. h1, h2 { float: left; } ! @media (max-width: 400px) { h1, h2 { float: none; } } MQ desktop-first
  93. 93. MQ mobile-first /* float:none; */ ! @media (min-width: 400px) { h1, h2 { float: left; } }
  94. 94. VIEWPORT
  95. 95. 980px
  96. 96. <meta name="viewport" content="width=320">
  97. 97. 320px
  98. 98. <meta name="viewport" content="width=device-width">
  99. 99. OBRIGADO sergiolopes.org @sergio_caelum

×