Diseñando para la Web Móvil

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

A0574e5093df6afd68f1c109c5a9bf22?s=128

Orlando Del Aguila

May 26, 2012
Tweet

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

  28. None
  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

  52. None
  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
  119. None
  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 