¿Es una buena práctica probar un sitio web receptivo con el cambio de tamaño de la ventana del navegador?

Es una práctica adecuada [1] .

Sin embargo, advierto a los probadores e ingenieros de control de calidad que nunca confíen en esta práctica como la única forma de prueba. Cambiar el tamaño de la ventana del navegador es similar a ver una página web en un dispositivo determinado, pero no es lo mismo:

  • Las densidades de píxeles desde el escritorio al dispositivo móvil pueden ser diferentes, lo que puede afectar el comportamiento de los elementos y los atributos srcset .
  • Los sistemas operativos y los agentes de usuario pueden ser diferentes. A veces, las bibliotecas y complementos (especialmente los complementos de video) tienen comportamientos diferentes que dependen de verificar el agente de usuario o el sistema operativo; cosas que simplemente cambiar el tamaño de una ventana del navegador no cambiarán
  • A veces surgen problemas que ocurren solo cuando cambia el tamaño de la ventana. Cuando carga la página en un tamaño de ventana específico, el problema no aparece, pero cuando cambia el tamaño de la ventana, sí. Este es un falso positivo; Esto no es un problema en absoluto. ¡Estaba lidiando con esto ayer cuando una estaba cargando la imagen “correcta” en un cambio de tamaño, pero no en el dispositivo real!
  • Toque. Querido Dios, antes de que los eventos de puntero fueran una cosa, era una pesadilla que los eventos táctiles se comportaran de la misma manera en un dispositivo Android, un Kindle, un iPad y un Surface pro. Todo lo relacionado con el tacto absoluto no se puede “emular” de manera confiable. Necesitas un dispositivo.
  • Banda ancha. 2mb de JavaScript rinden mucho mejor en un dispositivo de escritorio en una empresa que en un dispositivo Android en roaming en los Apalaches. La velocidad de la red afecta la rapidez con que se transfieren los activos, lo que afectará tanto la presentación como el rendimiento. La versión “horizontal” de esa imagen tarda mucho más en cargarse cuando gira un “dispositivo real”, lo prometo.

Como se ha recomendado antes, cambiar el tamaño de la ventana es un gran primer paso para filtrar algunos errores [2]. La experiencia me ha enseñado que Devices > Emulators > Resizing Window Real Devices > Emulators > Resizing Window

El diseño receptivo no es todo lo que piensas

Si nunca ha leído el artículo original de Ethan Marcotte que introdujo el concepto y acuñó el término, debería hacerlo. Marcotte dice:

En lugar de adaptar los diseños desconectados a cada uno de un número cada vez mayor de dispositivos web, podemos tratarlos como facetas de la misma experiencia.

Esto va en contra de cambiar el tamaño de la ventana a puntos de interrupción específicos, porque no se supone que Responsive Web Design sea eso. Se supone que es lo contrario!

En lugar de poner en cuarentena nuestro contenido en experiencias dispares y específicas del dispositivo, podemos usar consultas de medios para mejorar progresivamente nuestro trabajo dentro de diferentes contextos de visualización.

Por lo tanto, cambiar el tamaño de su ventana es un comienzo, pero nunca debería ser “The Way” para probar el diseño receptivo.

Notas al pie

[1] Cómo probar el diseño web receptivo: excelencia en las pruebas

[2] Pruebas móviles receptivas: ¿es adecuado cambiar el tamaño del navegador de escritorio?

Hola,

Cambiar el tamaño de la ventana del navegador no le dará los resultados perfectos.

# Método 1

Entonces, a pesar de cambiar el tamaño de la ventana del navegador, use algunas herramientas como Prueba de pantalla múltiple

Ingrese la URL de su sitio y obtendrá la salida en casi todos los dispositivos posibles.

# Método 2

Abra el sitio web en el navegador.

Inspeccionar elemento (Ctrl + Shift + i / clic derecho + Inspeccionar elemento)

Haga clic en el ícono Móvil y obtendrá la vista móvil y casi la vista del dispositivo de su sitio web.

“¿Es una buena práctica probar un sitio web receptivo con el cambio de tamaño de la ventana del navegador?”

Si desea probar cómo se verá el diseño receptivo de un sitio web en varios tamaños de pantalla, entonces , cambiar el tamaño del navegador es una buena práctica , y una que utilizan todos los creadores de diseños receptivos. ¿Mirar un trozo de papel mientras haces un dibujo es una buena práctica? Sí. ¿De qué otra manera mirarías tu trabajo? Dicho esto, también analizamos los dispositivos reales y varios otros métodos de prueba de diseños receptivos. Asegúrese de que su metaetiqueta de ventana gráfica sea correcta. Las reglas de `@ media` no son mágicas … funcionan cuando se escriben correctamente. Si escribe reglas CSS sólidas y usa alguna implementación de Autoprefixer, no debería haber demasiados problemas.