Los teléfonos inteligentes parecen haberse apoderado de las computadoras de escritorio en términos de uso. El número de usuarios de teléfonos inteligentes ha aumentado enormemente en los últimos años y para 2016, habrá más de 2 mil millones de usuarios de teléfonos inteligentes. Además, la mitad del uso de Internet proviene de dispositivos móviles.
Este desarrollo también afecta el diseño web desde hace algunos años. InVision declaró recientemente en una de sus publicaciones de blog:
“El diseño receptivo ya no es un lujo, sino una necesidad”.
Especialmente cuando se trata de pruebas, las pruebas de sitios web móviles todavía están en el lugar de sus hijos y los desarrolladores enfrentan dificultades para obtener el mejor resultado de su trabajo.
¿Qué significa RWD?
Esto significa que los desarrolladores deberían crear sus sitios web para que un usuario pueda acceder a ellos desde cualquier dispositivo inteligente, ya sea iPhone, reloj inteligente, Kindle o computadora portátil, sin problemas.
Diseño receptivo: ¿una solución todo en uno perfecta?
El tamaño de la pantalla, la plataforma y la orientación e incluso todos los elementos de un diseño se ajustan para que sea compatible con la visualización en ese dispositivo en particular.
De esa manera, el tamaño del dispositivo inteligente no importa. Por ejemplo, si el usuario cambia de su computadora al iPad, el sitio web cambia automáticamente para adaptarse al cambio en la resolución, el tamaño de la imagen y las capacidades de secuencias de comandos. Se ha vuelto tan común e importante que el diseño con dispositivos móviles en mente se ha ganado su propio nombre: diseño receptivo .
Dado que el diseño web receptivo elimina la necesidad de un diseño y desarrollo personalizado para cada nuevo gadget lanzado, el concepto puede ahorrarle mucho tiempo.
Pero, dado que se supone que admite prácticamente cualquier tipo de dispositivo, las técnicas utilizadas deben ser lo más robustas posible.
Por qué son importantes las pruebas móviles.
Sin embargo, al diseñar sitios web, los desarrolladores aún enfrentan dificultades para obtener los mejores resultados de su trabajo.
Los desarrolladores y diseñadores de sitios web a menudo no invierten una cantidad suficiente de recursos para probar la compatibilidad de sus sitios en diferentes dispositivos móviles.
Las pruebas para el uso móvil aún están en una etapa incipiente, pero con la ayuda de un flujo de trabajo de prueba adecuado , los métodos de prueba y las herramientas de prueba móviles adecuadas, probar su sitio web para que responda será mucho más fácil.
¿Cómo comenzar con las pruebas de sitios web móviles?
Dado que hay tantos dispositivos diferentes para ver un sitio web en la actualidad, hay mucho que tener en cuenta.
Vienen con diferentes tamaños y resoluciones de pantalla, operan con diferentes velocidades de red y tienen diferentes capacidades de hardware.
Todas estas diferencias hacen que sea importante que un sitio web se pruebe a fondo antes de que esté disponible en diferentes plataformas.
Según la investigación de Guy Podjarny , independientemente del tamaño de la pantalla, el 72% de los sitios web receptivos requieren los mismos recursos, incluso en conexiones de red móviles lentas, independientemente de lo que se deba mostrar.
Y dado que los usuarios esperan tiempos de carga cortos, no pasará mucho tiempo antes de que se dirijan a la página de un competidor. Al probar sitios para dispositivos móviles, hay 4 cosas básicas a tener en cuenta. Estos son:
- ¿El sitio se ve muy bien en cada dispositivo?
- ¿Está libre de errores en cada dispositivo?
- ¿Es la interfaz fácil de usar en cada dispositivo?
- ¿Está el sitio optimizado para cada dispositivo?
Ahora, hay muchos dispositivos diferentes por ahí.
El objetivo de las pruebas de sitios web móviles es ofrecer una experiencia consistente pero relevante a los usuarios en todos esos dispositivos diferentes, y eso puede ser realmente difícil de administrar.
Entonces, ¿por dónde empiezas? Bueno, su prueba debe llevarse a cabo en cinco áreas para cubrir todo adecuadamente.
Valide su código HTML y CSS
Primero debe intentar validar el código HTML de su página. No es porque el sitio web funcione para usted que funcione para todos. Entonces, el paso más importante es asegurarse de que haya cubierto lo básico y que el sitio web esté a la par con todos los estándares HTML y CSS.
W3C mobileOK Checker
W3C es una herramienta de validación automatizada basada en la web y es una de las mejores herramientas para verificar la compatibilidad de su sitio en dispositivos móviles. La herramienta ofrece varias pruebas que determinan la facilidad de uso del sitio web móvil.
https://validator.w3.org/mobile/
Herramientas para desarrolladores de Chrome: el versátil dispositivo de prueba móvil
Las herramientas para desarrolladores de Chrome que probablemente todos conocen son un excelente lugar para solucionar esos problemas de HTML y CSS. A través de todo el flujo de trabajo de prueba, las Herramientas para desarrolladores de Chrome son su base de operaciones. Ya sea que esté verificando el comportamiento de su sitio web en varias resoluciones de pantalla o esté probando los tiempos de carga con la limitación de red.
Las herramientas de Chrome Dev son el lugar para estar.
Prueba en diferentes navegadores y sistemas operativos
A continuación, debe probar su sitio web en varios navegadores, especialmente los que son más populares en su público objetivo. Esto probablemente significa probar en Firefox, Chrome, Safari o Internet Explorer.
Además de esto, también verifique su sitio en diferentes sistemas operativos como Mac o Linux. Puede suceder que un sitio se vea completamente bien en uno de los navegadores, pero se rompa completamente en otro navegador, o funcione en un navegador en un sistema operativo pero no en el mismo navegador en un sistema operativo diferente.
Prueba en BrowserStack
Browserstack es un servicio web que permite el acceso a computadoras de escritorio y dispositivos móviles y puede ser utilizado por profesionales para probar sus sitios. Es un servicio pago. Aunque una parte del servicio está disponible en una versión gratuita, la versión de pago tiene muchas más funciones.
https://www.browserstack.com
Prueba para diferentes dispositivos móviles
Aquí es donde se pone difícil. Después de probar su sitio en su escritorio, cambie el tamaño de la ventana del navegador y verifique la apariencia en diferentes tamaños preestablecidos.
Prueba en dispositivos móviles reales
La mejor manera de probar la capacidad de respuesta de cualquier sitio es simplemente probándolo en diferentes dispositivos móviles. La experiencia del usuario varía según el tiempo de carga de la página, la densidad de píxeles y el tamaño de los botones táctiles.
Dado que las pruebas exhaustivas en cada dispositivo móvil a menudo no son posibles debido a las limitaciones de costo y tiempo, un conjunto de pruebas de dispositivos móviles funciona mejor en las pruebas. Un traje consta de muchos dispositivos populares de navegación web y ayuda en las pruebas físicas en condiciones reales.
Pruebas con Android Emulator y iOS Simulator
Además de probar en los dispositivos móviles reales, también puede usar un emulador. Los emuladores son software diseñado principalmente para probar aplicaciones y navegadores web predeterminados.
Sin embargo, debido a la baja velocidad de los emuladores, no son muy buenos para probar sitios móviles. Ni siquiera muestran todas las características de un dispositivo de hardware físico. Pero si no tiene otras opciones de prueba, un emulador funciona bastante bien al garantizar pruebas básicas.
Responsable
Responsinator es una gran herramienta para probar su diseño web receptivo. Es gratuito y funciona muy bien para realizar una verificación de diseño rápida.
http://www.responsinator.com/
¿Soy receptivo?
Am I responsive es una herramienta basada en la web que le mostrará si un determinado sitio web tiene un diseño web receptivo. Aunque es más una herramienta para una verificación rápida y simple, que para fines de prueba y seguimiento de errores.
http://ami.responsivedesign.is
MobiReady
MobiReady es básicamente una herramienta de prueba en línea. Realiza una serie de pruebas y proporciona un resultado integral para la compatibilidad de su sitio web para el uso móvil. También envía un informe de error para que conozca las áreas donde puede mejorar.
http://ready.mobi
Opciones de conectividad
Los sitios web dependen de la conectividad de red para proporcionar la funcionalidad requerida. En un entorno de prueba, configure la red wi-fi y pruebe la velocidad de carga del sitio en diferentes condiciones.
Aunque nada nuevo, el diseño web receptivo no se trata de poder mostrarse bien en diferentes escenarios, se trata de ser utilizable en diferentes escenarios.
Desafortunadamente, ser receptivo generalmente significa un aumento en el tiempo de carga ya que se necesitan cargar más activos. Afortunadamente, RESS está ahí para ayudar con eso.
RESS (= Diseño web receptivo + Componentes del lado del servidor) es básicamente la adición de componentes del lado del servidor que se cargan dinámicamente y de acuerdo con lo que requiere un dispositivo específico. No sirve de nada cargar una imagen de resolución completa en un teléfono celular pequeño, pero podría estar en una computadora de escritorio.
Pruebas móviles después de la implementación
Al igual que con todo lo relacionado con el desarrollo, no hay garantía de que después de la implementación, su sitio web sea perfecto. De hecho, siempre habrá errores.
Entonces, después de la implementación, querrá vigilar su sitio web receptivo. Tus usuarios se toparán con ellos de vez en cuando, ya que pasan mucho más tiempo en el sitio de lo que nunca podrás.
Por lo tanto, además de verificar y probar errores y problemas con cada nueva implementación, también debería detectar errores que aún persisten en su implementación actual.
Pero, aquí están las buenas noticias. Hay herramientas para eso también.
Pingdom
Hablamos sobre la optimización del tiempo de carga. ¿Pero qué tal el tiempo de actividad? No solo nos referimos a sitios enteros que están fuera de línea. También puede ser que un solo activo esté fuera de línea también. Ahí es donde entra el pingdom. Esta herramienta monitorea cómo el usuario experimenta el sitio web y dónde puede encontrar posibles contratiempos.
http://tools.pingdom.com/fpt/
Sesión de usuarios
Imagine que usted o uno de sus usuarios encontraron un error o algún problema crítico con su diseño web receptivo. Bueno, es tu trabajo tratar de obtener suficiente información de ese usuario para seguir adelante y corregir ese error. Usersnap te ayuda a obtener esa información, sin molestar demasiado a tus usuarios.
A medida que los dispositivos inteligentes se vuelven más populares, es crucial preparar su sitio para clientes móviles. La prueba es la parte más importante de estar preparado.
https://usersnap.com
