Diseñando para la Web Móvil

hablando un poco sobre responsive y adaptive design... y algunas cosas relacionadas con diseño web para móviles

Transcript

1. ORLANDO DEL AGUILA
2. Como perder 20 kilos en 2 semanas con HERBALIFE
3. Diseño web para dispositivos móviles.
4. @odelaguila orlandodelaguila orlandodelaguila.com www.bakedweb.net
5. La Web Móvil
6. La Web Móvil Fixed y Fluid Layouts
7. La Web Móvil Fixed y Fluid Layouts Adaptive Design Breakpoints Responsive Design
8. Extras y Closing La Web Móvil Fixed y Fluid Layouts Adaptive Design Breakpoints Responsive Design
9. La Web Móvil
10. La Web Móvil No existe la web móvil
11. La Web
12. La Web Cualquier tipo de Contenido Debe ser accesible desde cualquier dispositivo
13. La Web Diseño Móvil Adaptive Design Responsive Design
14. La Web Diseño Móvil Adaptive Design Responsive Design Diseño Web
15. Cosas que vamos a usar
16. Cosas que vamos a usar
17. Cosas que vamos a usar
18. Fixed y Fluid Layouts
19. Fixed Layouts
20. Wrapper
21. Header
22. Content
23. Fixed Layouts Tamaño fijo (pixeles) #wrapper { margin: 50px auto; width: 1010px;  Fijo }
24. Wrapper
25. Fixed Layouts
26. Fixed Layouts
27. Fixed Layouts
29. Fluid Layouts Porcentajes Ems
30. Fluid Layouts Porcentajes
31. Fluid Layouts Porcentajes html,body{ width: 100%; height: 100%; }
32. Fluid Layouts Agarra el 100% de la pantalla html,body{ width: 100%; height: 100%; }
33. Fluid Layouts Mi pantalla 1280 x 768 Ancho - Alto
34. Fluid Layouts 1280 80% 1024
35. Fluid Layouts #wrapper { margin: 50px auto; width: 1010px;  Fijo }
36. Fluid Layouts #wrapper { margin: 50px auto; width: 80%;  Fluido }
37. Fluid Layouts Ems
38. Fluid Layouts Ems Se usan para texto
39. EMS Hacen que nuestro texto no sea fijo y que pueda cambiar con el layout
40. EMS
41. HTML <h3> Este es un h3 <span> Esto es un span </span> </h3>
42. CSS h3 { font-size: 50px; font-weight: bold; color: black; span{ color: red; font-size: 30px; font-weight: lighter; } }
43. CSS h3 { font-size: 50px; font-weight: bold; color: black; span{ color: red; font-size: 30px; font-weight: lighter; } }
44. CSS html{ font-size: 16px; } body{ font-size: 62.5%; }
45. EMS Para hacer las cuentas sencillas, hacemos lo siguiente
46. Regla de Oro Target / Contexto
47. EMS 10px/ 16px = 0,625
48. EMS 0,625 x 100 = 62,5%
49. EMS 1em = 10px
50. EMS h3 { font-size: 5em; *50px* font-weight: bold; color: black; span{ color: red; font-size: 3em; *30px* font-weight: lighter; } }
51. EMS
53. Regla de Oro Target / Contexto
54. EMS El contexto del span cambio, ya no es el body, ahora es el h3
55. EMS h3 { font-size: 5em; == 50px font-weight: bold; color: black; span{ color: red; font-size: 3em; font-weight: lighter; } }
56. EMS 30px / 50px = 0.6em
57. EMS h3 { font-size: 5em; == 50px font-weight: bold; color: black; span{ color: red; font-size: 0.6 em; *30px / 50px* font-weight: lighter; } }
58. EMS
59. Fluid Layout Para que nuestro diseño sea fluido, todo tiene que estar en ems o %
60. Fixed Layouts
61. Wrapper #wrapper { margin: 50px auto; width: 80%;  Fluido }
62. Header header{ margin-bottom: 20px width: 1010px; #name{ font-size:50px float:left; } nav{ float:right; } }
63. Header header{ margin-bottom: 20px width: inherit; #name{ font-size:5em; *50px / 10px* float:left; } nav{ float:right; } }
64. Contenido #content { height: auto; width: inherit; }
65. Secciones
66. Secciones <h1> ABOUT </h1> <div class="img"> <img src="/img/me.jpg"> </div>
67. Secciones h1 { font-family: "museo-sans" font-size: 25px; padding: 0 25px; }
68. Secciones h1 { font-family: "museo-sans" font-size: 2.5em; 25px/10px padding: 0 25px; }
69. Secciones Para pasar el padding a porcentaje, se toma como contexto el tamaño del mismo elemento
70. Secciones 1010px de ancho
71. Secciones 1010px de ancho 25px /1010px = 2.47524752475%
72. Secciones h1 { font-family: "museo-sans" font-size: 2.5em; 25px/10px padding: 0 2.47524752475%; }
73. Secciones Al contrario del padding, el margin se calcula igual que los ems, usando como contexto el elemento que contiene al elemento que estamos evaluando.
74. Secciones
75. Secciones <h1> ABOUT </h1> <div class="img"> <img src="/img/me.jpg"> </div>
76. Secciones Alguno quizás dirá, tener img tags para imágenes que son del layout y no del contenido es una mala practica
77. Secciones img { width: auto; max-width: 100%; }
78. Secciones img,video,object… { width: auto; max-width: 100%; }
79. Secciones
80. Secciones
81. Adaptive Design Breakpoints Responsive Design
82. Adaptive Design Adaptar nuestro diseño a un contexto, ejemplo un dispositivo en especifico, un iPhone o un iPad por ejemplo
83. Adaptive Design
84. Adaptive Design dribble noto que un numero importante de usuarios acensaban a su pagina desde iPhones
85. Adaptive Design
86. Adaptive Design Hay que tener en cuenta • Dispositivos • Tamaño de Pantalla • Resolución
87. Adaptive Design • Quien es mi usuario • Como usa mi sitio • Contexto (Dispositivo) • Contenido (¿como se adaptaría?) Puntos a considerar
88. Adaptive Design
89. Adaptive Design Breakpoints Responsive Design
90. Breakpoints Breakpoints son los puntos en los cuales mi diseño se rompe.
91. Breakpoints También son los puntos importantes como el tamaño de las pantallas de los distintos dispositivos
92. Breakpoints Tamaño != Resolución
93. Breakpoints iPhone 4s Resolución: 640 x 960 Tamaño: 480 x 320
94. Breakpoints
95. Breakpoints Para atender los problemas que tenían los dispositivos móviles para visualizar la web…
96. Breakpoints Se creo: • Meta viewport • Mediaquery
97. Secciones <meta name='viewport‘, content='width=device-width /> Meta viewport
98. Secciones Meta viewport Con esto limitamos el lienzo web al tamaño del dispositivo.
99. Meta viewport
100. Secciones html,body { height: 100%; = 480px width: 100%; = 320px } Meta viewport
101. Secciones MediaQueries Reglas CSS, solo para dispositivos especificos
102. Secciones MediaQueries Reglas CSS, solo para dispositivos específicos
103. Secciones MediaQueries Existen varios mediaqueries, pero aquí solo vamos a usar el de max-width
104. Secciones MediaQueries Documentación http://mzl.la/L28U6F
105. Secciones MediaQueries /* Phones (portrait) */ @media only screen and (max-width : 320px){ /* Reglas aki */ }
106. Secciones MediaQueries /* Phones (landscape) */ @media only screen and (max-width : 480px){ /* Reglas aki */ }
107. Secciones MediaQueries /* Tables (portrait) */ @media only screen and (max-width : 768px){ /* Reglas aki */ }
108. Secciones MediaQueries Los mediaqueries se colocan al final de nuestras hojas de estilo (stylesheets)
109. Secciones MediaQueries
110. Secciones MediaQueries Si usan Chrome http://bit.ly/L29FfZ
111. Secciones MediaQueries Creamos un mediaquery para atender ese breakpoint
112. Secciones MediaQueries @media only screen and (max-width : 850px){ nav, #name{ float:none; width:100%; } }
113. Secciones MediaQueries
114. Secciones MediaQueries @media only screen and (max-width : 850px){ nav, #name{ float:none; width:100%; text-align:center; } }
115. Secciones MediaQueries
116. Secciones MediaQueries @media only screen and (max-width : 850px){ header{ margin-bottom:50px;} nav, #name{ float:none; width:100%; text-align:center; } }
117. Secciones MediaQueries
118. Secciones MediaQueries En este punto hay que probar y corregir los breakpoints hasta que tengamos lo que queremos
120. Responsive Design
121. Responsive Design Imaginen un adaptive design, pensado para todos los dispositivos, actuales y futuros.
122. Extras y Closing
123. El responsive design no es un silverbullet, no va ser viable en todos los casos Extras y Closing
124. En otros casos, app nativas para móviles es la solución, o alternativas como jQuery Mobile Extras y Closing
125. Extras y Closing
126. Extras y Closing IE6-8 no soportan mediqueries, pero hay un polyfill para eso Respond.js http://bit.ly/LQaei0
127. Extras y Closing Hay frameworks de CSS que se basan en fluid layouts y responsive design • Twitter Bootstrap • Zurb Foundation
128. Extras y Closing A Book Apart, Responsive Web Design http://bit.ly/LQbXUP
129. Gracias 