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

Responsive Web Design, más allá de la adaptación

Pablo Lobos
August 18, 2013

Responsive Web Design, más allá de la adaptación

Por que las técnicas de Responsive Web Design representan el futuro de la web. Técnica básicas mas algunas buenas prácticas para la optimización de sitios en dispositivos móbiles.

Pablo Lobos

August 18, 2013
Tweet

More Decks by Pablo Lobos

Other Decks in Design

Transcript

  1. Responsive Web Design Más allá de la adaptación @pablo_lobos Webprendedor,

    Agosto 2013 domingo, 18 de agosto de 13
  2. El acceso a internet desde dispositivos móviles crece año a

    año de manera exponencial. domingo, 18 de agosto de 13
  3. Para el 2015 el acceso a internet desde móviles será

    mayor que el de computadores de escritorio. 2015 Móviles Computadores domingo, 18 de agosto de 13
  4. domingo, 18 de agosto de 13

  5. LG domingo, 18 de agosto de 13

  6. Samsung LG domingo, 18 de agosto de 13

  7. Samsung LG HTC domingo, 18 de agosto de 13

  8. Samsung LG HTC Motorola domingo, 18 de agosto de 13

  9. Samsung LG HTC Motorola Apple domingo, 18 de agosto de

    13
  10. domingo, 18 de agosto de 13

  11. ANDROID domingo, 18 de agosto de 13

  12. ANDROID IOS domingo, 18 de agosto de 13

  13. ANDROID IOS Windows Phone domingo, 18 de agosto de 13

  14. ANDROID IOS Windows Phone Blackberry domingo, 18 de agosto de

    13
  15. Cada día hay más activaciones de teléfonos con Android que

    nacimientos. http://www.android.com/devices/?country=all domingo, 18 de agosto de 13
  16. No podemos darnos el lujo de limitar el acceso a

    nuestros contenidos. domingo, 18 de agosto de 13
  17. Acoge la diversidad domingo, 18 de agosto de 13

  18. RWD domingo, 18 de agosto de 13

  19. RWD NO ES UNA MODA domingo, 18 de agosto de

    13
  20. domingo, 18 de agosto de 13

  21. Ubicuidad domingo, 18 de agosto de 13

  22. Ubicuidad Flexilidad domingo, 18 de agosto de 13

  23. Ubicuidad Flexilidad Prepararnos para el futuro domingo, 18 de agosto

    de 13
  24. Es un requerimiento esencial para el diseñador actual domingo, 18

    de agosto de 13
  25. ¿Como ser Responsive? domingo, 18 de agosto de 13

  26. domingo, 18 de agosto de 13

  27. 1.Grillas fluidas domingo, 18 de agosto de 13

  28. 1.Grillas fluidas 2. Gráficos y videos fluidos domingo, 18 de

    agosto de 13
  29. 1.Grillas fluidas 2. Gráficos y videos fluidos 3. Media Queries

    domingo, 18 de agosto de 13
  30. 1.Grillas fluidas 2. Gráficos y videos fluidos 3. Media Queries

    4. Tamaños con EM domingo, 18 de agosto de 13
  31. 1.Grillas fluidas 2. Gráficos y videos fluidos 3. Media Queries

    4. Tamaños con EM 5. Flujos de contenidos domingo, 18 de agosto de 13
  32. Grillas fluidas domingo, 18 de agosto de 13

  33. Grillas fluidas 75% 100% 25% domingo, 18 de agosto de

    13
  34. Grillas fluidas 75% 100% 25% domingo, 18 de agosto de

    13
  35. Grillas fluidas 75% 100% 25% 75% 100% 25% domingo, 18

    de agosto de 13
  36. Grillas fluidas 75% 100% 25% 75% 100% 25% domingo, 18

    de agosto de 13
  37. Gráficos y videos fluidos domingo, 18 de agosto de 13

  38. Gráficos y videos fluidos domingo, 18 de agosto de 13

  39. Gráficos y videos fluidos domingo, 18 de agosto de 13

  40. Gráficos y videos fluidos domingo, 18 de agosto de 13

  41. Gráficos y videos fluidos img, html5 video domingo, 18 de

    agosto de 13
  42. Gráficos y videos fluidos img, html5 video domingo, 18 de

    agosto de 13
  43. Gráficos y videos fluidos img, html5 video Video embedido domingo,

    18 de agosto de 13
  44. Gráficos y videos fluidos img, html5 video Video embedido domingo,

    18 de agosto de 13
  45. Media Queries domingo, 18 de agosto de 13

  46. Media Queries domingo, 18 de agosto de 13

  47. Media Queries domingo, 18 de agosto de 13

  48. Media Queries domingo, 18 de agosto de 13

  49. Tamaños con EM domingo, 18 de agosto de 13

  50. Tamaños con EM domingo, 18 de agosto de 13

  51. Tamaños con EM Botón domingo, 18 de agosto de 13

  52. Tamaños con EM Botón Botón domingo, 18 de agosto de

    13
  53. Tamaños con EM Botón Botón Botón domingo, 18 de agosto

    de 13
  54. Tamaños con EM Botón Botón Botón Botón domingo, 18 de

    agosto de 13
  55. Tamaños con EM Botón Botón Botón Botón Componentes escalables domingo,

    18 de agosto de 13
  56. Flujo de contenidos domingo, 18 de agosto de 13

  57. Flujo de contenidos 1 2 3 domingo, 18 de agosto

    de 13
  58. Flujo de contenidos 1 2 3 domingo, 18 de agosto

    de 13
  59. Flujo de contenidos 1 2 3 1 2 3 domingo,

    18 de agosto de 13
  60. Flujo de contenidos domingo, 18 de agosto de 13

  61. 1 2 3 Flujo de contenidos domingo, 18 de agosto

    de 13
  62. 1 2 3 Flujo de contenidos domingo, 18 de agosto

    de 13
  63. 1 2 3 1 2 3 Flujo de contenidos domingo,

    18 de agosto de 13
  64. Flujo de contenidos El futuro: Flexbox domingo, 18 de agosto

    de 13
  65. Flujo de contenidos El futuro: Flexbox 1 2 3 domingo,

    18 de agosto de 13
  66. Flujo de contenidos El futuro: Flexbox 1 2 3 1

    2 3 domingo, 18 de agosto de 13
  67. Flujo de contenidos El futuro: Flexbox 1 2 3 1

    2 3 domingo, 18 de agosto de 13
  68. Flujo de contenidos El futuro: Flexbox domingo, 18 de agosto

    de 13
  69. Flujo de contenidos El futuro: Flexbox domingo, 18 de agosto

    de 13
  70. Flujo de contenidos El futuro: Flexbox 1 2 3 domingo,

    18 de agosto de 13
  71. Flujo de contenidos El futuro: Flexbox 1 2 3 1

    2 3 domingo, 18 de agosto de 13
  72. Pero eso no es todo domingo, 18 de agosto de

    13
  73. Hay algunas cosas que aún son ciencia ficción: domingo, 18

    de agosto de 13
  74. Hay algunas cosas que aún son ciencia ficción: Super domingo,

    18 de agosto de 13
  75. Hay algunas cosas que aún son ciencia ficción: Super Usuarios

    domingo, 18 de agosto de 13
  76. Hay algunas cosas que aún son ciencia ficción: Super Usuarios

    Teléfonos domingo, 18 de agosto de 13
  77. Hay algunas cosas que aún son ciencia ficción: Super Usuarios

    Teléfonos Conexión domingo, 18 de agosto de 13
  78. domingo, 18 de agosto de 13

  79. Optimizar domingo, 18 de agosto de 13

  80. Optimizar Optimizar domingo, 18 de agosto de 13

  81. Optimizar Optimizar Optimizar domingo, 18 de agosto de 13

  82. MOBILE FIRST domingo, 18 de agosto de 13

  83. Mobile First Se optimizan los contenidos y los recursos para

    los usuarios de dispositivos móviles. domingo, 18 de agosto de 13
  84. Mobile First Se optimizan los contenidos y los recursos para

    los usuarios de dispositivos móviles. A partir de ahí se agregan recursos y capacidades para los usuarios con mayor resolución de pantalla, mejor ancho de banda y mejor capacidad de procesamiento. domingo, 18 de agosto de 13
  85. domingo, 18 de agosto de 13

  86. 1. Media Queries domingo, 18 de agosto de 13

  87. 1. Media Queries 2. Detección de capacidades domingo, 18 de

    agosto de 13
  88. 1. Media Queries 2. Detección de capacidades 3. Carga condicional

    de recursos domingo, 18 de agosto de 13
  89. 1. Media Queries 2. Detección de capacidades 3. Carga condicional

    de recursos 4. Imágenes optimizadas domingo, 18 de agosto de 13
  90. Media Queries Control de diagramación y diseño vusual de los

    elementos domingo, 18 de agosto de 13
  91. Detección de capacidades domingo, 18 de agosto de 13

  92. Detección de capacidades Modernizr domingo, 18 de agosto de 13

  93. Detección de capacidades Modernizr domingo, 18 de agosto de 13

  94. Detección de capacidades Modernizr domingo, 18 de agosto de 13

  95. Carga condicional de recursos A los usuarios de dispositivos móviles

    o limitados hacemos que carguen menos CSS y JS o CSS y JS optimizado para ellos. domingo, 18 de agosto de 13
  96. Carga condicional de recursos A los usuarios de dispositivos móviles

    o limitados hacemos que carguen menos CSS y JS o CSS y JS optimizado para ellos. Modernizr domingo, 18 de agosto de 13
  97. Carga condicional de recursos A los usuarios de dispositivos móviles

    o limitados hacemos que carguen menos CSS y JS o CSS y JS optimizado para ellos. Modernizr domingo, 18 de agosto de 13
  98. Carga condicional de recursos A los usuarios de dispositivos móviles

    o limitados hacemos que carguen menos CSS y JS o CSS y JS optimizado para ellos. Modernizr domingo, 18 de agosto de 13
  99. Imágenes optimizadas Imágenes más livianas y pequeñas para móviles, imágenes

    más grandes para pantallas grandes. domingo, 18 de agosto de 13
  100. Imágenes optimizadas Response.js Imágenes más livianas y pequeñas para móviles,

    imágenes más grandes para pantallas grandes. domingo, 18 de agosto de 13
  101. Imágenes optimizadas Response.js Imágenes más livianas y pequeñas para móviles,

    imágenes más grandes para pantallas grandes. domingo, 18 de agosto de 13
  102. Imágenes optimizadas Response.js Imágenes más livianas y pequeñas para móviles,

    imágenes más grandes para pantallas grandes. domingo, 18 de agosto de 13
  103. Muchas gracias @pablo_lobos domingo, 18 de agosto de 13