7 herramientas gratuitas para probar diseños receptivos
Cada sitio web debe diseñarse con un enfoque receptivo. Para mantenerlo en el camino correcto, realizando pruebas temprano y con frecuencia, con cualquiera de estas herramientas de prueba receptivas, se asegurará de que su diseño se vea bien en todos los navegadores y en todos los tamaños de ventanas.
Cada sitio web moderno necesita un diseño receptivo . Esto requiere más esfuerzo, pero el resultado final vale la pena.
De hecho, recomiendo probar sus ideas con herramientas de diseño receptivas para ver cómo se ve su sitio en cada etapa. Puede buscar problemas de usabilidad en diferentes tamaños de pantalla, todo desde una herramienta práctica.
Y estas herramientas gratuitas son mis mejores elecciones para pruebas receptivas ya que todas son súper fáciles de usar. Lo mejor de todo es que son compatibles con muchos tamaños de dispositivo para que pueda tener una buena idea de cómo debería verse su diseño desde teléfonos inteligentes a computadoras de escritorio.
1. XRespond
los Aplicación XRespond se llama a sí mismo un "laboratorio de dispositivos virtuales" y yo diría que es bastante acertado.
Con este sitio, puede obtener una vista previa de cómo se ve un sitio web en una variedad de dispositivos. El sitio funciona en un estilo horizontal largo donde tiene que desplazarse hacia los lados para ver todos los formatos de pantalla.
La etiqueta que se encuentra encima de cada pantalla le indica el tamaño exacto y el dispositivo con el que coincide. Además, en el menú desplegable hay una amplia selección de teléfonos inteligentes, tabletas y computadoras portátiles para probar dispositivos específicos.
Ese menú desplegable incluso admite una configuración de ancho / alto personalizada si desea ver cómo aparece su sitio en monitores específicos. Una excelente herramienta de prueba para un diseño receptivo y admite una gran variedad de estilos de dispositivo.
2. Responsinador
Una aplicación similar que también podría disfrutar es Responsinador .
En lugar de utilizar una barra de desplazamiento horizontal, este sitio muestra una vista previa de cada dispositivo en una columna vertical. De esta forma, puede desplazarse hacia abajo por cada dispositivo y obtener una vista previa del sitio en cada uno.
Los dispositivos incluyen los iPhones más comunes y los dispositivos Android Nexus, ambos con vistas previas de retrato y paisaje. También encontrará vistas previas de dispositivos iPad también en vertical y horizontal.
Otra característica interesante es el cambio entre HTTP y HTTPS. Responsinator ofrece ambos tipos para obtener una vista previa de los sitios según la URL que ingrese. Se combinará automáticamente con cualquier sitio que previsualice para evitar errores de SSL.
3. Verificador de diseño receptivo
¿Necesita comprobar rápidamente si un sitio web realmente responde? Entonces intenta usar esto Responsive Design Checker hecho específicamente para tamaños de pantalla personalizados.
Una vez que ingresa una URL, tiene control total sobre el espacio de prueba receptivo. Puede modificar el ancho / alto como lo desee e incluso usarlo para que coincida con ciertas proporciones de pantalla si usa un herramienta de relación de aspecto .
En la barra lateral encontrará una tonelada de tamaños de pantalla predefinidos para dispositivos comunes como tabletas Nexus, Kindles e incluso teléfonos más nuevos como Google Pixel.
El sitio también admite pantallas de gran tamaño con monitores de escritorio de hasta 24 "de ancho . Sorprendentemente, estos tamaños grandes funcionan bien incluso en monitores pequeños porque el tamaño del panel de vista previa se basa en la relación, no en el ancho total del píxel.
Por lo tanto, si está luchando para probar monitores de 1920px en la pantalla más pequeña de su MacBook, esta herramienta bien vale la pena marcarla.
4. Prueba de Google Mobile
Google está lleno de excelentes herramientas para webmasters y sus Prueba amigable para dispositivos móviles es uno de esos ejemplos.
Esta herramienta de prueba no es realmente una vista previa y no ayuda a detectar errores de UI. En cambio, es una herramienta móvil dedicada para identificar problemas dentro de su sitio en el móvil.
Una vez que la prueba se ejecute, aprobará o fallará como un sitio optimizado para dispositivos móviles. Esto es un poco demasiado genérico para los diseñadores, pero Google ofrece sugerencias basadas en áreas problemáticas y elementos de página que podrían mejorar.
Mantenga esto guardado como una herramienta de prueba móvil confiable. No es un recurso completo para pruebas receptivas, pero es un gran lugar para recopilar información y proviene quizás de la compañía más autorizada en la web.
5. Herramienta receptiva de Matt Kersley
Diseñador y desarrollador Matt Kersley lanzó su propia libre herramienta de prueba para diseños receptivos. Este es mucho más simple que otros y no tiene muchos lujos.
En su lugar, es una previsualización de sitio en línea simple con 5 anchos fijos: 240px, 320px, 480px, 768px, 1024px.
Los paneles de vista previa sí cuentan con barras de desplazamiento para que pueda moverse a través del contenido sin esfuerzo. Sin embargo, no puede hacer clic en ningún enlace o navegar por otras páginas dentro de los paneles, por lo que esto es realmente lo mejor para probar páginas singulares.
Pero para una herramienta simple que hace el trabajo, funciona muy bien y es una de las pocas herramientas de prueba que ofrece un ancho de 240 píxeles por defecto.
6. ¿Soy receptivo?
Probablemente no necesite esta herramienta si está buscando una precisión de píxel perfecto.
En cambio el ¿Soy receptivo? El sitio web funciona mejor para realizar comprobaciones rápidas y vistas previas en algunos tipos de dispositivos comunes.
Simplemente ingrese la URL de un sitio web y se cargará en cuatro paneles de vista previa de dispositivo: un teléfono inteligente, tableta, computadora portátil y computadora de escritorio. Estos no son a escala, por lo que solo estás viendo el sitio como una proporción.
Pero esto es realmente genial para tomar capturas de pantalla de su sitio para mostrar cómo se ve en varios dispositivos. La representación es precisa para escalar y depende de su navegador para una representación adecuada.
Además, esta herramienta te permite ejecutar direcciones de host locales para que puedas incluso ver los proyectos que estás construir localmente en tu ordenador.
7. Test responsivo de Designmodo
Otra herramienta que realmente me gusta es la Probador de diseño web sensible creado por Designmodo. Esta herramienta gratuita nuevamente le permite obtener una vista previa de un sitio en su navegador basado en ciertos anchos.
Pero la única adición genial a esta herramienta es la configuración de página basada en la cuadrícula. Puede consultar su página para obtener puntos de píxeles e incluso estudiar la cuadrícula de la página usando esta aplicación web.
Junto con los anchos de dispositivo predefinidos también puede arrastrar el panel de vista previa para adaptarse a los anchos de pantalla que está probando. Tiene entradas para el ancho / alto si necesita ingresar tallas manualmente también.
Pero cada ícono de dispositivo en la esquina superior derecha le permite seleccionar entre docenas de tamaños de pantalla comunes, haciendo que esta herramienta sea perfecta para verificar cualquier dispositivo que pueda imaginar.
