Las Webs Responsive también existen

Responsive-Design

Las Webs Responsive también existen

El tráfico web desde los dispositivos móviles es cada día mayor. Esto no es algo nuevo pero, aún así, seguimos viendo que las mediciones de analítica siguen estando centradas en los ordenadores propiamente dichos.

Hoy os quiero hablar de una serie de herramientas y consejos que podemos utilizar para conseguir tener la misma precisión en un navegador móvil, que en un navegador de escritorio.

Google Chrome Dev Tools

 

A la hora de comenzar un desarrollo, yo siempre recomiendo utilizar un simulador de dispositivos móviles para agilizar el proceso. El que más cómodo me ha parecido es el que viene por defecto en las últimas versiones de Chrome. Para acceder a él, basta con abrir las herramientas para desarrolladores (F12 en Windows y Linux y cmd+alt+j en Mac) y pulsar sobre el icono del dispositivo móvil que aparece en la esquina superior izquierda *1.

Google Dev Tools IMG

Con esto ya hemos activado la simulación. Podremos escoger el modelo de dispositivo específico en el desplegable de color naranja que aparece en la parte superior *2.

Es habitual que las webs tengan múltiples layout, en función de la resolución usada (los principales suelen ser Tablet y móvil), por ello, es importante que los revisemos todos.

Otra funcionalidad que nos ofrece, es poder simular la velocidad de internet (se hace desde el desplegable azul que aparece en la parte superior *3) pudiendo bajar hasta GPRS. Es importante saber cuándo se va a lanzar nuestro etiqueta de analítica, pixel de remarketing, herramienta de personalización, etc. Para poder comprobar esto con exactitud, es necesario analizar, por lo menos, con una red 3G, en qué momento de la carga de la web se lanza y cuánto tiempo ha pasado. Los dos motivos principales para hacer esto son:

  • Saber si podemos perder parte de medición a causa de la lentitud de carga
  • Comprobar si es necesario retirar alguna herramienta para ciertos usuarios debido a que empeoran la experiencia de usuario
TIP: Los navegadores móviles suelen permitir el acceso a conocer que tipo de conexión tiene el dispositivo (3G, 4G, Wifi, etc.) a través del atributo navigator.connection.type

Chrome Remote Debugging

 

Una vez que hemos hecho la implantación básica en el navegador, se debe comprobar que en un dispositivo real no se producen errores. Para ello, una herramienta que podemos usar es el Chrome Remote Debugging. Lo que nos permite esta funcionalidad de Chrome, es poder tener accesible las Chrome Dev Tools para el navegador Chrome del dispositivo móvil. Esto se traduce en que podremos insertar código JavaScript a través de la consola, observar las cookies almacenadas, ver posibles fallos y comprobar qué peticiones está haciendo.

En la documentación de Google podréis encontrar cómo se debe realizar el set-up para poder usar la herramienta. Como resumen:

  • Activar la opción USB Debugging en el móvil
  • Conectar el dispositivo al ordenador
  • Acceder en el ordenador a chrome://inspect desde un navegador Chrome
  • Aceptar el mensaje que nos aparecerá en el móvil
  • Inspeccionar la pestaña que deseemos del dispositivo móvil

Android Remote Debugging IMG

Lo anterior aplica para dispositivos Android. En el caso de dispositivos iOS Safari ofrece una funcionalidad similar. En el enlace anterior podéis encontrar cómo realizar dicha configuración.

Charles Proxy

 

Aunque tenga nombre de señorito inglés, esta herramienta no tiene nada de modosita y nos va a ser de mucha utilidad para ver qué está ocurriendo en dispositivos que no nos permiten analizar sus comunicaciones de red. Para el que no esté familiarizado con el concepto proxy, una forma sencilla de verlo es como una componente que se pone entre un dispositivo e internet. De esta manera, todo el tráfico entrante y saliente pasará por él. Nos aprovecharemos de esto para poder analizar las peticiones que genera y poder validar así si son correctas o no.

Desde la página de Charles Proxy podréis descargaros el programa y ver la documentación necesaria para su configuración. Los pasos principales a seguir son:

  • Que el dispositivo y el ordenador con el Charles Proxy instalado estén en la misma red
  • Obtener la IP Privada del ordenador
  • Establecer como proxy el dispositivo la IP Privada del ordenador y el puerto configurado en el Charles Proxy (por defecto 8888)

 

Con esto ya veríamos las peticiones salientes del dispositivo en el Charles. Lo único que nos faltaría sería poder observar también las peticiones “https”, para ello tendremos que instalar el certificado del Charles Proxy. Basta con acceder en el dispositivo a esta URL (estando previamente conectado el dispositivo al ordenador), con esto nos saldrá una ventana preguntándonos si deseamos instalar el certificado.

Espero que estos programas os sirvan de ayuda si no los conocíais. Ahora me gustaría saber si en vuestro flujo de trabajo tenéis incorporada otro tipo de herramienta que sea de utilidad.

 

Fuente de la imagen destacada: LoadStorm

No hay comentarios

Envíanos tu comentario

4 × cuatro =

¡Suscríbete a nuestra newsletter mensual Stay Sharp!

Para más información

CONTÁCTANOS