Seleccionar página

9 herramientas para pruebas de Diseño Web Responsive

Conoce diferentes herramientas para hacer pruebas de diseño web responsive y ofrecer al usuario la mejor experiencia en tu web.

Por Jefferson M.

Dic 8, 2020
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: 6 minutos

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.

9 herramientas para pruebas de Diseño Web Responsive

«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.

pruebas de diseños web responsive

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.

pruebas de diseños web responsive

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.

Pruebas de diseño web responsive - Free responsive web tool.

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.

pruebas de diseños web responsive

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.

9 herramientas para pruebas de Diseño Web Responsive

¿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á.

¿Quieres aprender a usar Divi de manera profesional?

Conoce nuestro contenido premium y comienza hoy mismo a llevar tu sitio web o el de tus clientes a otro nivel

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web's fantásticas con Divi

Post relacionados:

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

🖐 ¡RECIBE UN TIP NUEVO CADA DÍA ! 😎

Suscribiendote a esta lista de correo, recibirás cada día un tip / recurso / mini-tuto completamente gratuito sobre diseño web con WordPress y Divi. Además recibirás nuestras ofertas únicamente cuando las publiquemos.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros Tips Diarios