¿Qué es un sitio mobile friendly? Tips y herramientas para lograrlo

Hoy en día casi dos tercios de las búsquedas en internet son realizadas a través de un dispositivo móvil, es por eso que tener un sitio mobile friendly será muy importante, de no ser así, podrías estar perdiendo una cantidad enorme de visitantes. Aunque no lo creas, algunas de las visitas pueden abandonar tu sitio web debido a la falta de optimización para dispositivos móviles. Por esta razón debes ser consciente de la importancia de que tu sitio esté totalmente optimizado para este tipo de visitas, permitiéndote llegar a más público objetivo y hacer que disfrutan la experiencia en tu sitio.

En pocas palabras, el término mobile friendly, como su nombre lo dice, hace referencia a los sitios amigables con dispositivos móviles, esto implica que los elementos de tu sitio como por ejemplo imágenes, texto, videos, links, entre otros deben de ser visibles y accesibles cuando se desee tener acceso a través de celulares o tablets, o en específico pantallas más pequeñas. Esto pensando en poder ofrecer una gran experiencia a las personas que visiten tu sitio desde dispositivos móviles.

Cuando se piensa en el diseño de una página, lading page o un e-commerce, el diseño mobile friendly, será necesario pensar en 3 aspectos importantes: 

• El espacio es reducido
• La atención del usuario se reduce
• Regularmente, las personas que buscan algo desde un dispositivo móvil, lo hacen en búsqueda información específica que le ayude a resolver su duda o problema.

Este tipo de diseño web, es se ha convertido en una de las tendencias e-commerce de los últimos años. Es muy importante considerar que cada sitio de este tipo debe ser pensado, ya que la capacidad de visualización será bastante diferente y más limitada en comparación de la pantalla completa de alguna laptop o computadora de escritorio

Piensa en forma móvil

Como se mencionó, la navegación móvil ha rebasado con creces la navegación a través de computadoras y laptops, es por eso que el diseño de los nuevos sitios webs ahora tiene que ser pensando también en tabletas y celulares. Plantear desde el inicio una página o sitio web amigable para dispositivos móviles puede tener varias ventajas, además de lo obvio como resolver el tema de ser mobile friendly, también estarás forzado a encontrar una forma práctica y minimalista de presentar tu sitio, manteniendo así solo lo más importante sin perder información, consiguiendo así tener un espacio virtual con mejores características para su navegación y carga dentro de internet.

Cuida el tamaño

El tamaño de la pantalla de los celulares puede variar dependiendo el modelo, sin embargo, la gran mayoría responden a la dimensión 360×340 o una relación 9:16, pero si te quedan dudas, en Google Analytics puedes encontrar información sobre el dispositivo más utilizado de tus visitantes, y así adecuarte a sus características. Para la fuente será bueno considerar un tamaño entre 14 a 16px al menos, esto para que el texto pueda ser legible en un celular, por ejemplo, si bien para los títulos no hay algún estándar será importante que consideres mantener la jerarquía tipográfica. Para las imágenes o elementos visuales tampoco hay como tal un estándar, ya que estas pueden utilizar toda la pantalla o en caso contrario es más sencillo hacer Zoom a alguna imagen en algún celular o tablet. Por último, los botones, estos deben tener un buen tamaño, ya que a veces resulta menos preciso dar clic a algo al utilizar las pantallas touch de los celulares y tablets, en este aspecto se suele recomendar botones de entre 42 a 72 px para un acceso más sencillo.

La orientación

Si bien tenemos la posibilidad de visitar páginas de forma horizontal cambiando la orientación de nuestro celular, la verdad es que la mayor parte de la navegación se realiza de forma vertical, esto ofrece una posibilidad interesante en la cual puedes plantear un sitio a una solo columna, motivando a tus visitantes a seguir scrolleando o bajando dentro de tu sitio, también le puedes dar un aspecto limpio y ordenado, utilizando paddigns, cambios de color o de fondo por ejemplo.

El menú

Este apartado de un sitio web puede resultar muy importante, ya sé que será el acceso a las diversas páginas que ofreces dentro de un sitio, debido al espacio disponible será importante hacer que este elemento se presente de la mejor manera para ofrecer la mayor información posible sin entorpecer la navegación, la forma de menú más común (y probablemente la más funcional) es una barra lateral a través la cual se tiene acceso seleccionando las famosas 3 líneas (como en Instagram), sin embargo, también podrías implementar un menú un la parte superior de tu página donde al seleccionar se desglose hacia abajo toda la información del apartado seleccionado. Recuerda que es importante tener en mente presentar la información pertinente y más importante.

Pulgares arriba

Recordemos que mayor parte de la navegación móvil se lleva a cabo con los pulgares, por eso será importante considerar esto dentro de tus prioridades, ya que si colocas cierta información o elementos en algunas zonas de la pantalla, la navegación se podría volver complicada, te compartimos esta imagen con la referencia del alcance aproximado de los pulgares al navegar en un celular.

Recuerda que el mejor mindset será tener presente lo más lógico, que este será un sitio pensado para dispositivos móviles, piensa en cómo te gustaría a ti navegar a través de tu celular, que elementos quieras tener más cerca y cómo los acomodarías para poder lograr esto.

A continuación te vamos a compartir 2 herramientas que te podrían ser de mucha utilidad para poder verificar que tu sitio sea mobile friendly y lo mejor es que son gratis.

Google Search Console:

Esta herramienta de Google es bastante útil, ya que lo único que debes hacer es ingresar la URL del sitio o página web que quieras revisar y después de unos segundos te arrojará información, donde podrás ver si tu sitio está optimizado para la navegación móvil y de no ser así, te ofrecerá un pequeño feedback al respecto.

Pingdom:

Esta herramienta te permite ver el tiempo de carga y el peso de una página web, lo cual te resultará bastante útil al analizar su funcionalidad para navegación móvil y navegación en celular. Si tu sitio llegase a ser muy pesado, tardará más en cargar en un monitor, por ende para un celular o tablet el tiempo de carga podría ser mayor, es por eso que será importante que mantengas tu sitio lo más ligero posible para mejorar tiempos de carga.