Cómo probar tu sitio web en el móvil

¿Quiere saber cómo probar la versión móvil de su sitio de manera eficiente? ¿Y cuáles son las mejores herramientas para probar sitios móviles? Por lo tanto, este artículo es para ti.

¿Por qué deberías ocuparte de la optimización de tu sitio móvil?

A fines de 2016, más de 3.200 millones de personas tenían acceso a Internet y cerca de 2.000 millones utilizaban dispositivos móviles para ello. De acuerdo con los pronósticos analíticos, un número de personas, que usan solo dispositivos móviles para actividades de Internet, aumentarán anualmente un 25 por ciento en los próximos 5 años.

Por lo tanto, es de vital importancia verificar si su sitio web es compatible con dispositivos móviles.

Antes de comenzar la prueba de la versión móvil de su sitio, solo intente responder algunas preguntas comunes:

  • ¿Qué tan rápido se carga el sitio?
  • ¿Es atractivo el contenido?
  • ¿El sitio atrae la atención a los puntos principales de su negocio?
  • ¿El sitio ofrece una buena experiencia?
  • ¿Es el sitio fácil y comprensible para navegar?
  • ¿La página de destino despierta interés en otras páginas de su sitio?

Los principales factores de la optimización del rendimiento móvil.

Incluso, si la respuesta es «Sí» para todos ellos, debe prestar atención a los siguientes factores de la optimización del rendimiento móvil:

Velocidad de Descarga Siempre se combina con latencia de red, memoria, CPU y tamaño de caché. Todos ellos son mucho más pequeños en comparación con los de escritorio, por lo que toma más tiempo para cargar.

Carga restrictiva. Debe asegurarse de que los usuarios no descarguen nada que afecte la velocidad del sitio.

Marco de respuesta Ayuda a hacer prototipos más rápidos de funcionalidades móviles y diseños.

Rápido cargando hora te da una seria ventaja competitiva Las siguientes acciones afectan el tiempo de carga:

  • Reducir dependencias
  • Reducir el procesamiento del lado del cliente
  • Reducir la dimensión de la imagen.
  • Reducir el contenido
  • Evite la redirección de puntos-m
  • Recoge la solución de hosting correcta
  • Limitar las solicitudes HTTP
  • Habilitar la compresión

Consideremos otros pasos que debe seguir para verificar el funcionamiento normal de su sitio móvil.

Probando la conexión entre la versión de escritorio y móvil del sitio.

Redirecciona las pruebas:

  • Los visitantes móviles deben ser redirigidos a la versión móvil del sitio
  • Los visitantes de escritorio deben ser redirigidos a la versión de escritorio del sitio.
  • Las redirecciones dan a los visitantes acceso a la página específica que necesitan, no a la página de inicio
  • Los visitantes móviles deben tener una opción fácil de encontrar para ver también la versión de escritorio del sitio.

Comprobación del encabezado Vary-HTTP. Si sus sitios son servidos dinámicamente, debe configurar un encabezado Vary-HTTP para indicar a Google y a los navegadores que el HTML del agente de usuario varía.

rel = alterna / comprobación de etiquetas canónicas. Si sus sitios tienen una URL separada, las páginas de escritorio deben configurarse con un rel = etiqueta «alternativa» apuntando a la versión móvil de esa página. Las páginas móviles deben configurarse con una etiqueta rel = «canonical» que apunta a la versión de escritorio de esa página.

Pruebas de problemas técnicos

Sitemap XML móvil

  • Todas las páginas móviles deben enviarse a Google a través de un mapa del sitio XML en las Herramientas para webmasters de Google.
  • Las páginas móviles deben estar separadas de las páginas de escritorio

Velocidad del sitio para dispositivos móviles. Los usuarios móviles, en particular, es probable que tengan un tiempo limitado para gastar en su aplicación, por lo que deben entregarse rápidamente. Herramienta de velocidad de página de GoogleWebPagetest Son herramientas útiles para medir la velocidad del sitio.

Almacenamiento y datos:

  • Verifique que el código del programa no sea fácilmente accesible
  • El usuario no borra el caché, así que asegúrese de que nada se descomponga.

Pruebas de experiencia de usuario (UX)

Vista del sitio web en:

Smartphones: iPhone (iOS), Samsung Galaxy (Android), Nexus (otro Android) y Windows Phone (Windows).

Tabletas: iPad (iOS), Samsung Galaxy Tab en varios tamaños (Android), Kindle Fire (Amazon) y Asus Transformer Book (Windows).

Deberías usar herramientas como Google analitico para identificar los dispositivos, que a menudo son utilizados por sus visitantes.

Tamaño de enlaces. El margen entre enlaces debe ser de al menos 28×28 píxeles. Por lo tanto, todos ellos deben ser fáciles de hacer clic con el dedo.

Destello. La mayoría de los navegadores móviles no pueden mostrar contenido Flash. Por lo tanto, si desea que su sitio sea compatible con dispositivos móviles, no use Flash.

Mirador permite a los navegadores móviles cambiar el tamaño de las páginas para que se ajusten perfectamente a los dispositivos. Es por eso que necesitas configurarlo.

Ventanas emergentes Existen dos razones para no usar ventanas emergentes en la versión móvil de su sitio:

  • Las ventanas emergentes ralentizan el tiempo de carga de la página
  • Las ventanas emergentes son demasiado fáciles de hacer clic accidentalmente. Por lo tanto, alejan a los visitantes de la página en la que quieren estar.

Los elementos terminan. Los elementos más importantes deben estar en la parte superior. La colocación de otros elementos debe tener un sentido.

Navegación. Asegúrese de que los visitantes puedan acceder a todas las páginas del sitio móvil.

Contenido

  • Debe haber una página móvil equivalente para cada página de escritorio
  • El número de páginas móviles podría ser mayor que las páginas de escritorio porque a menudo es más fácil navegar por los sitios móviles.
  • Verificar que no hay Léxico, ni errores gramaticales. en el contenido de su sitio.
  • Si su sitio web no es solo para visitantes locales, debe proporcionar pruebas de localización, en otras palabras, para verificar los aspectos lingüísticos y culturales apropiados para un lugar en particular.
  • Las imágenes innecesarias deben ser eliminadas.

Vídeo

  • Verifica que los videos se carguen y corran correctamente
  • Use un reproductor de video HTML5, porque es fácil para los teléfonos renderizar y ligero.
  • Haz que tus videos sean receptivos

Página de resultados del motor de búsqueda, SERP:
Verifica que la URL de tu móvil sea fácil de usar y rica en palabras clave

Google corta las meta descripciones de dispositivos móviles en aproximadamente 120 caracteres, por lo que el suyo no debe exceder este límite.

Aunque Google le proporciona aproximadamente 70 caracteres (512 píxeles) en el título de su página, el ancho de la pantalla obliga al título de la página en dos líneas. Es por eso que debe verificar que cada título de página se vea bien en dos líneas.

Demasiados plug-ins arruinó toda la experiencia de su sitio móvil. Por lo tanto, debe revisar los complementos que está utilizando y eliminar los que realmente no necesita.

10 consejos para optimizar la versión móvil de tu sitio.

Resumir, aquí están 10 bits de consejo Para ayudarlo a verificar que la versión móvil de su sitio sea accesible para los visitantes:

  1. Asegurar la compatibilidad con las funciones de teléfonos inteligentes y tabletas.
  2. Verificar el tiempo de carga normal.
  3. Haz que la navegación del sitio sea lo más simple posible
  4. Asegúrese de que los botones sean lo suficientemente grandes para las personas con dedos grandes
  5. No hay grandes bloques de texto. Usa viñetas y oraciones cortas.
  6. No uses flash.
  7. No uses ventanas emergentes.
  8. Asegúrate de que las imágenes tengan el tamaño óptimo.
  9. Verifique que su número de teléfono esté a un clic de ser marcado
  10. Asegúrese de que el sitio web pueda acceder a su ubicación a través de GPS

Entonces, ahora que sabemos exactamente qué se debe probar, veamos algunas herramientas y formas de probarlo.

Pruebas en los dispositivos reales.

En un mundo perfecto, cada sitio web debe probarse en todos los dispositivos móviles populares en los que se pueda ver. Por supuesto, las pruebas en dispositivos reales tienen muchas ventajas:

  • Las pruebas se realizan en un entorno real con condiciones muy reales.
  • Las pruebas se proporcionan en el sistema operativo real, con los ajustes del fabricante
  • El rendimiento real de un dispositivo es más fácil en comparación con otras opciones virtuales
  • Probar la interoperabilidad es más fácil
  • Fácil replicación de errores
  • La resolución de la pantalla y el brillo se pueden probar fácilmente en una serie de escenarios diferentes
  • Funciones como la notificación de inserción, la geolocalización y la orientación, la conectividad Wi-Fi pueden ser probadas
  • Funcionando en condiciones de interrupciones entrantes, como SMS y las llamadas podrían ser probadas
  • Funcionamiento en condiciones de drenaje de la batería podría ser probado

Desafortunadamente, el mundo en el que vivimos no es perfecto. Aquí hay algunos puntos débiles de las pruebas en los dispositivos reales:

  • Hay un montón de dispositivos móviles
  • Las pruebas en dispositivos reales son costosas y requieren mucho tiempo.
  • Incluso si tiene una amplia gama de dispositivos móviles en su empresa, los empleados, ubicados en otras oficinas o trabajando de forma remota, no tendrán acceso a todos los dispositivos
  • El mantenimiento del dispositivo también es costoso.

Pruebas móviles en línea en los dispositivos reales

Por lo tanto, tenemos que encontrar otra forma de probar el sitio móvil. Existen herramientas especiales, que en realidad hacen uso de la conexión remota a dispositivos reales. Algunas de estas herramientas se presentan a continuación.

Keynote Mobile Testing (anteriormente Keynote DeviceAnywhere)
logo de apertura
Keynote Mobile Testing solución basada en la nube, que tiene la biblioteca completa de dispositivos móviles reales.

Por supuesto, es mucho más que una herramienta de prueba de página móvil. Pero si consideramos que Keynote Mobile Testing es una herramienta de ese tipo, debemos mencionar los siguientes méritos:

  • Redes móviles reales y wifi.
  • Soporte de primer día para nuevos dispositivos a medida que son lanzados.
  • Genera automáticamente una lista de dispositivos según los criterios de cobertura: memoria, CPU, fabricantes, versión del sistema operativo, operador, etc.
  • Base de datos detallada de características por dispositivo y sistema operativo
  • Asistente fácil de usar para ayudarlo a determinar rápidamente qué dispositivos priorizar para el desarrollo y las pruebas

Algunos deméritos de Keynote Mobile Testing:

  • Keynote Mobile Testing no examina los signos vitales del dispositivo
  • No hay soporte para reservas de dispositivos.

BrowserStack
logotipo de la pila del navegador
BrowserStack es una herramienta de prueba de navegador cruzado, que le da acceso a la gran variedad de dispositivos móviles reales.

Estas son algunas de las características de BrowserStack:

  • Amplio espectro de iOS y Android: versiones de iOS desde iOS 3 a iOS 10, Android – desde Donut (1.6) a Nougat (7.1)
  • Controles rápidos con capturas de pantalla
  • Analítica web para su sitio web.
  • Depure sus sitios web móviles fácilmente con las herramientas para desarrolladores de Chrome en iOS y Android.
  • Acceso a los dispositivos adicionales por parámetros geográficos.
  • Gestos e interacciones naturales.
  • Opción de prueba de seguridad

Algunos puntos débiles del BrowserStack:

  • El rendimiento del servidor parece degradarse con el tiempo cuando muchos usuarios están probando
  • BrowserStack tiende a ser bastante caro y la opción gratuita es muy limitada.
  • Una forma de simular la entrada y salida de dos dedos en teléfonos y tabletas

Perfecto Mobile Laboratorio de Calidad Continua
Logo perfecto
Perfecto Mobile Continuous Quality Lab es otra plataforma basada en la nube, que no solo tiene la opción de prueba de páginas móviles. En el contexto de probar la versión móvil de su sitio, se deben determinar las siguientes ventajas:

  • Pruebas en tiempo real en más de 500 dispositivos diferentes
  • No solo Android y iOS, sino también las plataformas WinPhone, Symbian y Blackberry están disponibles para pruebas
  • Compartir dispositivos
  • Pruebas de automatización simultáneas en varios dispositivos.
  • Soporte de captura de pantalla

Algunos de los inconvenientes de la Calidad Continua Móvil Perfecto son:

  • Imagen indistinta (a menudo ilegible)
  • Largo tiempo de respuesta
  • La versión de prueba gratuita utilizando está limitada a 60 minutos.

Pruebas con emuladores móviles.

Otra forma posible de resolver el problema de la falta de dispositivos reales es utilizar herramientas especiales, que emula o simula su funcionalidad.

El uso de este tipo de herramientas le brinda la capacidad de identificar problemas y problemas con el sitio web y le permite tomar medidas correctivas para hacer que el sitio sea visualmente atractivo y funcional en dispositivos móviles.

La gente a menudo confunde el «emulador» y «simulador». Aunque ambos suenan casi iguales, todavía hay una diferencia entre ellos.

Un emulador funciona como un reemplazo para el dispositivo original. Puede ejecutar el mismo software y las aplicaciones del dispositivo original sin modificarlas e incluso no puede señalar la diferencia en el sistema duplicado.

Por otro lado, un simulador puede configurar el entorno similar al sistema operativo del dispositivo original, pero no intenta replicar su hardware.

Por lo tanto, los emuladores son preferibles para las pruebas de sitios móviles, mientras que los simuladores son mejores para las pruebas de aplicaciones móviles.

Consideremos algunos emuladores de uso frecuente

MobileMoxie
logotipo de moxie móvil
MobileMoxie Emulator es una parte integral de MobileMoxie Marketing Toolset, que le ayuda a brindar excelentes experiencias móviles a sus clientes. Es fácil de usar. Simplemente ingrese la URL de su sitio web en el campo correspondiente.

moxie móvil
Emulador de Windows Phone
logo de windows phone
Emulador de Windows Phone es el entorno móvil especial donde puede probar, ver y depurar aplicaciones de Windows Phone y usar el navegador para consultar sitios web.

Algunos méritos de Windows Phone Emulator:

  • SDK completo con emulador de dispositivo
  • Múltiples resoluciones de pantalla.
  • Herramienta de captura de pantalla
  • Simulación de acelerómetro

Limitaciones del emulador de Windows Phone:

  • Funciona solo en Windows.
  • El nivel de brillo del emulador es siempre «Alto»
  • La cámara y el video se utilizan con limitaciones.

Emulador de Android Studio
logo de android studio
El emulador de Android Studio le permite crear un dispositivo móvil virtual para ejecutar aplicaciones de Android y probar sitios web móviles. El emulador se encuentra dentro del paquete SDK de Android.

Ventajas del emulador de Android Studio:

  • Funciona en Windows, Mac OS X, Linux.
  • El emulador de Android Studio puede transferir información más rápido que usando un dispositivo de hardware conectado
  • Entorno unificado donde se pueden utilizar todos los dispositivos Android.

Algunos inconvenientes del emulador de Android Studio:

  • Si solo necesita el navegador para probar sitios web móviles, debe descargar muchas cosas innecesarias
  • Algunas limitaciones técnicas: se recomiendan 8 GB de RAM; Se recomiendan 4 GB de espacio disponible en disco.

Opera Mobile Emulator 
logo de opera
Opera Mobile Emulator es una demostración en vivo del navegador del teléfono móvil de Opera que funciona como lo haría cuando se instala en un teléfono. Algunas herramientas de depuración adicionales también están disponibles, como los métodos abreviados de teclado, el selector de perfil y varias marcas de línea de comando.

Los principales méritos del Opera Mobile Emulator:

  • Es fácil de instalar y fácil de usar. No necesitas instalar ningún SDK complejo o algo así.
  • Hay tres modos de entrada disponibles: táctil, teclado y tableta.
  • Viene preconfigurado con una serie de perfiles de teléfono y tableta.
  • Todos los modos pueden ser activados y controlados por enlaces y controles.
  • Depuración remota con dispositivos reales.

Algunos puntos débiles del Opera Mobile Emulator:

  • Puedes verificar cómo se ven las páginas solo en el navegador móvil Opera.
  • Menos apoyo de los medios

Herramientas de validación y amigables para móviles.

Es bien sabido que Google indexa sitios web aptos para dispositivos móviles y no aptos para dispositivos móviles. Es por eso que debe usar herramientas especiales para verificar si su sitio web cumple con los criterios generalmente aceptados.

Como regla, todas estas herramientas son fáciles de usar. Todo lo que debe hacer simplemente ingrese la URL de su página en el formulario correspondiente.

Prueba de Google para dispositivos móviles
logotipo de desarrolladores de google
La Prueba de uso móvil de Google es la herramienta que le muestra si Google considera que su página es compatible con dispositivos móviles o no. Si su sitio web pasa la prueba, verá un mensaje verde que dice «¡Impresionante! Esta página es para dispositivos móviles «. Si no pasa, el mensaje será rojo y dirá «No apto para dispositivos móviles».

En este caso, la página será empujada hacia abajo en los resultados de búsqueda móvil en lugar de páginas similares de otros sitios que son compatibles con dispositivos móviles.

mobiReady
logo de mobiReady
MobiReady permite evaluar la preparación móvil de su sitio web utilizando las mejores prácticas y estándares de la industria. El informe gratuito proporciona tanto un puntaje (de 1 a 5) como un análisis en profundidad de las páginas para determinar el rendimiento de su sitio en un dispositivo móvil.

Los principales méritos de mobiReady son:

  • Informes de error detallados
  • Pruebas en todo el sitio
  • Una herramienta de visualización para ver cómo se ve tu sitio en la pantalla de un teléfono celular
  • W3C mobileOK tests
  • Se aconseja mejorar la preparación móvil de su sitio web.

Servicio de control W3C mobileOK
logo w3c
W3C mobileOK checker es un servicio gratuito de W3C (el consorcio mundial para estándares web) que ayuda a verificar el nivel de compatibilidad de los documentos web con la tecnología móvil y, en particular, afirma si un documento web es «móvil OK».

Las pruebas se definen en el MobileOK Basic Tests 1.0 especificación. Solo si la era web pasa todas las pruebas, obtendrá el estado de «mobileOK».

Las otras opciones, que podrían ser validadas:

Varvy
logotipo varvy
Varvy es una colección de herramientas gratuitas para probar SEO, la velocidad y la funcionalidad móvil de un sitio web.

Las principales características de Varvy:

  • Prueba de conformidad de las directrices de Google.
  • Optimización de la velocidad de la página
  • Una amplia gama de consejos y pautas para optimizar el rendimiento de la página web

Herramientas de prueba de velocidad del sitio web

Como se mencionó anteriormente, la velocidad de descarga y operativa de su sitio web tiene un impacto directo en el número de visitantes.

Existen herramientas simples y avanzadas para probar la velocidad de la página, la optimización del motor de búsqueda y el rendimiento del navegador móvil. Debe medir no solo la velocidad de su sitio web, sino también la de su competidor. Siga las recomendaciones procesables para mejorar sus resultados.

Aquí hay algunas herramientas que pueden ayudarte a hacerlo.

Page Speed de Google en línea
página de Google logotipo de prueba speeed
Page Speed Online de Google es una herramienta integral que no solo le permite verificar el rendimiento, sino que también le brinda mucha información. Además, también incluye un informe sobre las mejores prácticas que puede utilizar en dispositivos móviles para optimizar su rendimiento.

Pingdom
logo de pingdom
Pingdom le permite identificar lo que es rápido, lento, demasiado grande y las mejores prácticas que no está siguiendo. Todas las pruebas se realizan con navegadores web reales, por lo que los resultados coinciden con la experiencia del usuario final. Las pruebas se guardan para que pueda realizar un seguimiento de su rendimiento en el tiempo.

GTmetrix
Logo de GTmetrix
GTmetrix le permite proporcionar pruebas desde múltiples regiones y analizar su rendimiento en dispositivos móviles. Obtenga la velocidad de carga de su sitio junto con recomendaciones útiles para hacer frente a sus cuellos de botella.

Impacto de carga
logo de impacto de carga
Load Impact permite ejecutar pruebas de carga a gran escala con hasta 1.2 millones de usuarios concurrentes. Genera carga desde hasta 10 ubicaciones diferentes simultáneamente, e incluso agrega más ubicaciones a pedido. Load Impact simula el tráfico exactamente como sucedería en la vida real.

Dotcom-Monitor
logo de dotcom-monitor
La prueba de velocidad de Dotcom-Monitor le permite al usuario seleccionar desde qué navegador le gustaría probar: Chrome, Firefox, Internet Explorer y los navegadores móviles, incluidos iPhone, iPad y más. Tienes la capacidad de probar tu sitio web desde 20 ubicaciones en todo el mundo. Una vez que se completa una prueba, los usuarios pueden profundizar en informes de rendimiento y un análisis de gráfico de cascada.

Esperanza, la información y las herramientas mencionadas en este artículo serán realmente útiles para aumentar la preparación móvil de su sitio. Nos gustaría conocer su experiencia de uso práctico. Quizás puedas recomendar algunas otras herramientas. Háganos saber en los comentarios.