Todos hemos estado allí…
Un sitio web que está diseñando se ve muy bien en su computadora portátil, teléfono y tableta. Pero luego alguien te muestra una captura de pantalla de cómo se ve el sitio en su dispositivo y solo quieres llorar. Lo que probablemente sucedió es que están en una pantalla con un punto de ruptura para el que no probaste tu diseño.
El diseño receptivo es una obviedad en este momento. Sus diseños deben verse bien en cualquier pantalla. Si eres un usuario de Divi, ya tienes un conjunto de herramientas prácticas para ayudarte a diseñar de forma receptiva . Sin embargo, siempre es una buena idea verificar en la mayor cantidad de ventanas posibles. Su mejor apuesta es tener una ventana con Divi Builder y otra con una herramienta receptiva que pueda actualizar regularmente.
Algunas personas prefieren diseñar «móvil primero», otras lo hacen simultáneamente y otras primero diseñan escritorio y luego se ajustan a pantallas más pequeñas. Independientemente de su proceso, debe tener las herramientas adecuadas para verificar qué tan receptivo es su sitio.
Es por eso que hemos elaborado esta lista con algunas de las herramientas y sitios de prueba de diseño de sitios web receptivos más prácticos. Pruébelos y vea con cuál se siente más cómodo.
Sumerjámonos.
Suscríbete a nuestro canal de Youtube
La primera herramienta de prueba receptiva de la lista se encuentra dentro de su navegador Chrome. La misma herramienta que usa para inspeccionar el código de un sitio también tiene una función para probar los tamaños de pantalla y las ventanas gráficas. Haga clic derecho en cualquier sitio web y haga clic en ‘Inspeccionar’. Una vez que se abra la ventana de inspección, verá el icono de los dispositivos junto al botón denominado «Elementos». Cuando hace clic en el botón de dispositivos, su pantalla muestra el sitio web en el que se encuentra en diferentes puntos de interrupción.
Puede ingresar un tamaño específico o simplemente agarrar y arrastrar la esquina de la ventana para cambiar el punto de interrupción manualmente. Esto es excelente para verificar cómo su diseño se adapta a las diferentes ventanas gráficas.
Herramienta de prueba receptiva
Responsive Test Tool es como la mayoría de los sitios web de pruebas receptivas, puede ingresar la URL de la página que desea probar en una barra de búsqueda en la parte superior de la pantalla. Esta herramienta en particular tiene una larga lista de tamaños de dispositivos preestablecidos para elegir. Si necesitas otra talla, puedes elegir las medidas de talla personalizada. Cuando desee verificar un cambio en el diseño, simplemente haga clic en el botón ‘Verificar’ para volver a cargar. Hay un botón para alternar las capacidades de desplazamiento en la ventana de prueba y un botón de ‘rotar’ para verificar los diseños verticales y horizontales.
El desarrollador detrás de esta herramienta también creó un sistema de cuadrícula para sitios web receptivos. Lo encontrarás en el icono de la bombilla en la parte superior derecha.
Prueba esta herramienta
Comprobador de diseño receptivo
Responsive Design Checker es un sitio con varios tamaños de pantalla preestablecidos y una opción de tamaño personalizado. Lo que le falta a esta herramienta en comparación con la herramienta anterior es la regla numerada en la parte superior de la pantalla y un botón de rotación. Lo que tiene en común es que el botón ‘Ir’ funciona de la misma manera, simplemente haz clic en él cuando hayas realizado un cambio en el diseño y quieras comprobar los resultados.
Prueba esta herramienta
Modo de diseño
Design Modo es un creador de sitios web y correos electrónicos con una herramienta de prueba receptiva gratuita como parte de su sitio. Esta herramienta tiene todas las cosas que tienen las dos herramientas anteriores más un botón de arrastre para ver cómo cambia el diseño a medida que la ventana gráfica se encoge y se expande. Por supuesto, también funciona como un dispositivo de generación de anuncios y prospectos para sus servicios principales. El único inconveniente es que las medidas que muestra la herramienta son por resolución, no por la ventana gráfica. Esto puede ser un poco confuso.
Prueba esta herramienta
Mosca de pantalla
Screenfly es otro sitio web con las mismas funciones de prueba de respuesta que los ejemplos anteriores, pero los ajustes preestablecidos están un poco desactualizados. El último preajuste de iPhone es el 7X. Sin embargo, la herramienta aún funciona bien y tiene una función de tamaño personalizado, botones de rotación y actualización y una palanca de desplazamiento.
Prueba esta herramienta
responsable
Responsinator sigue siendo una de las aplicaciones de prueba de diseño web receptivo más populares, probablemente porque se ve muy bien. Cuando agrega una URL, muestra el sitio en varios dispositivos móviles diferentes en diseños verticales y horizontales. Esta herramienta es práctica para verificaciones rápidas en los dispositivos más comunes, pero es limitada si desea verificar todos los puntos de interrupción.
Prueba esta herramienta
¿Soy receptivo?
Am I Responsive es similar a Responsinator en que muestra el sitio de prueba en un número determinado de dispositivos. La ventaja de esta herramienta es que puede capturar los resultados y utilizarlos para su cartera. Además, cada pantalla se puede desplazar de forma independiente.
Prueba esta herramienta
afinador de píxeles
Pixeltuner es un sitio similar a Responsinator. La herramienta muestra solo 6 tamaños de pantalla, pero son una buena selección. Con estos seis tamaños, puede estar bastante seguro de haber cubierto todas las bases. Los únicos que faltan son los tamaños de pantalla más grandes por encima de 1500 píxeles.
Prueba esta herramienta
Probador de diseño web receptivo
Responsive Web Design Tester no es un sitio web, es una extensión del navegador. Lo encontrará en la extensión de su navegador o en la biblioteca de complementos. El siguiente enlace es para la extensión de Chrome, pero la herramienta también funciona para Safari y Firefox. Cuando hace clic en el ícono de extensión, puede elegir de una lista de ajustes preestablecidos y luego el sitio se abre en una nueva ventana con el tamaño de ventana que seleccionó. Los ajustes preestablecidos están un poco desactualizados, pero puede agregar nuevos dispositivos y crear sus propios grupos preferidos.
Prueba esta herramienta
Terminando nuestra lista Herramientas y sitios de prueba de diseño receptivo
Cuando diseña con Divi , tiene la opción de ajustar sus diseños para pantallas de escritorio, tabletas y teléfonos. Las opciones dentro de Divi son súper prácticas y pueden ayudar a que su diseño se vea perfecto para cualquier tamaño de pantalla. Pero siempre le conviene utilizar una herramienta adicional que admita sus diseños Divi receptivos.
¿Qué herramienta usas? ¿Lo mencionamos aquí? Elegimos las herramientas de esta lista porque todas son prácticas y fáciles de usar. Algunos son mejores que otros y el que necesita depende de cuán complejo sea su diseño. Pruébalos hasta que encuentres tu favorito y cuéntanos cuál es.
Imagen destacada a través de aurielaki / shutterstock.com