Más del 50% de la población del mundo utiliza dispositivos móviles y el m-commerce representa ya más del 25% del total de las compras online. Con estas cifras en la mano, es evidente que tener un sitio web mobile friendly es, más que una recomendación, una necesidad. Repasemos, por tanto, algunos de los puntos más importantes a cuidar a la hora de lograr que nuestro sitio web, en su versión móvil, sea capaz de cautivar a los potenciales clientes que nos visiten.

Escoger la configuración móvil que preferimos

Como ya comentamos en otro post y de acuerdo con las Webmasters Tools de Google, existen tres tipos de configuraciones de sitios móviles. De ellos, el más común es el Responsive Web Design, en cuya configuración el servidor siempre se adapta el mismo código en una único URL independientemente del tipo de dispositivo, y ajusta la prestación y presentación de la página a cada tamaño de pantalla gracias a la inclusión de la etiqueta viewport.

Esta etiqueta informa al navegador sobre cómo debe mostrar la página en cada tipo de dispositivo. Sin ella, los navegadores móviles adaptan el contenido automáticamente a la máxima anchura de la pantalla.

Otra opción es alojar nuestra web en dos direcciones URL separadas, con código diferente para la versión de escritorio y la de dispositivos móviles. Con esta técnica, todas las páginas de escritorio tienen sus equivalentes móviles. Es vital, en este caso, establecer la correspondencia bidireccional en cada caso para ayudar a Google a entender la relación entre las dos versiones.

La tercera opción es el diseño dinámico. La publicación dinámica es una configuración en la que el servidor responde con varios códigos HTML (y CSS) en la misma URL dependiendo desde el dispositivo que se solicite la página. Dado que puede ser problemático para un motor de búsqueda detectar cuando una web utiliza su versión móvil, se recomienda darle una pista mediante el uso de la cabecera Vary HTTP, código que le indica a Google cuando se debe mostrar el contenido móvil optimizado.

La primera opción, el Responsive Web Design, es el recomendado ya que ayuda a Google a indexar nuestro sitio web. Por varios motivos. En primer lugar, el robot de Google necesita un solo rastreo de nuestro sitio web, lo que mejora significativamente su eficiencia. En segundo lugar, sólo hay una URL, por lo que compartir y vincular a nuestra web es más fácil. Además, no es necesario mantener varias páginas para el mismo contenido ni se necesitan redirecciones de ningún tipo.

Ayudar a los usuarios a encontrar lo que buscan

Deberemos, en primer lugar, entender cómo interactúan con nuestro sitio web nuestros clientes móviles. Para ello, es fundamental saber analizar el tráfico recibido a través de Google Analytics y descifrar de dónde proceden nuestros usuarios y qué tipo de contenido les interesa ver en su dispositivo.

Este análisis nos formará una idea bastante exacta de lo que los usuarios de smartphones y tablets están buscando en nuestro sitio web. Como consecuencia, deberemos ser capaces de reorganizar y adaptar nuestro contenido a ese público específico. Pensemos cómo simplificar su navegación y reducir las interacciones innecesarias.

Organizar el contenido orientado a la búsqueda móvil

Se ha demostrado que es mucho más difícil de entender una información si se lee en una pantalla móvil, lo cual nos obliga a ser muy concisos y a cuidar la organización de nuestro contenido. Nuestros visitantes sólo leerán nuestro contenido si encuentran información de utilidad rápidamente.

Establecer un objetivo para cada página de manera que proporcionemos la información necesaria en cada caso,  nos ayudará a determinar qué información debe ser incluida y cuál excluida de la versión para móviles, limitando la cantidad de texto y manteniendo una estructura de página clara y bien organizada.

Es fundamental escoger un diseño simple que no provoque problemas a la hora de hacer tapping ni en las llamadas a las acción (CTA) por estar demasiado cerca unas de otras o por un tamaño no adecuado. Del mismo modo, no tiene sentido incluir formularios que, en la gran mayoría de los casos, no se van a rellenar al estar navegando desde móvil.

Ajustar los tamaños y tipos de fuentes

Es recomendable utilizar fuentes estándar y comprobar si escalan correctamente, evitando personalizadas, y tener tamaños consistentes, ya que no todas las fuentes ni todos los tamaños pueden mostrarse correctamente en pantallas móviles y, en caso de hacerlo, pueden llevar demasiado tiempo para cargar.

Una buena opción, además, es restringir el uso de diferentes tipos de fuentes para evitar que nuestro diseño se vea desordenado.

Atención a los elementos interactivos

Las pantallas táctiles lo son por un motivo: están hechas para tocarlas. Cuidar el diseño para que la experiencia sea fácil y agradable es fundamental.

Apple recomienda un tamaño de 44 píxeles de ancho por 44 píxeles de alto para las llamadas a la acción, aunque, según diversos estudios, la anchura media del dedo está entre 16 y 20 mm, que representan entre 45 y 57 pixeles. Deberemos tener en cuenta estas medidas a la hora de diseñar nuestras llamadas a la acción.

Simplificar la navegación

La navegación de nuestro sitio web debe ser fácil e intuitivo. Es esta una premisa en cualquier web, pero debería llevarse al extremo en la versión para móviles. Todos los elementos seleccionables deben estar lo suficientemente separados como para que no haya interacciones indeseadas entre unos y otros. La usabilidad mejora mucho dejando, por ejemplo, un pequeño borde blanco entre el contenido y el borde exterior de la pantalla, que ayudará, además, a que la disposición se vea más clara y fácil de escanear de un vistazo.

Deberemos escoger el tipo de menú de navegación que mejor se adapte a nuestro contenido. Los más utilizados son la barra de navegación (con iconos, o simplemente secciones, en los que hacer click/tap) o el menu desplegable que permite más información y opciones a la hora de clasificar el contenido, pero puede resultar complicado de manejar con gestos táctiles.

Incluir contenido visual

El contenido visual (videos, infografías, imágenes, presentaciones…) son cada vez más importantes en la búsqueda móvil al permitirnos reemplazar largos bloques de texto con gráficos atractivos, que comunicarán mucho mejor a los usuarios en las pantallas de móviles. Deberemos, obviamente, asegurarnos de que ese contenido visual está optimizado correctamente para móvil ya que, de lo contrario, tendrá un impacto negativo en la velocidad del sitio.

Uso de imágenes de la resolución adecuada, sin auto-zoom que interfiera con la navegación y/o videos subidos a nuestro canal de Youtube, que se comportan de manera completamente responsive, son solo tres de las opciones que deberíamos cuidar.

Facilitar la llamada desde el propio dispositivo

De acuerdo con un estudio de Google, el 70% de los usuarios móviles se han puesto en contacto telefónico con las empresas tras estar navegando en su sitio web móvil. Huelga decir, por tanto, que nuestro teléfono deberá estar bien visible o, mejor aún, con un Call to Action llamativo que les permita ponerse en contacto con nosotros con solo un click.

Cuidar la velocidad de la página

Los usuarios móviles buscan experiencias web rápidas y sin errores, siendo absolutamente intolerantes con webs con mala usabilidad, en especial con aquellas cuyo principal defecto es una carga lenta.

Si la carga de nuestra web móvil tarda más de 3 segundos, el 43% de los visitantes no volverá y el 40% se irá a una página de la competencia. Un segundo de retraso en el tiempo de carga se traduce en un 11% menos de páginas vistas, una disminución del 16% en la satisfacción del cliente y la pérdida de un 7% de las conversiones.

#fun4DJ #fun4Break #fun4Mobile

mobile friendly