Responsive viewer: la extensión que te permite comprobar cómo se ve una web en distintos tipos de pantalla

Si eres diseñador, programador, o simplemente estás entrando en el mundo del UX/UI, entonces no te podés perder de esta poderosa herramienta que te ayudará a crear productos, y experiencias digitales que se adapten a diferentes resoluciones de pantalla.

Esta herramienta es una extensión para Google Chrome con la que tenemos la oportunidad de ver diferentes resoluciones de pantalla en un mismo lugar,  la cual te permitirá comprobar cómo se verá, por ejemplo, una web o app que estás diseñando en diferentes tipos de dispositivos: una computadora, un Smartphone o una Tablet, y de esa manera saber cómo es la experiencia en distintos dispositivos.

Baby steps para mejorar en diseño y desarrollo

Una vez que hayamos instalado la extensión, veremos que aparece el icono a la derecha de la barra de direcciones del navegador. Al pulsarlo, automáticamente se abrirá una pestaña nueva en la que podremos cargar diferentes tipos de dispositivos sobre la web que estábamos visitando.

En la parte superior podremos colocar una página web diferente, y el apartado importante lo encontraremos en la barra lateral izquierda. Aquí podremos activar o desactivar diferentes modelos de smartphones.

En este listado nos encontraremos diferentes resoluciones de pantalla, entre las cuales se encuentran la mayoría de los modelos de iPhone y varios modelos de Android, como Galaxy, Note o Pixel.

En la parte inferior izquierda podemos modificar el nivel de zoom y también indicar si queremos simular que el dispositivo está en modo horizontal o vertical.

Por defecto vienen cargados con estos modelos de smartphones, pero si hacemos clic en el “+” que aparece en la parte superior derecha podremos crear nuestras propias resoluciones personalizadas.

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. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s