Prueba de sitio web compatible con dispositivos móviles: cómo revisar su sitio en un teléfono

Un cliente le comenta que su sitio web era difícil de usar en su teléfono, o usted busca la antigua prueba de sitio web compatible con dispositivos móviles de Google y la página ya no existe. De cualquier forma, le queda la misma pregunta: ¿puede alguien desde un teléfono encontrar de verdad lo que usted hace y ponerse en contacto? Esa pregunta tiene una respuesta práctica que puede obtener esta misma tarde, y empieza con el teléfono que ya lleva en el bolsillo. Una puntuación de una herramienta en línea puede ayudar, pero no le dice si una persona real puede tocar su número, abrir su menú y enviarle un mensaje. Lo que necesita es una lista corta de lo que falla, en qué página y si cada cosa es una reparación pequeña o un trabajo más grande. Usted mismo puede armar esa lista en unos quince minutos.

¿Cómo puede comprobar si su sitio web es compatible con dispositivos móviles?

Use su propio teléfono y trate de hacer lo que hace un cliente. La revisión de abajo toma unos quince minutos, no necesita ningún software y le da una lista escrita de problemas reales en lugar de una sensación general de que el sitio se ve anticuado. Cada paso corresponde a algo que un visitante desde el teléfono de verdad intenta hacer antes de llamar o reservar. Hágalo en el teléfono que lleva todos los días, con el navegador en el zoom normal.

Elija tres páginas que le traen negocio

Elija su página de inicio, la página de servicio que le trae más consultas y su página de contacto o de reservas. Son las páginas donde un visitante desde el teléfono tiene más probabilidad de aterrizar justo antes de decidir si contactarlo. Si tiene una tienda, cambie la página de servicio por una página de producto y agregue el proceso de pago.

Realice cinco tareas en cada página

En cada página, intente lo siguiente sin pellizcar para hacer zoom:

• Busque un servicio: ¿Puede saber a qué se dedica el negocio y encontrar el servicio que buscaba desde la parte de arriba de la página?
• Abra el menú: ¿Se abre, se cierra y lo lleva a donde tocó, sin tapar el primer contenido útil?
• Toque el número de teléfono: ¿Su teléfono le ofrece marcarlo, o es solo texto que tendría que copiar?
• Toque el botón principal: ¿«Reservar», «Pedir una cotización» o «Contáctenos» lo llevan a donde prometen?
• Envíe una consulta de prueba: ¿Puede llenar cada campo con el teclado que le muestra su teléfono, y el formulario muestra una confirmación clara después de enviarlo?

Una consulta de prueba no hace daño. Ponga «prueba» en el mensaje para que quien revise la bandeja de entrada sepa que debe ignorarlo, y confirme que llegó.

Deslice hacia los lados, no solo hacia abajo

Arrastre cada página a la izquierda y a la derecha con un dedo. Si la página se desliza hacia los lados, muestra una franja de espacio vacío o corta el final de una línea, algo en ella es más ancho que la pantalla. También esté atento a las barras que se quedan fijas arriba o abajo de la pantalla y tapan un botón que necesita.

Cambie a datos móviles y déle el teléfono a otra persona

Apague el wifi y repita una tarea con datos móviles. Después pídale a dos personas que no construyeron el sitio, idealmente clientes, que encuentren un servicio y lo contacten sin ninguna instrucción de su parte. Observe dónde dudan o tocan algo equivocado. Si puede pedir prestado un segundo teléfono, pruebe con un iPhone pequeño y un teléfono Android, ya que la misma página puede comportarse distinto en cada uno.

Anote cada falla

Para cada problema, anote la página, el teléfono y el navegador, y la tarea que falló. «Página de contacto, Android, Chrome: el botón Enviar queda debajo de la burbuja de chat» es algo que cualquiera puede reproducir y corregir. «El sitio se siente tosco en el móvil» no lo es.

¿Qué pasó con la prueba de compatibilidad móvil de Google?

Google la retiró. El 19 de abril de 2023, Google anunció que la prueba de compatibilidad con dispositivos móviles, su API y el informe de usabilidad móvil de Search Console dejarían de funcionar el 1 de diciembre de 2023. Su razón fue que, en los casi diez años desde que se lanzó el informe, habían aparecido otros recursos sólidos para revisar la usabilidad móvil, y nombró a Lighthouse de Chrome como uno de ellos.

Por eso una búsqueda de la prueba de Google ahora muestra revisores de otras empresas. Pueden ser útiles para una mirada rápida, pero ninguno es el veredicto de Google, y Google ya no entrega una insignia de aprobado o reprobado para móvil. Su documentación actual de experiencia de página dice que Chrome Lighthouse puede identificar mejoras, incluida la usabilidad móvil, y les pregunta a los dueños de sitios si su contenido se muestra bien en dispositivos móviles.

Si prefiere pegar una dirección web en vez de abrir las herramientas de desarrollador, PageSpeed Insights de Google ejecuta Lighthouse por usted en el navegador. De cualquier forma, trate el informe como una segunda opinión que acompaña su revisión con el teléfono, no que la reemplaza.

¿Cómo usa Lighthouse y la vista de dispositivo de Chrome sin perderse?

Dos herramientas gratuitas del navegador Chrome en una computadora agregan señales útiles a la revisión con el teléfono. No necesita entender cada línea que producen. El objetivo es detectar problemas que su propio teléfono podría esconder, como un diseño que se rompe en una pantalla más angosta que la suya. Dedique diez minutos a esto, no una tarde.

Ejecute un informe de Lighthouse en modo móvil

Lighthouse viene integrado en las herramientas de desarrollador de Chrome. Abra su página en Chrome, haga clic derecho, elija Inspeccionar, abra la pestaña Lighthouse, elija Móvil y ejecute el informe. Lea primero los elementos de accesibilidad y buenas prácticas, ya que suelen nombrar problemas específicos como texto demasiado pequeño, botones colocados demasiado cerca uno del otro o campos de formulario sin etiqueta. Anote el elemento y la página, y agréguelo a su lista.

Revise varios anchos de pantalla en la vista de dispositivo

El modo de dispositivo de Chrome le permite reducir la página a un ancho de tamaño de teléfono en su computadora. Pruebe anchos de 320, 375 y 425 píxeles. Busca las mismas cosas que en su teléfono: líneas cortadas, desplazamiento hacia los lados, botones que se superponen y un menú que deja de funcionar en un ancho pero no en otro.

Sepa qué no le pueden decir las herramientas

Chrome describe el modo de dispositivo como una aproximación de primer orden de cómo se ve una página en un teléfono, no el teléfono mismo. Lighthouse no puede tocar su número y esperar el aviso de marcado, y no puede decirle si su consulta de prueba llegó a la bandeja de entrada. Una puntuación alta es una evidencia útil. No es una prueba de que un cliente pueda contactarlo, y Google dice que los buenos resultados en sus informes no garantizan las primeras posiciones.

¿Qué problemas móviles le cuestan llamadas y reservas?

Ordene su lista según qué tanto bloquea cada problema que alguien lo contacte. Ningún estudio clasifica estos problemas por qué tan seguido ocurren en sitios de pequeñas empresas, así que el orden de abajo es por el daño a la vía de contacto, no por frecuencia. Una ruta de contacto rota va antes que cualquier cosa estética.

El costo de cada problema es la fricción: un visitante que no puede tocar, leer o enviar tiene un motivo para irse y probar con el siguiente negocio. Google dice que las ventanas emergentes y los cuadros de diálogo intrusivos pueden frustrar a los usuarios, erosionar la confianza y hacer que sea menos probable que vuelvan. La investigación sobre pagos móviles del Baymard Institute encontró problemas serios de formularios incluso en sitios grandes de comercio electrónico. Ninguna de las dos le pone un número a las llamadas que pierde un negocio local, y ninguna fuente lo hace. Trate cada elemento como un riesgo de consulta perdida, y arregle primero los que bloquean el contacto.

¿Ser compatible con dispositivos móviles afecta cómo Google posiciona su sitio?

Afecta lo que Google ve. Bajo la indexación mobile-first, Google usa la versión de su sitio que ve su rastreador para teléfonos inteligentes para indexar y posicionar sus páginas. Así que, si una descripción de servicio, un conjunto de enlaces o un bloque de reseñas aparece en escritorio pero está oculto o falta en móvil, es posible que Google no lo cuente cuando indexa la página. Google confirmó en octubre de 2023 que la transición a la indexación mobile-first estaba completa.

La indexación mobile-first no significa que Google entregue un bono por aprobar una prueba móvil. Significa que la versión móvil es la que cuenta, así que mantenga el mismo contenido, encabezados, enlaces y datos de contacto en el teléfono y en el escritorio. Google recomienda el diseño responsivo, donde la misma página y la misma dirección web se adaptan a la pantalla, como el patrón más fácil de mantener.

Google describe la experiencia de página como muchas señales, no un solo interruptor. La misma documentación que recomienda una buena visualización móvil también dice que los buenos resultados en los informes no garantizan las primeras posiciones. Corrija los problemas móviles porque detienen a los clientes, y deje que cualquier beneficio en la búsqueda venga del contenido que Google ahora puede ver.

¿Qué dicen las normas sobre cómo debe funcionar una página móvil?

No tiene que leer una norma para hacer la revisión de arriba, pero ayuda conocer la vara de medir detrás de un par de los puntos. Las pautas de accesibilidad del W3C, WCAG 2.2, cubren el uso móvil, y el W3C dice que la accesibilidad móvil está cubierta por WCAG en lugar de una norma móvil aparte. Dos puntos se alinean directamente con la revisión desde el teléfono.

El primero es el reflujo: el contenido debe funcionar en un ancho igual a 320 píxeles CSS sin desplazamiento en dos direcciones y sin perder información ni funciones, salvo donde un diseño en dos direcciones sea esencial, como un mapa o una tabla de datos. Esa es la prueba de deslizamiento hacia los lados desde su teléfono. El segundo es el tamaño mínimo del objetivo: en el nivel AA, los objetivos táctiles deben medir al menos 24 por 24 píxeles CSS, o estar espaciados para que un dedo no toque el equivocado, con algunas excepciones.

Estas son normas de accesibilidad, y quién debe cumplirlas legalmente depende de la organización. La norma del 24 de abril de 2024 del Departamento de Justicia de EE. UU. establece WCAG 2.1 AA como la norma técnica para el contenido web y las aplicaciones móviles de los gobiernos estatales y locales, con fechas de cumplimiento en 2027 o 2028 según la población. No crea una regla universal para negocios privados. Para su propio sitio, use estas cifras como una meta práctica para páginas legibles y táctiles.

¿Es un arreglo rápido, o el sitio necesita un rediseño?

Fíjese dónde están los problemas. Si su contenido, menú, botones y vía de contacto existen todos en móvil y solo fallan en algunos lugares, casi siempre está ante reparaciones puntuales. Si a la versión móvil le faltan cosas o no se puede hacer que funcione sin reconstruir los diseños de página, el trabajo es más grande. Google no marca una línea entre los dos casos, así que juzgue según la lista que escribió.

Problemas que suelen ser reparaciones pequeñas y puntuales

En una plantilla que por lo demás es sólida, estos suelen ser cambios contenidos seguidos de una nueva revisión en teléfonos reales: una configuración de viewport faltante, contenido que se desborda de la pantalla, texto pequeño, espaciado apretado, imágenes que no cambian de tamaño y botones con muy poco relleno. Convertir un número de teléfono simple en un enlace para llamar con un toque también suele ser pequeño, aunque el seguimiento de llamadas, el consentimiento de cookies o un widget de reservas de un tercero pueden sumar pasos.

Problemas que llevan más trabajo

Los formularios suelen quedar en un punto intermedio. Una reparación adecuada puede incluir etiquetas, mensajes de error claros, el teclado correcto para cada campo, autocompletado, validación en el servidor, protección contra spam y seguimiento de conversiones. La guía del W3C sobre identificar el propósito de la entrada es la referencia para dejar que los teléfonos autocompleten un nombre, correo o número de teléfono. Rehacer un menú o un tema de un tercero en todos los tipos de página es aún más grande.

Señales de que el sitio necesita reconstruirse

Un rediseño se justifica cuando a la versión móvil le falta contenido o enlaces principales, depende de un diseño construido solo para escritorio, no puede sostener un menú y una vía de contacto utilizables sin plantillas nuevas, o funciona como un sitio móvil aparte que no se puede mantener igual al de escritorio. Si ya está pensando en cambiar de plataforma, nuestra publicación sobre lo que realmente cambia cuando usted cambia de creador de sitios web cubre qué debe planear.

Cuando no necesita cambiar nada

Si cada tarea funciona en teléfonos reales, Lighthouse y la vista de dispositivo no muestran nada serio, su contenido móvil coincide con el de escritorio, y ni sus analíticas ni sus clientes señalan un problema móvil, es posible que no necesite ningún proyecto. Vuelva a revisar después de cambiar su tema, un complemento, un formulario o una página importante, y revise sus analíticas de vez en cuando por si el desglose por dispositivo se ve raro. Si esos números ya se ven raros de entrada, empiece por por qué Google Analytics puede mostrar cero visitantes o visitantes equivocados.

Preguntas frecuentes sobre la prueba de sitio web compatible con dispositivos móviles

¿Google todavía tiene una prueba de compatibilidad móvil?

No. Google retiró la prueba de compatibilidad con dispositivos móviles, su API y el informe de usabilidad móvil de Search Console el 1 de diciembre de 2023.

¿Qué debo usar en lugar del verificador móvil de Google?

Google nombra a Lighthouse de Chrome. Úselo junto con la vista de dispositivo de Chrome y, sobre todo, una revisión de tareas en un teléfono real.

¿Cómo veo cómo se ve mi sitio web en un teléfono desde mi computadora?

En Chrome, haga clic derecho en la página, elija Inspeccionar y active el modo de dispositivo. Pruebe anchos de 320, 375 y 425 píxeles. Es una aproximación, así que confirme cualquier cosa importante en un teléfono real.

¿Qué significa la indexación mobile-first para mi sitio?

Google indexa y posiciona principalmente la versión móvil de sus páginas, tal como la ve su rastreador para teléfonos inteligentes. Mantenga el mismo contenido y los mismos enlaces en móvil que en escritorio.

¿Necesito un sitio web móvil aparte?

Casi nunca. Google recomienda el diseño responsivo, donde la misma página y la misma dirección web se adaptan al tamaño de la pantalla.

¿Cuál es la señal de alerta más rápida de que mi sitio no es compatible con dispositivos móviles?

Cualquier dificultad para encontrar, tocar, leer o enviar su acción de contacto principal en un teléfono. Pruebe eso antes que cualquier otra cosa.

Para cerrar

Comprobar si su sitio web es compatible con dispositivos móviles se reduce a un teléfono y quince minutos. Realice las cinco tareas en tres páginas, deslice hacia los lados, pruebe con datos móviles y déle el teléfono a otra persona. La propia prueba de Google no existe desde el 1 de diciembre de 2023, así que use Lighthouse y la vista de dispositivo de Chrome como segunda opinión, y recuerde que Google posiciona la versión móvil que ve.

Con una lista escrita ordenada según qué bloquea el contacto, usted sabe qué arreglar primero, qué puede esperar y si está ante una reparación o una reconstrucción. Cuando la lista salga limpia, puede dejar de preocuparse por esto y simplemente volver a revisar después del próximo cambio grande.

Si su lista tiene puntos que prefiere no arreglar usted mismo, Web Leveling puede repasarla página por página y teléfono por teléfono. Nuestro equipo de diseño web construye sitios personalizados y responsivos que funcionan igual en un teléfono que en una computadora, y le diremos cuándo su sitio solo necesita una reparación pequeña. Trabajamos con pequeñas y medianas empresas de todo el país y del extranjero. Envíenos lo que encontró en su revisión con el teléfono, y le responderemos con cuáles puntos son arreglos rápidos y cuáles son trabajos más grandes.

Términos