Importancia de adaptar y optimizar tu web a dispositivos móviles

Responsive web design, mobile first, experiencia de usuario, cambios en el algoritmo de Google...y muchas cosas más a tener en cuenta al diseñar y desarrollar nuestra web o la de nuestros clientes

Transcript

1. IMPORTANCIA DE ADAPTAR Y OPTIMIZAR TU WEB A DISPOSITIVOS MÓVILES Imanol Terán · @itermar · imanolteran.com
2. ¿QUIÉN SOY?
3. ¿QUIÉN SOY? ๏ Desarrollador Frontend ๏ Desarrollador iOS ๏ Formador imanolteran.com @itermar itermar@gmail.com
4. widdiapps.com @widdiapps info@widdiapps.com ȍ widdiapps ๏ Web ๏ iOS ๏ E-Commerce ๏ Publicaciones Digitales ๏ Formación ¿QUIÉN SOY?
5. PROGRAMA ๏ INTRODUCCIÓN ๏ TRÁFICO MÓVIL EN PÁGINAS WEB ๏ INFLUENCIA DE LA ADAPTACIÓN A MÓVILES ๏ PUNTOS IMPORTANTES
6. INTRODUCCIÓN ¿DE QUÉ VA TODO ESTO?
7. INTRODUCCIÓN ¿QUÉ ES UNA WEB RESPONSIVE?
8. ¿QUÉ ES UNA WEB REsPONSIVE? ๏ Un desarrollo —> Múltiples dispositivos ๏ Es una web “viva” e inteligente ๏ Se adapta al dispositivo ๏ Busca una mejor UX ๏ Lo importante es el contexto
9. ORIGEN ๏ Consorcio W3C, 2008 ๏ ONE WEB: Una web para todos y accesible desde cualquier dispositivo
10. CARACTERÍSTICAS DE UNA WEB RESPONSIVE ๏ Estructura de la página (layout) fluida ๏ Evita contenidos duplicados y redirecciones ๏ Tiempo de desarrollo menor —> Menor corte
11. INTRODUCCIÓN IMPORTANCIA DE TENER UNA WEB ADAPTADA A MÓVILES
12. IMPORTANCIA DE TENER UNA WEB ADAPTADA A MÓVILES ๏ Cada vez más dispositivos ๏ Estamos siempre conectados ๏ Tarifas 3G/4G ๏ Desktop, Tablet, Smartphone… ๏ Infinidad de resoluciones diferentes
13. 7,000,000,000 de personas en el mundo
14. 7,000,000,000 de móviles en el mundo
15. 3 horas al día (de media) utilizando dispositivos móviles
16. 15 % de ese tiempo se dedica a navegación web
17. 30 minutos al día navegando desde el móvil
19. INTRODUCCIÓN ¿ESTÁ MI WEB ADAPTADA?
20. ¿Está mi web adaptada? ๏ Redimensionar el navegador ๏ Visitar desde diferentes dispositivos ๏ Test de Google: https://www.google.com/webmasters/tools/mobile-friendly/
21. INTRODUCCIÓN CASOS REALES
22. EL CORREO.com
30. WIDDIAPPS.com
38. TRÁFICO ¿QUÉ ES EL TRÁFICO DE UNA PÁGINA WEB?
39. TRÁFICO DE UNA WEB
41. ๏ Número de visitantes ๏ Número de páginas que visitan ๏ Tiempo que “se quedan” ๏ Horas “punta” ๏ Páginas más populares ¿QUÉ ES EL TRÁFICO DE UNA WEB?
42. DATOS Y ESTADÍSTICAS
43. 69 % creció el tráfico móvil en 2014
44. 30x tamaño total de Internet en el año 2000 1 exabite de tráfico total en 2000. 30 exabytes de tráfico >>MÓVIL<< en 2014
45. +50% se lo llevan los vídeos Acabó 2012 con el 50% y ahora está en el 55%
46. 497,000,000 nuevos dispositivos y conexiones móviles en 2014 88% fueron dispositivos
47. +20% velocidad de conexiones móviles De 1,387 kbps en 2013 a 1,683 kps de media en 2014
48. +45% cantidad media de tráfico generado / smartphone 819 MB mensuales de media en 2014 por los 563 MB de 2013
49. PREDICCIONES PARA 2019
50. 1.5 dispositivos móviles per capita 819 MB mensuales de media en 2014 por los 563 MB de 2013
51. 7,600,000,000 de personas en el mundo
52. 11,500,000,000 de dispositivos móviles en el mundo
53. 68% del tráfico total será 4G con “sólo” el 26% de conexiones
54. 72% del tráfico será generado por vídeos
55. http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html
56. INFLUENCIAS EN EL TRÁFICO
57. ๏ Bajada de tráfico ๏ Bajada de la >>CALIDAD<< del tráfico ๏ Visitantes poco contentos ๏ Probable menor CONVERSIÓN ๏ Imagen de marca dañada INFLUENCIAS EN EL TRÁFICO SI NO ADAPTAS TU WEB
58. FORMAS DE MEDIRLO
60. ๏ Número de visitantes ๏ Procedencia ๏ Tipo de dispositivo desde el que nos visitan ๏ Zona geográfica ๏ Horarios ๏ Tiempo que se quedan ๏ ……………..y mucho mucho más ¿QUÉ SE PUEDE MEDIR CON ANALYTICS?
61. TOMA DE DECISIONES
62. BUSCAR / ESTUDIAR
63. ANALIZAR / DECIDIR
64. ACTUAR / PROBAR
65. CAMBIAR / ADAPTAR
66. OPTIMIZAR
67. VALE, ¿QUÉ PASA SI ADAPTO (O NO) MI WEB? INFLUENCIA
68. VENTAJAS
69. BUENA EXPERIENCIA DE USUARIO
70. ๏ Sensación de normalidad ๏ Todo está en su sitio, a mano ๏ No hay nada que sobre ๏ Botones grandes BUENA EXPERIENCIA DE USUARIO
71. ๏ Carga rápida de página y contenidos ๏ Funciones y contenido en base al contexto ๏ Localización ๏ Llamar directamente pulsado un teléfono BUENA EXPERIENCIA DE USUARIO
72. NO PASA NADA POR HACER SCROLL estamos acostumbrados
73. IMAGEN DE MARCA
74. ๏ Marca que se preocupa por el bienestar de sus usuarios ๏ Impresión de estar a “la última” IMAGEN DE MARCA
75. UN SOLO DESARROLLO
76. ๏ Más trabajo de planificación y diseño ๏ Ligeros retoques para nuevas resoluciones ๏ Centramos todos nuestros esfuerzos en un único proyecto DISEÑO Y DESARROLLO ÚNICA
77. ๏ Introducimos contenido una vez, no duplicamos ๏ No confundimos al usuario ¿qué web es “la buena”? ๏ Menor coste de mantenimiento ๏ Más versatilidad y capacidad de movimientos DISEÑO Y DESARROLLO ÚNICA
78. INCONVENIENTES
79. MALA EXPERIENCIA DE USUARIO
80. ๏ Contenido a veces ilegible ๏ Formatos no ajustados a la resolución de su pantalla ๏ Botones imposibles de pulsar ๏ Navegación lenta MALA EXPERIENCIA DE USUARIO
81. ๏ Elementos o información a la que no pueden acceder (mouse hover) ๏ Sensación de incomodidad al navegar ๏ Lentitud al cargar contenidos ๏ Dificultad para encontrar lo que se busca MALA EXPERIENCIA DE USUARIO
82. 79% de usuarios abandonan
83. PENALIZACIONES EN BÚSQUEDAS
84. 21 de Abril
86. ¿QUÉ DICE GOOGLE? ๏ Cambios en su algoritmo de búsqueda ๏ Afecta a webs no adaptadas a móvil ๏ Solo en búsquedas realizadas a través de móvil
87. ¿QUÉ >>NO<< DICE GOOGLE? ๏ Tu web va a verse relegada a la 99999999º página de resultados ๏ Tu web va a desaparecer de Google si no la adaptas ๏ Si desapareces ahora, nunca volverás a estar
88. PASOS A SEGUIR 1. Comprobar si tu web está adaptada ๏ Busca tu web en Google ๏ Si lo está, ! ๏ Si no lo está, , al paso 2
90. PASOS A SEGUIR 2. Realiza el test de Google para ver cómo solucionarlo
91. TENER VARIAS VERSIONES
92. ๏ Contenido duplicado ๏ Costes de diseño, desarrollo y actualización ๏ Pérdida de tiempo y dinero ๏ Imposible adaptarse ๏ La tecnología corre más deprisa que nosotros TENER VARIAS VERSIONES DE LA WEB
93. A TENER MUUYYYY EN CUENTA PUNTOS IMPORTANTES
94. MOBILE FIRST
95. MOBILE FIRST ๏ Una filosofía, es la forma en la encaramos un proyecto web ๏ Diseñar “de pequeño a grande” ๏ Evitamos líos
96. CONTENIDO ๏ Inventario de información (listado) ๏ Identificar todo aquello que sea prescindible ๏ Reubicarlo o, cuando sea posible, eliminarlo ๏ Sólo en móvil ๏ En el conjunto de la web
97. DISEÑO ๏ Empezar también pensando en el móvil ๏ Más sencillo ๏ Te hace replantear el contenido ๏ A medida que el ancho crece y los elementos descuadran, añadir breakpoints
98. BREAKPOINTS ๏ Puntos de ruptura ๏ Especificamos qué pasa o qué cambia en ese punto y a partir de él
99. ventajas ๏ Comodidad ๏ Sentido común, más sencillo añadir elementos que quitarlos
100. PROGRESSIVE ENHANCEMENT VS GRACEFUL DEGRADATION
101. PE vs GD ๏ Solucionar diferencias entre navegadores ๏ Cada uno interpreta HTML, CSS y Javascript de forma diferente ๏ Pueden combinarse
102. ๏ Diseñar pensando en navegadores antiguos ๏ Utilizar CSS muy básico ๏ Prioridad que el contenido sea accesible PROGRESSIVE ENHANCEMENT
103. ๏ Después complicamos el diseño todo lo que queramos ๏ Los navegadores nuevos lo soportarán, a los antiguos no les afecta ๏ Permite mantener un producto de base accesible a navegadores antiguos PROGRESSIVE ENHANCEMENT
104. ๏ Enfoque contrario, primero pensamos en navegadores más actuales ๏ Calcamos el diseño, con todos los efectos y animaciones que queramos ๏ Después, probamos en navegadores antiguos ๏ A veces, necesario Javascript GRACEFUL DEGRADATION
105. ๏ Más cómodo PE ๏ Aunque salgan características nuevas, añadir al final ¿CON CÚAL ME QUEDO?
107. ¿QUÉ VAS A HACER?
108. RESPONSIVE WEB DESIGN
109. RESPONSIVE WEB DESIGN ๏ Técnica para crear sitios web >>adaptables<< ๏ El diseño y el contenido, se adaptan a las características del dispositivo ๏ Principalmente, al tamaño
110. BUENAS PRÁCTICAS ๏ No usar estilos in-line ๏ No pretender que se vea igual en todos navegadores y dispositivos ๏ No diseñar para una plataforma o dispositivo concreto
111. BUENAS PRÁCTICAS ๏ No abusar de Javascript —> CSS es tu amigo ๏ No diseñar usando tablas ๏ Unidades de medida relativas: %, em, rem…
112. RESPONSIVE GRID LAYOUTS & FRAMEWORKS ๏ Nos proporionan mucha agilidad ๏ Sistemas de columnas, tipografías, botones, media- queries, resets… ๏ Skeleton http://getskeleton.com ๏ 320 and up https://github.com/malarkey/320andup/ ๏Bootstrap http://getbootstrap.com ๏Foundation http://foundation.zurb.com
113. PLANTILLAS ๏ Nos facilitan enormemente el trabajo ๏ Modelos estándar, ya probados ๏ Podemos empezar a probar rápidamente ๏ Interesante personalizar para diferenciarnos
114. http://themeforest.net
115. http://html5blank.com PLANTILLAS WORDPRESS RESPONSIVE http://themble.com/bones/
116. CSS3 MEDIA QUERIES Son consultas de las características del medio donde se está visualizando una web y nos sirven para definir estilos condicionales, que solo se aplicarán en caso que esa consulta del medio sea satisfactoria.
117. CSS3 MEDIA QUERIES ๏ Sirven para definir estilos diferentes para distintos tamaños de pantalla ๏ Ofrecen muchas posibilidades, más de las que se aprovechan hoy en día ๏ Primera estructura condicional en lenguaje CSS: “Si ocurre esto, haz tal cosa”
118. CSS3 MEDIA QUERIES ๏ Si la pantalla del usuario tiene estas características, entonces aplica estos estilos ๏ Si se imprime el documento en la impresora, aplica estos estilos ๏ Si la pantalla del dispositivo tiene estas dimensiones y además está situado en posición horizontal, aplica este CSS
119. CSS3 MEDIA QUERIES @media (min-width: 500px) { h1{ margin: 1%; } .estiloresponsive{ float: right; padding-left: 15px; } }
120. IMÁGENES RESPONSIVE ๏ Imágenes flexibles ๏ max-width: 100%; o width: 100%; ๏ height: auto; ๏ Cargar diferentes imágenes según resolución ๏ Adaptive images http://adaptive-images.com ๏ Picturefill https://github.com/scottjehl/picturefill
121. UI Y UX EN DISPOSITIVOS MÓVILES
122. ui - INTERFAZ DE USUARIO ๏ Botones ๏ Navegación ๏ Menús ๏ Layout
123. ui - INTERFAZ DE USUARIO ๏ No recargar el diseño ๏ Presentar la información imprescindible ๏ Tamaños tirando a grande ๏ Tener en cuenta diferentes gestos y toques posibles hoy en día
124. UX - EXPERIENCIA DE USUARIO ๏ Intentar evitar errores del usuario ๏ Interacciones claras y sencillas ๏ Huir de acciones innecesarias ๏ Conseguir que disfrute, que quiera quedarse en nuestra web
125. OPTIMIZAR TODO EL SITIO PARA MÓVIL
126. EVITAR ZOOM
127. EVITAR “VERSIÓN COMPLETO”
128. NO ELIMINAR CONTENIDO
129. CONEXIONES INESTABLES
130. TIEMPOS DE CARGA
131. TIEMPOS DE CARGA ๏ El usuario no está dispuesto a esperar ๏ Si se va, no vuelve ๏ Intentar reducirlo lo máximo posible
132. TIEMPOS DE CARGA 10 segundos
133. TIEMPOS DE CARGA 5 segundos
134. TIEMPOS DE CARGA 3 segundos
135. TIEMPOS DE CARGA ๏ Google también nos proporciona herramienta para medirlo https://developers.google.com/speed/pagespeed/insights/?hl=es
136. GRACIAS Imanol Terán Maruri @itermar itermar@gmail.com