El Comercio: imágenes en la versión móvil.

¿Es tu sitio web realmente optimizado para móviles?

A finales de marzo de 2021 Google va a cambiar todas las páginas web al “mobile first index”. Esto significa que el motor de búsqueda va a utilizar la versión móvil de una página web para los rankings.

La mayoría de los sitios ya tiene una versión móvil o utiliza un diseño responsivo. Esto es suficiente para el “mobile first index”. Pero no necesariamente significa que estos sitios realmente están optimizados para móviles.

Navegando con mi teléfono en Internet encuentro muchas páginas web que son responsive pero que no funcionan bien en un dispositivo móvil. Sin embargo, pasan la prueba de la herramienta “prueba de optimización para móviles” de Google.

En este artículo quiero mostrar algunos errores/problemas típicos que tienen muchas páginas que supuestamente están optimizadas para móviles:

¿Cómo es la velocidad de carga en móviles?

La velocidad es un tema importante, especialmente para el usuario. Nadie quiere esperar mucho tiempo hasta que una página web se cargue. También es un factor que influye en el SEO. Con los nuevos Core Web Vitals su importancia para el SEO va a aumentar.

Lo que muchos webmaster parece que no entienden es que la velocidad de carga es especialmente importante para dispositivos móviles.

Está bien si una página se carga rápidamente según la versión gratuita de GTmetrix o Pingdom. Pero estas herramientas realizan en su versión gratuita pruebas con la versión desktop de una página web. No revisan la versión móvil.

Obviamente, todo lo que ayuda a mejorar la velocidad de carga en desktop también ayuda a mejorar la velocidad en el móvil. Sin embargo, solo porque una página web se carga en menos de 3 segundos según la versión gratuita de GTmetrix no significa que también en el móvil se carga rápidamente. (Lee también: Velocidad de carga: en cuáles herramientas o valores confiar.)

¿Todo el contenido que está en la versión desktop también está en la versión móvil?

Esto es un tema importante. Google utilizará para el ranking solo el contenido que encuentra en la versión móvil de una página web. Si en la versión móvil hay menos contenido que en la versión desktop los rankings de una página web pueden ser afectados negativamente.

Esto muchas veces es un tema con imágenes. Por ejemplo, en la versión móvil se elimina imágenes para que una página funcione bien.

¿Todo el contenido está optimizado para móviles?

Un problema que he visto en varios sitios es que no todos los contenidos son optimizados para móviles. Por ejemplo, las páginas web están optimizadas, pero existen enlaces a archivos pdf. PDF normalmente no funciona bien en móviles.

Un ejemplo es el sitio de Deprati. En productos de “Electrohogar” aparecen dos enlaces. Uno a “garantías y tiempos de entrega” y otro a “condiciones de servicio técnico y validez de garantía”. Son dos archivos en formato pdf.

Enlaces a archivos pdf en el sitio de Deprati.
Enlaces a archivos pdf en el sitio de Deprati.

¿El texto es suficiente grande para poder leerlo bien?

Algunas páginas web utilizan un texto muy pequeño para su versión móvil. Es recomendable utilizar un tamaño de al menos 16px. Es muy difícil leer textos pequeños en móvil.

Con la herramienta para la “prueba de optimización para móviles” puedes ver si Google dice que el texto es muy pequeño. Sin embargo, para algunas páginas Google dice que el tamaño del texto está bien, pero en verdad para el usuario el texto es muy pequeño.

¿Se puede ver todos los contenidos?

Aquí creo que hay tres aspectos importantes:

Contenido en tabs: Especialmente en móvil se utiliza tabs. Los usuarios tienen que hacer clic en un botón o algo parecido para ver el contenido. Hay diferentes maneras de hacerlo. El problema es que lo que dice Google sobre el tema del contenido en tabs no es tan claro: ¿el contenido dentro de tabs tiene la misma importancia que el contenido fuera de tabs (el contenido inmediatamente visible)?

Texto encima de imágenes: Es un tema que puede causar problemas. Por ejemplo, tienes una imagen de fondo con personas a lado izquierdo y a lado derecho un edificio medio oscuro. Pones texto en blanco encima de la parte derecha de la foto donde está el edificio oscuro. Así aparece bien y los usuarios pueden leer el texto.

Pero en la versión móvil solo está visible el lado izquierdo de la foto con las personas. El texto que estaba en el desktop a lado derecho encima del edificio ahora en móvil está encima de las personas. Y por su color blanco es difícil leerlo.

Un ejemplo de esto es el sitio web de Guillermo Lasso:

Guillermo Lasso: texto sobre imagen.
Guillermo Lasso: texto sobre imagen, ejemplo: https://guillermolasso.ec/conoceme/

El contenido principal no es inmediatamente visible: Digamos en la versión desktop tienes tres columnas, cada una con una imagen y texto. En móvil solo puedes mostrar una sola columna. Para ver las otras columnas el usuario puede deslizar la columna visible hacia un lado. Aquí las preguntas son:

  • ¿Cuál contenido es inmediatamente visible?
  • ¿Sabe el usuario que hay más contenidos?

¿Las imágenes son suficientes grandes para verlas/leer el texto de las imágenes?

Muchos sitios web, especialmente comercios electrónicos, utilizan banners:  imágenes con texto. Estos banners normalmente son optimizados para la versión desktop.

En la versión móvil la imagen con el texto es mucho más pequeña. Y de repente ya no se puede leer el texto dentro de la imagen:

Página de inicio de Deprati con un banner.
Página de inicio de Deprati con un banner: ¿puedes leer todo el texto?

Lo mismo pasa en muchos mailings. Aquí también aparecen banner que funcionan bien en el desktop, pero no en móvil.

¿El menú funciona bien?

De vez en cuando llego a una página dónde el menú no funciona en la versión móvil. O el menú principal funciona, pero los submenús no.

En la versión desktop muchas tiendas en línea muestran menús grandes con muchos submenús. En la versión móvil solo muestran el menú principal. Si entras a una categoría principal te aparecen las subcategorías que en la versión desktop están en el submenú.

Esto puede ser una buena opción porque a veces es difícil utilizar en móvil un menú muy grande. Pero el problema puede ser que así las subcategorías no reciben muchos enlaces. Esto podría afectar los rankings.

En mi artículo sobre los microondas y el SEO me di cuenta de que tiendas en línea que tienen un enlace desde el menú a la subcategoría “microondas” consiguen mejores rankings buscando por “microondas” que tiendas en línea que no tienen un enlace desde el menú a esta categoría.

¿Se puede utilizar todo el contenido de las páginas?

Aquí creo que el mejor ejemplo es El Comercio. En las páginas de los artículos hay -entre la barra de la navegación y el título del artículo- una parte con imágenes pequeñas.

En la versión desktop hay un poco de texto a lado de estas imágenes. Puedes hacer clic en los textos para abrir otro artículo:

El Comercio: imágenes con texto en la versión desktop.
El Comercio: imágenes con texto en la versión desktop.

Pero en móvil solo aparecen las imágenes sin texto. No puedes hacer clic. Las imágenes no sirven para nada en móvil.

El Comercio: imágenes en la versión móvil.
El Comercio: imágenes en la versión móvil: no puedes hacer clic en las imágenes.

¿Pop ups y otra publicidad molestosa?

El mejor -o peor- ejemplo es El Comercio con sus pop ups grandes y los videos de publicidad que aparecen adicionalmente como pop ups. Otros medios de comunicación lo hacen parecido. En El Universo también aparecen pop ups molestosos.

Otros ejemplos son pop ups para suscribirse a un newsletter o estas “notificaciones push”.

¿Se puede manejar el carrito de compras fácilmente?

Esto es relevante para el comercio electrónico: Solo porque todo es responsive no significa que se puede hacer fácilmente compras online. Meter productos al carrito de compra, crear una cuenta, poner una dirección de factura y de entrega y escoger una forma de pago son pasos que muchas veces funcionan más fácilmente en una computadora que en un teléfono.

En los últimos años esto ha mejorado. Hoy en día existen por ejemplo los botones de pago que hacen el pago a través de móviles más fácil. Sin embargo, siempre es importante revisar si procesos como el check out funcionan bien en móviles.

¿Hay botones para compartir contenidos en redes sociales, chats, Facebook Messenger que molestan?

El uso de botones para compartir contenidos en redes sociales, chats o Facebook Messenger puede ayudar a los usuarios.

Pero a veces estos botones son encima del contenido de una página web y no permiten ver todo el contenido o hacer clic en un enlace.

¿Tú sitio tiene un favicon?

No es un tema de la usabilidad. Pero Google muestra en los resultados de búsqueda en móviles los favicons de las páginas web. Por eso debes utilizar un favicon en el tamaño correcto:

“El icono de página debe ser cuadrado y tener un número de píxeles múltiplo de 48 (por ejemplo: 48×48, 96×96 o 144×144)” 

https://support.google.com/webmasters/answer/9290858?hl=es

El uso de un favicon con el tamaño adecuado ayuda a mejorar el CTR desde los resultados de búsqueda.

Resumen

No solo porque las páginas de un sitio son responsive un sitio web es realmente optimizado para móviles. Otros factores importantes que definen si un sitio web está optimizado para móviles son la velocidad de carga y la usabilidad, entre otros.


También te puede interesar:

Consejos no típicos para optimizar la velocidad de carga de WordPress.

Velocidad de carga de tiendas en línea y el “largest contentful paint”.

Ecuador: Medios de comunicación y la velocidad de carga.