7 excelentes herramientas para probar sus diseños web receptivos

Todo diseñador web moderno debe conocer los principios del diseño web receptivo: cómo hacer que sus sitios se representen perfectamente en cualquier dispositivo o tamaño de pantalla en el que aparezca. (Si necesita un repaso, consulte nuestro guía profesional para el diseño web adaptable ). 

Pero la teoría es una cosa y la práctica otra. Para asegurarse de que su sitio responda por completo, debe probarlo en diferentes dispositivos.

La mayoría de nosotros, sin embargo, no tenemos el presupuesto para conseguir los cientos de dispositivos físicos que necesitaría para realizar una prueba en el mundo real. ¡Pero no temas! Estas herramientas proporcionan una casa intermedia al permitirle probar sus diseños receptivos dentro de un entorno virtual.



01. Responsinator

Vea cómo se ve su sitio en diferentes ventanas gráficas con Responsinator

Vea cómo se ve su sitio en diferentes ventanas gráficas con Responsinator

La belleza de Responsinator radica en su sencillez. Simplemente escriba la URL de su página web y esta herramienta gratuita basada en navegador le mostrará cómo se muestra su página web en las formas y tamaños de pantalla más populares.

De manera brillante, puede interactuar con su página, hacer clic en los enlaces, escribir en los campos de búsqueda, etc. Tenga en cuenta que estos son dispositivos genéricos, no específicos.

lego star wars 4 de mayo

02. Screenfly

Compruebe cómo aparece su sitio web en diferentes dispositivos, incluidos televisores, con Screenfly

Compruebe cómo aparece su sitio web en diferentes dispositivos, incluidos televisores, con Screenfly

Screenfly es una herramienta gratuita para probar un sitio web en diferentes tamaños de pantalla y diferentes dispositivos. Ha existido durante algunos años, pero sigue siendo popular y hace su trabajo muy bien.

Simplemente ingrese su URL, elija su dispositivo y el tamaño de la pantalla en los menús y verá qué tan bien está funcionando su sitio web. Los dispositivos destacados incluyen computadoras de escritorio, tabletas, televisores y teléfonos inteligentes.

03. Modo de dispositivo de Google DevTools

El modo de dispositivo DevTools emula diferentes dispositivos dentro de Chrome

El modo de dispositivo DevTools emula diferentes dispositivos dentro de Chrome

El modo de dispositivo de DevTools ofrece una manera fácil para que los desarrolladores simulen dispositivos móviles dentro del navegador Chrome. Úselo para saber cómo aparece su sitio en diferentes tamaños y resoluciones de pantalla, incluidas las pantallas Retina.

Incluso puede simular las entradas del dispositivo para el tacto, la geolocalización y la orientación del dispositivo dentro del emulador.

04. Google Resizer

Resizer le ayuda a establecer puntos de corte de Material Design para su sitio receptivo

Resizer le ayuda a establecer puntos de corte de Material Design para su sitio receptivo

Las pautas de diseño de materiales de Google incluyen consejos sobre el uso de puntos de interrupción, cuadrículas receptivas, comportamientos de superficie y patrones de interfaz de usuario. Y el año pasado, lanzó una herramienta gratuita para que pueda ver cómo se ve seguir esa guía en dispositivos del mundo real.

Google Resizer le permite ingresar una URL personalizada y ver un sitio a través de los puntos de interrupción de Material Design para computadoras de escritorio y dispositivos móviles. Si primero desea ver una demostración, haga clic en la barra de direcciones y seleccione ' pesto ' o ' Santuario 'En el menú desplegable.

05. Ghostlab

El enfoque de Ghostlab se centra en las pruebas simultáneas en varios dispositivos y navegadores

El enfoque de Ghostlab se centra en las pruebas simultáneas en varios dispositivos y navegadores

Una aplicación de prueba de sitios web de pago, Ghostlab le permite probar su sitio web en una multiplicidad de navegadores y dispositivos móviles simultáneamente. Comience a probar en un navegador o dispositivo y todos los demás reflejarán sus acciones, ya sea que haga clic en enlaces, seleccione botones, complete formularios o vuelva a cargar la página.

Prácticamente, también puede tomar una captura de pantalla desde cualquier dispositivo, anotarla y arrastrarla y soltarla en su rastreador de errores. Véalo en acción en este video .

06. Pila de navegador

Browser Stack es una herramienta de prueba de pago dirigida a empresas

Browser Stack es una herramienta de prueba de pago dirigida a empresas

Browser Stack es una de las herramientas de prueba más avanzadas y con todas las funciones que existen. La aplicación de pago ofrece acceso a más de 1,000 navegadores móviles y de escritorio con fines de prueba, una lista que se actualiza continuamente, según las tendencias del mercado y las estadísticas de uso basadas en los 36,000 clientes de Browser Stack.

Con usuarios como Twitter, Microsoft, AirBnB y Mastercard, obviamente está haciendo algo bien.

07. CrossBrowserTesting

CrossBrowserTesting ofrece una gran variedad de dispositivos y funciones de prueba del mundo real

CrossBrowserTesting ofrece una gran variedad de dispositivos y funciones de prueba del mundo real

El mayor rival de Browser Stack en el espacio de prueba es CrossBrowserTesting, que ofrece más de 1,500 navegadores y dispositivos para probar su sitio web receptivo.

Su plataforma todo en uno le permite ejecutar pruebas automatizadas paralelas, comparar capturas de pantalla visualmente, deslizar e interactuar con su sitio web en dispositivos del mundo real y depurar su código de forma remota sobre la marcha.

¿Adobe After Effects es difícil de aprender?