Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. El acceso a internet desde dispositivos móviles crece año a

    año de manera exponencial. domingo, 18 de agosto de 13
  2. 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
  3. 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
  4. No podemos darnos el lujo de limitar el acceso a

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

    4. Tamaños con EM domingo, 18 de agosto de 13
  6. 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
  7. Flujo de contenidos El futuro: Flexbox 1 2 3 1

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

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

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

    Teléfonos Conexión domingo, 18 de agosto de 13
  11. Mobile First Se optimizan los contenidos y los recursos para

    los usuarios de dispositivos móviles. domingo, 18 de agosto de 13
  12. 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
  13. 1. Media Queries 2. Detección de capacidades 3. Carga condicional

    de recursos 4. Imágenes optimizadas domingo, 18 de agosto de 13
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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