¿Es tu sitio mobile friendly o responsive? 6 claves y más consejos para optimizar tu sitio web

El diseño de tu sitio web es mucho más que su apariencia. Se trata de la experiencia que les das a tus usuarios: tanto la facilidad para navegar, acceder a sus páginas y consumir su contenido sin obstáculos, como el tamaño de la letra o los colores del fondo que esconden llamadas a la acción o enlaces que podrían interesarles a las personas. Uno de esos aspectos es si el sitio es mobile friendly.

Ya no es suficiente si en la pantalla de un ordenador de escritorio luce fenomenal y es fácil explorarla. Si cuando abres tu sitio en un celular se convierte en una pesadilla, más vale hacer cambios. En este artículo vamos a mencionarte cómo pasar esta prueba, pero antes veamos lo básico.

Esto significa que no tiene un diseño especial para una pantalla más pequeña, sino que escala las dimensiones sin perder información. No es la más sofisticada, pero es una solución para evitar que suceda algo como que los textos se corten en la pantalla, que el contenido se rompa o que no pueda abrirse en lo absoluto cuando se visite desde un celular u otro dispositivo distinto a una computadora de escritorio o laptop.

¿Por qué es importante que tengas un sitio mobile friendly?

Como ya mencionamos más arriba, un sitio mobile friendly mejora la experiencia del usuario cuando lo visita desde un smartphone. Pero también es importante porque Google toma en cuenta que los sitios cumplan con esta característica para analizarlos y calificarlos.

Y si bien nada indica que el posicionamiento SEO sufre si no cuentas con una versión mobile friendly, desde Google recomiendan que hagas esta optimización para aparecer en mejores resultados de búsqueda desde un dispositivo móvil, además de que es cinco veces más probable que la gente abandone un sitio que no tenga esta característica.

Recuerda, desde el 2017 la mitad de las búsquedas en internet se hicieron desde un dispositivo móvil y en 2019 casi el 89,96% de las que se realizaron en Google fueron en un celular o una tablet. Estas pueden ser algunas de las razones por las que el mobile first (una tendencia de diseño web) ha ganado preponderancia.

Si no lo has escuchado nombrar, mobile first es cuando se diseña un sitio primero para dispositivos móviles y luego se adapta a las pantallas de escritorio. Es decir, al revés de lo que explicamos primero: en lugar de concebirlo para la navegación en una PC o laptop, se concibe para un celular o tablet, lo que asegura que esté optimizado para estos formatos sin errores.

Seguro ya tienes la duda, ¿cierto? ¿Tu sitio web es o no es mobile friendly? Existe una forma de averiguarlo: con la Prueba de optimización para móviles de Google. Solamente ingresa la URL de tu sitio o el código que quieres probar y se hará una inspección que tomará unos segundos. Cuando termine te mostrará tus resultados. Si todo está en orden, verás algo así:

Imagen de Google

Esta prueba es para páginas y te la recomendamos cuando notes que una de tus páginas tiene problemas para visualizarse o tiene una tasa de rebote muy alta cuando la visitan desde un dispositivo móvil. Además de avisarte si hay un problema para cargar la página y si es mobile friendly, Google te muestra una captura de pantalla del lado derecho para que la veas cómo lo hacen los usuarios de un teléfono inteligente.

De hecho, hace poco Google lanzó una nueva herramienta, Métricas web principales, que establecen 3 elementos que garantizan que la experiencia del usuario en un sitio sea positiva y, por lo tanto, ayude en el ranking de la web que se visita:

• Largest contenful paint (LCP): mide el tiempo de carga de contenido a partir del elemento más grande (generalmente una imagen o video) que el usuario ve sin hacer scroll down en su dispositivo. Si el tiempo es menor a 2.5 segundos, Google lo considera bueno.
• First input delady (FID): es la responsividad de la página o el tiempo que hay entre una acción hecha por el usuario (como un clic) y la respuesta del navegador. Si transcurre más de 0,1 segundos, Google lo clasifica como lento.
• Cumulative layout shift (CLS): se refiere a la estabilidad visual. Algo que tiene que ver con las ocasiones en que los elementos de una página se mueven a medida que se cargan. Seguro lo has visto en un sitio: lo cargas, y mientras aparecen las imágenes, videos, botones y texto, el diseño se mueve un poco. Esto provoca que des clics incorrectos o tengas que moverte para leer un párrafo que parece saltar de pronto. Cada vez que sucede, se te suman puntos. Y para que Google lo califique de forma favorable, no debe ser mayor a 0,1. 

A partir de mayo de 2021, la plataforma comenzará a implementar estas puntuaciones a todos los sitios web, así que te recomendamos que hagas una auditoría a tus páginas y sigas las actualizaciones que se publicarán en su blog para que no afecte al ranking de tu sitio en los resultados de búsqueda de Google.

Mientras tanto, existen algunas pautas que te permitirán conocer qué tan optimizado está tu sitio web. Toma nota.

1. No uses Flash

Aunque fue utilizado por prácticamente todos los sitios del mundo hace 20 años, Flash es un formato para presentaciones multimedia que no pasó la prueba del tiempo, sobre todo para las necesidades de los smartphones, pues no es compatible con ellos. Para eso, mejor usa el Javascript y el CSS. 

2. Brinda una lectura sencilla

Es decir, que no sea necesario hacer zoom en la pantalla o recorrerla porque los renglones de texto se cortan en los límites de la pantalla. 

3. Ofrece contenido que se adapta a la pantalla

Tus publicaciones de blog deben leerse cómodamente en un dispositivo móvil, a pesar de que implique hacer scroll-down en más ocasiones que en la versión para escritorio. Sin embargo, tanto para reproducir un video o ver una imagen, las dimensiones del smartphone o la tableta no deben impedir que se perciban completamente.

4. Coloca los enlaces separados

Si quieres que tus usuarios hagan clic donde deseas, debes brindar el espacio para hacerlo. No es lo mismo acceder a un enlace con un mouse o desde el track-pad, que con el dedo índice. Procura que exista espacio suficiente para que las personas no comentan errores al hacer clic, ya que también afectará tu tasa de clics y la cantidad de conversiones en tus llamadas a la acción.

5. Los elementos táctiles también tienen espacio entre sí

Al igual que con los enlaces, haz los botones del tamaño suficiente para descargar documentos, acceder a páginas destino o llenar formularios: que ir de un campo a otro no sea una tortura, porque esto afectará el rendimiento de tu sitio y la experiencia del usuario.

6. Procura que haya una carga rápida

Para que las páginas de tu sitio se carguen con rapidez deben tener elementos optimizados. Las imágenes deben ser de buena calidad, pero pesar pocos kilobytes. Si vas a tener videos, asegúrate de que no se conviertan en un lastre, es decir, que se reproduzcan sin trabarse.

Cuando se habla de este tema, es posible que surjan otros conceptos como «sitio móvil» o «diseño responsivo», los cuales son diferentes al de mobile friendly. Por eso queremos aclararlos para evitar confusiones.

Diferencia entre mobile friendly, responsive design y sitio optimizado para móvil

Mobile friendly

Si un sitio es mobile friendly quiere decir que cuando se abre en un dispositivo móvil lo que se ve en la versión de escritorio se adapta a la escala de la pantalla del smartphone o la tableta. El acomodo de las letras, menús, imágenes y demás elementos es idéntico que cuando se abre en una computadora de escritorio, solo que en menor tamaño, lo que facilita su visualización y mejora la usabilidad.

Responsive

Por otro lado, si es responsive significa que se pensó en las distintas apariencias que tendrá para cada tipo de pantalla disponible. Es decir, que tiene un diseño para escritorio, otro diferente para tableta y uno más para celular. En estos casos los menús, imágenes, enlaces, textos, videos y otros elementos no lucen igual en todos los dispositivos, pero tienen las mismas funciones. Es un trabajo de diseño mucho más sofisticado que va más allá de una adaptación a escala: es el uso optimizado de las dimensiones de cada dispositivo, hecho a la medida. Es el mejor para la experiencia del usuario.

Sitio optimizado para móvil

Es el que fue creado, desde su concepción, para usarse en una tableta o teléfono celular. Cuando un usuario busca un sitio web desde su smartphone, el dominio lo detecta y lo dirige al sitio móvil porque será más fácil navegar y tendrá menos información que la versión de escritorio.

Por lo tanto será más rápido en su navegación, pese a ello, no es buena opción para navegar desde una pantalla de escritorio por lo que tendrás que considerar redirigir a esta versión solo cuando se detecte que los usuarios acceden desde un dispositivo móvil. Es una alternativa a la que puedes acceder si tus recursos bastan para cubrir la gran cantidad que requiere ser invertida.

Ahora que tienes esta información, seguro ya hiciste la revisión y la prueba de Google. Si no la pasaste revisa las recomendaciones siguientes para que empieces a mejorar.

¿Qué hacer si tu sitio no está optimizado para ser mobile friendly?

Lo que debes hacer si tu sitio no está optimizado para dispositivos móviles dependerá de las circunstancias específicas, de los resultados que quieras obtener y de los recursos con los que cuentes.

Si tú construiste tu sitio y no está optimizado, lo más probable es que elegiste una plantilla que no es mobile friendly. Por fortuna, plataformas como WordPress, Wix, Google Sites o Joomla! ofrecen una gran variedad de opciones con esta característica fundamental (o con la opción responsive) y puedes implementarlas fácilmente para mejorar la apariencia de tus páginas y optimizar su rendimiento (recuerda, si no tienes problema con los cambios gráficos que sucederán al cambiar de plantilla y hay opciones responsive, será mejor elegir esta alternativa que una alternativa mobile friendly).

Si utilizas un CMS (sistema de gestión de contenidos), actualízalo; en la mayoría de los casos se aplicará la característica de mobile friendly de forma automática. Además, Google te ofrece una guía para asegurarte de que los sitios que creaste con ellos están optimizados para dispositivos móviles.

¿Es tu tema uno que fue creado especialmente para ti y quieres mantenerlo porque es parte del branding de tu negocio? Aquí necesitarás a un desarrollador con conocimientos avanzados de HTML y CSS para adaptar tu tema a un entorno mobile friendly o responsive. Definitivamente no es una tarea imposible, pero requerirá de un buen uso de los códigos.

También puedes considerar la creación de un sitio optimizado para móviles, como el que mencionamos más arriba, así aparecerá en los resultados de búsqueda cuando alguien navegue desde un dispositivo móvil (no te olvides que en esta opción te conviene mantener en línea las dos versiones de tu sitio y redirigir solamente a los usuarios que accedan desde dispositivos móviles a tu versión optimizada).

Una última opción es utilizar Accelereted Mobile Pages (AMP), un marco de trabajo con especificaciones de código libre, para que se creen páginas, historias, sitios, correos y anuncios poniendo de prioridad a los usuarios de móvil. Seguro te ha tocado hacer una búsqueda en Google desde tu celular y has notado que en algunos de tus resultados aparece un rayo:

Imagen de Google

Eso quiere decir que esa página es parte de AMP y se carga de forma más rápida que las demás que aparecen ahí.

La optimización web y tu gestor de contenidos

Un buen CMS te ayudará a resolver el problema de tu web cuando se trata de su navegación en dispositivos móviles. El CMS Hub hace muchas cosas para tu sitio, desde integrar diferentes herramientas de HubSpot (que hacen la experiencia de navegación mucho más amable a tus visitantes) hasta construir un sitio que responda a las necesidades de un usuario de dispositivos móviles.

Gracias a sus temas prediseñados creados para que tus contenidos y secciones (junto a todos los elementos que los componen) lograrás que cada página de tu sitio luzca bien en diferentes pantallas. Además, te da la posibilidad de probar con hasta cinco variantes de la misma página, para que compruebes cuál tiene mejor desempeño y así te asegures de que está optimizada en su mejor versión.

Sigue los consejos que te hemos compartido en este artículo y no olvides buscar ayuda de diseñadores web si necesitas más asesoría. En poco tiempo tendrás un sitio eficiente, atractivo y, sobre todo, mobile friendly.