Save 37% off PRO during our Black Friday Sale! »

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

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

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

April 30, 2015
Tweet

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

  18. None
  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

  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. WIDDIAPPS.com

  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. TRÁFICO ¿QUÉ ES EL TRÁFICO DE UNA PÁGINA WEB?

  39. TRÁFICO DE UNA WEB

  40. None
  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

  59. None
  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

  85. None
  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
  89. None
  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?
  106. None
  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