9 herramientas para pruebas de Diseño Web Responsive

En estos tiempos no nos podemos dar el lujo de crear páginas web que no se vean excelente desde donde sea que el usuario pueda acceder. Para checar que todo se ve perfecto en toda clase de dispositivos, no te pierdas esta lista de 9 herramientas para hacer pruebas de diseño web responsive.

Tiempo de lectura estimado: 0 minutos

Índice

Sabemos que tus diseños se tienen que ver bien en todas las pantallas y la experiencia de usuario debe ser óptima, así que desde pruebas complejas hasta chequeos rápidos verás que podrás cubrir todos los detalles. Como sabes, yo uso la extensión de Chrome “Viewport Resizer” para cambiar los tamaños de pantalla, pero en este post quise incluir otras 9 opciones para que ti, de manera que puedas probar y escoger la que más te guste.

Responsive Web Design Tester

Esta herramienta no es una página web sino una extensión para el navegador que podrás encontrar en la Chrome store o las librerías de extensiones de Safari y Firefox.

Para usar esta extensión solo debes hacer clic en el icono de la extensión y escoger desde un menú desplegable de presents, con lo cual se abrirá otra ventana con el tamaño del tipo de dispositivo que escogiste. También podrás agregar dispositivos que no estén en la lista y crear grupos de los mismos para mayor facilidad.

“Inspeccionar sitio” o “Inspeccionar elemento” en el navegador

Esta herramienta está justo en tu navegador, es la misma que usarías para inspeccionar el código de una página web. Allí encontrarás también la función de probar cómo se vería la web en distintos tamaños de pantallas y dispositivos, solo debes hacer botón derecho y hacer clic en “Inspeccionar”. Esta es una de mis herramientas favoritas para pruebas de Diseño Web Responsive.

Con la ventana que se abrirá a la derecha, verás al lado del botón “Elementos” el icono de los dispositivos. Al hacer clic en ese icono, el navegador te mostrará la página web en la cual estás dividida en partes. Podrás verla en la medida por defecto, pero también puedes ampliar la vista hasta la medida que necesitas.

Responsive Test Tool

Esta herramienta es bastante fácil de usar: solo debes ingresar la URL de la página que quieres probar en la barra de búsqueda de la parte superior de la pantalla. Te ofrecerá una lista bastante extensa de dispositivos para escoger, incluso puedes ingresar una medida personalizada si así lo deseas. Cuando quieras revisar un cambio en el diseño, solo debes hacer clic en el botón “Check” y la página se recargará. También podrás ver una cuadrícula y un botón para probar las capacidades de scroll de la web.

Responsive Design Checker

Esta herramienta es similar a la anterior, con la diferencia de que esta no tiene la regla y la herramienta de rotación. De todas formas, podrás ingresar la URL de la web que quieras chequear, seleccionar el dispositivo donde quieres verla y hacer clic en “Go” si realizaste algún cambio y quieres revisar cómo se ve.

Design Modo

Esta herramienta originalmente sirve para construir emails, pero tiene una herramienta gratuita de chequeo de webs responsive como parte de su entorno. Tiene todas las herramientas que las opciones que ya te hemos mostrado, pero adicionalmente tiene un botón de arrastrar para que sepas cómo se verá cuando se expanda o contraiga con la interacción del usuario. Te mostrará la vista de la web según la resolución, no según el dispositivo.

ScreenFly

Aunque su dispositivo más nuevo que verás es el iPhone 7, esta herramienta tiene las mismas opciones que las anteriores que te hemos mencionado. Tiene un ambiente básico y te permitirá ingresar las medidas personalizadas, rotar, scrollear y refrescar cada vez que realices cambios.

Responsinator

Esta es una de las herramientas de revisión de webs y apps responsive más populares que hay. Solo debes añadir la URL para ver el website en distintos tipos de dispositivos, con orientación vertical y horizontal. Es excelente para chequeos rápidos, si necesitas algo más complejo, te recomendamos que sigas revisando las herramientas de esta lista.

Am I Responsive

Esta herramienta para hacer pruebas de diseño web responsive se parece mucho a la anterior, con las ventajas de que puedes scrollear en cada pantalla de forma independientemente y puedes descargar las imágenes para tu portafolio.

Pixeltuner

Es similar a Responsinator, aunque un poco más limitada porque ofrece una buena selección de solo 6 tamaños de pantalla. No encontrarás tamaños de más de 1500 píxeles, pero también es muy buena para chequeos rápidos.

¿Tienes otra herramienta para hacer pruebas de diseño web responsive?

Una de las mejores ventajas de Divi es que permite ajustar los tamaños para PC, tablet y smartphone, lo cual lo hace un tema muy práctico. Sin embargo, si deseas hacer doble check en tu trabajo, estas herramientas te ayudarán en varios niveles.

¿Tienes otra herramienta que te guste usar para hacer pruebas de diseño web responsive? Coméntanos o dinos cómo te fue con las que sugerimos acá.