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.

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