Las mejores herramientas para probar cómo se verá un sitio web en diferentes plataformas son usar las propias plataformas . Eso significa poseer todos los dispositivos y usar todos los sistemas operativos y navegadores relevantes que usarán sus usuarios. Las ventajas son que cada opción se prueba (si se hace correctamente). Las desventajas son que puede ser relativamente costoso comprar todos los dispositivos y lleva mucho tiempo probarlos.

Pero hacerlo para cada combinación de dispositivo/software es relativamente poco realista. Los animo a usted y a su empresa a que hagan todo lo que puedan, especialmente en los dispositivos y el software del usuario principal. Como tal, así es como pruebo sitios web/aplicaciones web:

• Para algunas pruebas (especialmente la capacidad de respuesta y la carga/renderización de la página), utilizo las herramientas de desarrollo de Chrome. Estas son excelentes herramientas y con las que me siento más cómodo. Sus herramientas de desarrollo también son una gran ayuda en el desarrollo, pero eso está fuera de tema.

• Mientras desarrollo, pruebo regularmente el sitio web en diferentes navegadores y dispositivos que tengo cuando se hacen nuevas "piezas" del sitio web. Una "pieza" podría ser un tema terminado, un nuevo conjunto de animación, un nuevo elemento interactivo, etc. Esto hace que realmente complete la pieza, incluidas las pruebas y cualquier iteración que siga antes de decir que ha terminado. Tenga en cuenta el tiempo de carga y el rendimiento al hacer esto también.

• Me encanta hacer pruebas de usuario con mis amigos y cualquier otra persona que esté cerca (esencialmente, dejar que usen tu sitio/aplicación mientras miras y luego hacerles preguntas relevantes pero algo generales), especialmente si son usuarios potenciales. Esto es bueno para hacer en las etapas iniciales de creación de prototipos, así como en las posteriores para asegurarse de que no está invirtiendo un montón de tiempo en algo inútil.

• Una vez que todo está más o menos "hecho", a veces pruebo mi sitio usando un servicio de validación y ocasionalmente herramientas similares, pero no está en la parte superior de mi lista de "esto debe hacerse siempre".

Existen otras aplicaciones/herramientas que realizan pruebas automatizadas que pueden ser útiles, pero personalmente no he trabajado en algo lo suficientemente masivo como para requerirlo y se obtienen resultados más precisos al realizar pruebas en los diferentes dispositivos y plataformas, por lo que no he alguna vez usado mucho.

Idealmente, tendría una sala llena de evaluadores con una pila de dispositivos diferentes.

Las cosas generales que necesita verificar:

• diferentes navegadores
• diferentes sistemas operativos
• diferentes dispositivos
• diferentes tamaños de ventana gráfica

Estos pueden afectar:

• diseño
• tipografía
• funcionalidad

En la mayoría de los casos, necesita alguna forma del software real que desea probar.

Eso significaría que tiene el dispositivo físico, con el software del navegador instalado.

Eso es difícil de hacer en muchas situaciones. Como tal, creo que una configuración robusta pero práctica puede ser:

Instalar OSX con:

• Últimos navegadores Chrome, Safari, Firefox. Versiones independientes de memoria USB de una versión posterior.
• Xcode para probar iOS virtualmente

Instalación de Windows con:

• Últimos navegadores Chrome, Safari, Firefox e IE (suspiro). Versiones independientes de memoria USB de una versión posterior. (Las versiones anteriores de IE son un poco más complicadas... la mejor manera es ejecutar una máquina virtual para cada versión)
• Android Studio para probar dispositivos Android virtualmente

Instale Linux si le importan los usuarios de Linux (todos deberíamos, por supuesto. Las empresas rara vez lo hacen).

Un paso adelante serían los servicios que le brindan acceso "compartido" a dispositivos reales a través de herramientas VPN. Sin embargo, estos son dolorosos de usar ... ya que esencialmente está tratando de emular un dispositivo táctil a través de un mouse a través del retraso de la red. Pero es mejor que nada en algunas situaciones.

Como dijo Zach, idealmente desea probar en dispositivos/navegadores específicos y usar herramientas de validación. Sin embargo, también me ha resultado útil usar browsershots.org . Solían tener opciones de IE, pero recientemente las eliminaron de su lista. Desafortunadamente, eso solo muestra cómo se verá su interfaz y no proporciona ninguna funcionalidad sobre cómo se comportará su sitio. Sin embargo, si solo necesita ver cómo se ve, entonces cumpliría su propósito. ¡Espero que ayude!

Google Chrome

Instrucciones para Windows

1. Presione F12
2. Haga clic en "Alternar modo de dispositivo"
3. Seleccione su dispositivo y actualice la página

Paso 1 y 2

Paso 3

ventajas

• Funciona bien

Contras

• ¿Opciones limitadas de emulación de dispositivos? No estoy seguro si esto es relevante
• Ser forzado cruelmente a actualizar la página después de cambiar de dispositivo

Estudio Android

Si realmente quiere ir por la borda y obtener pruebas de funcionalidad entre navegadores y plataformas en la combinación, le recomendaría Android Studio .

Con Android Studio puede descargar imágenes de casi cualquier dispositivo imaginable en Android-o-sphere y ejecutarlas en un entorno virtual. Una vez que se haya iniciado el entorno virtual, puede descargar los navegadores web con los que está probando.

Además de tener en sus manos los dispositivos que desea probar, esta es definitivamente la mejor opción.

Dispositivos virtuales