$30 off During Our Annual Pro Sale. View Details »

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

Orlando Del Aguila

May 26, 2012
Tweet

More Decks by Orlando Del Aguila

Other Decks in Design

Transcript

  1. ORLANDO
    DEL AGUILA

    View Slide

  2. Como perder 20 kilos
    en 2 semanas con
    HERBALIFE

    View Slide

  3. Diseño web para
    dispositivos móviles.

    View Slide

  4. @odelaguila
    orlandodelaguila
    orlandodelaguila.com
    www.bakedweb.net

    View Slide

  5. La Web Móvil

    View Slide

  6. La Web Móvil
    Fixed y Fluid Layouts

    View Slide

  7. La Web Móvil
    Fixed y Fluid Layouts
    Adaptive Design
    Breakpoints
    Responsive Design

    View Slide

  8. Extras y Closing
    La Web Móvil
    Fixed y Fluid Layouts
    Adaptive Design
    Breakpoints
    Responsive Design

    View Slide

  9. La Web Móvil

    View Slide

  10. La Web Móvil
    No existe
    la web móvil

    View Slide

  11. La Web

    View Slide

  12. La Web
    Cualquier tipo de Contenido
    Debe ser accesible desde
    cualquier dispositivo

    View Slide

  13. La Web
    Diseño Móvil
    Adaptive Design
    Responsive Design

    View Slide

  14. La Web
    Diseño Móvil
    Adaptive Design
    Responsive Design
    Diseño Web

    View Slide

  15. Cosas que vamos a usar

    View Slide

  16. Cosas que vamos a usar

    View Slide

  17. Cosas que vamos a usar

    View Slide

  18. Fixed y Fluid Layouts

    View Slide

  19. Fixed Layouts

    View Slide

  20. Wrapper

    View Slide

  21. Header

    View Slide

  22. Content

    View Slide

  23. Fixed Layouts
    Tamaño fijo (pixeles)
    #wrapper {
    margin: 50px auto;
    width: 1010px;  Fijo
    }

    View Slide

  24. Wrapper

    View Slide

  25. Fixed Layouts

    View Slide

  26. Fixed Layouts

    View Slide

  27. Fixed Layouts

    View Slide

  28. View Slide

  29. Fluid Layouts
    Porcentajes
    Ems

    View Slide

  30. Fluid Layouts
    Porcentajes

    View Slide

  31. Fluid Layouts
    Porcentajes
    html,body{
    width: 100%;
    height: 100%;
    }

    View Slide

  32. Fluid Layouts
    Agarra el 100% de la
    pantalla
    html,body{
    width: 100%;
    height: 100%;
    }

    View Slide

  33. Fluid Layouts
    Mi pantalla
    1280 x 768
    Ancho - Alto

    View Slide

  34. Fluid Layouts
    1280
    80%
    1024

    View Slide

  35. Fluid Layouts
    #wrapper {
    margin: 50px auto;
    width: 1010px;  Fijo
    }

    View Slide

  36. Fluid Layouts
    #wrapper {
    margin: 50px auto;
    width: 80%;  Fluido
    }

    View Slide

  37. Fluid Layouts
    Ems

    View Slide

  38. Fluid Layouts
    Ems
    Se usan para texto

    View Slide

  39. EMS
    Hacen que nuestro
    texto no sea fijo y
    que pueda
    cambiar con el
    layout

    View Slide

  40. EMS

    View Slide

  41. HTML

    Este es un h3

    Esto es un span


    View Slide

  42. CSS
    h3 {
    font-size: 50px;
    font-weight: bold;
    color: black;
    span{
    color: red;
    font-size: 30px;
    font-weight: lighter;
    }
    }

    View Slide

  43. CSS
    h3 {
    font-size: 50px;
    font-weight: bold;
    color: black;
    span{
    color: red;
    font-size: 30px;
    font-weight: lighter;
    }
    }

    View Slide

  44. CSS
    html{
    font-size: 16px;
    }
    body{
    font-size: 62.5%;
    }

    View Slide

  45. EMS
    Para hacer las cuentas
    sencillas, hacemos lo
    siguiente

    View Slide

  46. Regla de Oro
    Target / Contexto

    View Slide

  47. EMS
    10px/ 16px = 0,625

    View Slide

  48. EMS
    0,625 x 100 = 62,5%

    View Slide

  49. EMS
    1em = 10px

    View Slide

  50. EMS
    h3 {
    font-size: 5em; *50px*
    font-weight: bold;
    color: black;
    span{
    color: red;
    font-size: 3em; *30px*
    font-weight: lighter;
    }
    }

    View Slide

  51. EMS

    View Slide

  52. View Slide

  53. Regla de Oro
    Target / Contexto

    View Slide

  54. EMS
    El contexto del
    span cambio, ya
    no es el body,
    ahora es el h3

    View Slide

  55. EMS
    h3 {
    font-size: 5em; == 50px
    font-weight: bold;
    color: black;
    span{
    color: red;
    font-size: 3em;
    font-weight: lighter;
    }
    }

    View Slide

  56. EMS
    30px / 50px = 0.6em

    View Slide

  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;
    }
    }

    View Slide

  58. EMS

    View Slide

  59. Fluid Layout
    Para que nuestro
    diseño sea fluido,
    todo tiene que estar
    en ems o %

    View Slide

  60. Fixed Layouts

    View Slide

  61. Wrapper
    #wrapper {
    margin: 50px auto;
    width: 80%;  Fluido
    }

    View Slide

  62. Header
    header{
    margin-bottom: 20px
    width: 1010px;
    #name{
    font-size:50px
    float:left;
    }
    nav{
    float:right;
    }
    }

    View Slide

  63. Header
    header{
    margin-bottom: 20px
    width: inherit;
    #name{
    font-size:5em; *50px / 10px*
    float:left;
    }
    nav{
    float:right;
    }
    }

    View Slide

  64. Contenido
    #content {
    height: auto;
    width: inherit;
    }

    View Slide

  65. Secciones

    View Slide

  66. Secciones

    ABOUT




    View Slide

  67. Secciones
    h1 {
    font-family: "museo-sans"
    font-size: 25px;
    padding: 0 25px;
    }

    View Slide

  68. Secciones
    h1 {
    font-family: "museo-sans"
    font-size: 2.5em; 25px/10px
    padding: 0 25px;
    }

    View Slide

  69. Secciones
    Para pasar el padding a
    porcentaje, se toma como
    contexto el tamaño del
    mismo elemento

    View Slide

  70. Secciones
    1010px de ancho

    View Slide

  71. Secciones
    1010px de ancho
    25px /1010px =
    2.47524752475%

    View Slide

  72. Secciones
    h1 {
    font-family: "museo-sans"
    font-size: 2.5em; 25px/10px
    padding: 0 2.47524752475%;
    }

    View Slide

  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.

    View Slide

  74. Secciones

    View Slide

  75. Secciones

    ABOUT




    View Slide

  76. Secciones
    Alguno quizás dirá, tener
    img tags para imágenes
    que son del layout y no
    del contenido es una mala
    practica

    View Slide

  77. Secciones
    img {
    width: auto;
    max-width: 100%;
    }

    View Slide

  78. Secciones
    img,video,object… {
    width: auto;
    max-width: 100%;
    }

    View Slide

  79. Secciones

    View Slide

  80. Secciones

    View Slide

  81. Adaptive Design
    Breakpoints
    Responsive Design

    View Slide

  82. Adaptive Design
    Adaptar nuestro diseño a un
    contexto, ejemplo un
    dispositivo en especifico, un
    iPhone o un iPad por
    ejemplo

    View Slide

  83. Adaptive Design

    View Slide

  84. Adaptive Design
    dribble noto que un
    numero importante de
    usuarios acensaban a su
    pagina desde iPhones

    View Slide

  85. Adaptive Design

    View Slide

  86. Adaptive Design
    Hay que tener en cuenta
    • Dispositivos
    • Tamaño de Pantalla
    • Resolución

    View Slide

  87. Adaptive Design
    • Quien es mi usuario
    • Como usa mi sitio
    • Contexto (Dispositivo)
    • Contenido (¿como se
    adaptaría?)
    Puntos a considerar

    View Slide

  88. Adaptive Design

    View Slide

  89. Adaptive Design
    Breakpoints
    Responsive Design

    View Slide

  90. Breakpoints
    Breakpoints son los
    puntos en los cuales mi
    diseño se rompe.

    View Slide

  91. Breakpoints
    También son los
    puntos importantes
    como el tamaño de las
    pantallas de los
    distintos dispositivos

    View Slide

  92. Breakpoints
    Tamaño != Resolución

    View Slide

  93. Breakpoints
    iPhone 4s
    Resolución: 640 x 960
    Tamaño: 480 x 320

    View Slide

  94. Breakpoints

    View Slide

  95. Breakpoints
    Para atender los
    problemas que tenían
    los dispositivos móviles
    para visualizar la web…

    View Slide

  96. Breakpoints
    Se creo:
    • Meta viewport
    • Mediaquery

    View Slide

  97. Secciones
    name='viewport‘,
    content='width=device-width
    />
    Meta viewport

    View Slide

  98. Secciones
    Meta viewport
    Con esto limitamos
    el lienzo web al
    tamaño del
    dispositivo.

    View Slide

  99. Meta viewport

    View Slide

  100. Secciones
    html,body {
    height: 100%; = 480px
    width: 100%; = 320px
    }
    Meta viewport

    View Slide

  101. Secciones
    MediaQueries
    Reglas CSS, solo
    para dispositivos
    especificos

    View Slide

  102. Secciones
    MediaQueries
    Reglas CSS, solo
    para dispositivos
    específicos

    View Slide

  103. Secciones
    MediaQueries
    Existen varios
    mediaqueries, pero
    aquí solo vamos a
    usar el de max-width

    View Slide

  104. Secciones
    MediaQueries
    Documentación
    http://mzl.la/L28U6F

    View Slide

  105. Secciones
    MediaQueries
    /* Phones (portrait) */
    @media only screen and
    (max-width : 320px){
    /* Reglas aki */
    }

    View Slide

  106. Secciones
    MediaQueries
    /* Phones (landscape) */
    @media only screen and
    (max-width : 480px){
    /* Reglas aki */
    }

    View Slide

  107. Secciones
    MediaQueries
    /* Tables (portrait) */
    @media only screen and
    (max-width : 768px){
    /* Reglas aki */
    }

    View Slide

  108. Secciones
    MediaQueries
    Los mediaqueries se
    colocan al final de
    nuestras hojas de
    estilo (stylesheets)

    View Slide

  109. Secciones
    MediaQueries

    View Slide

  110. Secciones
    MediaQueries
    Si usan Chrome
    http://bit.ly/L29FfZ

    View Slide

  111. Secciones
    MediaQueries
    Creamos un
    mediaquery para
    atender ese
    breakpoint

    View Slide

  112. Secciones
    MediaQueries
    @media only screen and
    (max-width : 850px){
    nav, #name{
    float:none;
    width:100%;
    }
    }

    View Slide

  113. Secciones
    MediaQueries

    View Slide

  114. Secciones
    MediaQueries
    @media only screen and
    (max-width : 850px){
    nav, #name{
    float:none;
    width:100%;
    text-align:center;
    }
    }

    View Slide

  115. Secciones
    MediaQueries

    View Slide

  116. Secciones
    MediaQueries
    @media only screen and
    (max-width : 850px){
    header{ margin-bottom:50px;}
    nav, #name{
    float:none;
    width:100%;
    text-align:center;
    }
    }

    View Slide

  117. Secciones
    MediaQueries

    View Slide

  118. Secciones
    MediaQueries
    En este punto hay que
    probar y corregir los
    breakpoints hasta que
    tengamos lo que
    queremos

    View Slide

  119. View Slide

  120. Responsive Design

    View Slide

  121. Responsive Design
    Imaginen un adaptive
    design, pensado para
    todos los dispositivos,
    actuales y futuros.

    View Slide

  122. Extras y Closing

    View Slide

  123. El responsive design no es
    un silverbullet, no va ser
    viable en todos los casos
    Extras y Closing

    View Slide

  124. En otros casos, app
    nativas para móviles es la
    solución, o alternativas
    como jQuery Mobile
    Extras y Closing

    View Slide

  125. Extras y Closing

    View Slide

  126. Extras y Closing
    IE6-8 no soportan
    mediqueries, pero hay un
    polyfill para eso
    Respond.js
    http://bit.ly/LQaei0

    View Slide

  127. Extras y Closing
    Hay frameworks de CSS
    que se basan en fluid
    layouts y responsive
    design
    • Twitter Bootstrap
    • Zurb Foundation

    View Slide

  128. Extras y Closing
    A Book Apart, Responsive Web Design
    http://bit.ly/LQbXUP

    View Slide

  129. Gracias 

    View Slide