Chrome: simulando dispositivos

Cuando se diseña una página web, una de las preguntas habituales, es cómo se verá en otro equipo diferente. En la época donde el PC reinaba en solitario, esto se traducía en comprobar la compatibilidad de la página con los diferentes navegadores (lo que podía ser un auténtico dolor de muelas). En la actualidad, donde los smartphones se han convertido en el medio de acceso más habitual, necesitamos comprobar el aspecto de nuestro diseño en multitud de dispositivos.

Existen soluciones, Microsoft ofrece de forma gratuita una página donde introduciendo la URL podemos ver qué aspecto tendrá dicha página en diversos equipos y navegadores. El resultado es una serie de capturas de pantalla que nos permitirán comprobar que tal se ve nuestra página.

De hecho, la tecnología detrás de este servicio es BrowserStack, que permite probar sobre dispositivos físicos reales, tanto móviles como de escritorio. Sin embargo, en este caso, el servicio tiene un coste que variará en función de las prestaciones que se deseen.

La versión beta de Chrome, que se puede descargar en este enlace, también introduce opciones de este tipo, pero en este caso, simulando el aspecto directamente en nuestro navegador, lo que puede ser más que suficiente para la mayoría de nuestros trabajos web.

Para acceder a estas opciones, debemos ir a la opción Más herramientas y seleccionar Herramientas del desarrollador o usar el atajo de teclado correspondiente. Con ello, nos aparecerá a la derecha, el conjunto de herramientas, extremadamente útiles para inspeccionar elementos, consola de Javascript,  etc. En este caso, únicamente nos vamos a centrar en la opción de dispositivos.

2016-06-07_1015

Seleccionando dicha opción, veremos la página tal como quedaría en diferentes dispositivos. Por ejemplo, vemos qué tal luce nuestro blog en galaxy S5, tanto en vista vertical como en horizontal.

2016-06-07_1018

Nos sugiere diversos dispositivos y con la opción Edit, nos vamos a un menú donde aún aparecen más opciones de selección.

2016-06-07-1023
2016-06-07_1026

En este menú no solo tenemos un abanico mucho más amplio de dispositivos, sino que podemos definir un dispositivo editando directamente sus características (resolución, user agent, densidad de la pantalla y tipo de dispositivo).

2016-06-07_1027

Finalmente, otra opción extremadamente interesante es definir la velocidad de los datos. Cuando hablamos de dispositivos móviles navegando desde redes móviles, es crítico conocer qué rápido se cargará la página, por tanto, eligiendo las velocidades a las que simulará la transferencia, podremos hacernos a la idea, de lo fluida que será la visualización para un usuario utilizando 2G, 3G, WiFi, etc.

2016-06-07_1028

Espero que estas opciones de Chrome os puedan resultar de utilidad.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s