Cuando desarrollamos una nueva página web, damos mucha importancia al diseño, el aspecto que tenga nuestra web. Buenas fotografías, diseños coloridos y atractivos, etc. Muchas veces incluso anteponemos un diseño atractivo, atrevido y que impacte, sobre la facilidad de navegación para el usuario. Pero tendemos a olvidarnos de la versión móvil. Si, creamos nuestras webs para que sean responsives o para que tengan una versión adaptada a móviles, pero sí de todo el tiempo del desarrollo web dedicamos un 10% a la versión móvil, ya suele ser mucho.
Desde hace un año, las visitas a las webs desde dispositivos móviles (teléfonos y tablet) han superado a las visitas desde ordenadores de sobremesa. Es decir, que esta versión móvil, a la que solo prestamos un 10% de nuestro tiempo de desarrollo, es lo que la mayoría de nuestras visitas ven.
Aunque cuidemos técnicamente las versiones móviles, teniendo en cuenta todas las buenas prácticas en cuanto a CSS, código, JAVA, etc, nos olvidamos un poco del aspecto, del diseño. De lo engorroso que puede llegar a ser para el visitante navegar nuestra web en versión móvil.
En este artículo no vamos a entrar en aspectos técnicos para mejorar la versión móvil de nuestra web. Vamos a ver algunos puntos que se nos suelen olvidar y que son importantes para la satisfacción del visitante desde un dispositivo móvil.
1. Imágenes
Es importante comprimir adecuadamente las imágenes para ganar velocidad de carga. Desde dispositivos móviles se navega con velocidad 3G/4G, hay limitación en el consumo de datos, y nos interesa que la web cargue lo antes posible para que la experiencia de quien visita nuestra web sea satisfactoria. Pero no nos tenemos que olvidar de que quizá, las imágenes que en la versión ’normal’ quedan tan bien, no son adecuadas para un dispositivo móvil. En general en smartphones, navegamos en vertical. Sin embargo, en los ordenadores las webs tienen un anchura mucho mayor, por lo que destacan las imágenes apaisadas.
Una solución son los ‘recortes’ automáticos que nos hacen el trabajo fácil, pero no siempre quedan bien y es fácil que lo que queríamos transmitir con esta imagen se pierda al perder parte de la información de la fotografía.
Una opción a recortar o reducir el tamaño de la imagen es utilizar imágenes diferentes para ambas versiones, pensando siempre en transmitir la misma idea, pero adecuándonos al medio.
2. Simplifica los contenidos
Al igual que ocurre con las fotos, el texto no tiene que ser el mismo en ambas versiones de la web. Navegar en un teléfono móvil es más tedioso y la lectura, a pesar de que hoy en día los teléfonos disponen de pantallas de un tamaño considerable, es más pesada.
Los visitantes a nuestra página web agradecerán que los textos sean cortos y concisos. Que vayamos al grano y les demos la información de la manera más sencilla y directa.
3. Menu
Es muy recomendable que en las versiones móviles sustituyamos el menú habitual de nuestra web por el típico menú ‘hamburguesa’ que tan popular se ha hecho hoy en día. De esta manera, con un solo botón fácil de pulsar y que ya reconoce todo el mundo, se nos despliegan las opciones para navegar los diferentes apartados de nuestra web.
Aquí también podemos simplificar y si nuestra web es extensa y tenemos un menú muy complejo, tratar de reducir el menú para dar la información más necesaria y que la web en su versión móvil sea una herramienta útil, y no una tortura para navegar.
4. Tamaño de textos y botones
Como comentábamos, a pesar de que los móviles actuales cuenten con unas pantallas de gran tamaño, la lectura siempre es más complicada. Un tamaño de letra mayor, más espaciados y separación entre líneas ayudara enormemente a la lectura.
Lo mismo ocurre con los botones para acceder a apartados, envío de formularios, cierre de ventanas etc. Hay que tener en cuenta que se navega con el dedo y que muchas veces pulsar un botón pequeño no es tan fácil para todo el mundo.
5. Pop ups y banners
Hoy en día hay muchísimos diarios digitales que hacen la competencia a la prensa escrita de ‘siempre’. Lógicamente no suelen tener los mismos medios, por lo que suelen llenar sus páginas de banners, pop ups etc. El problema viene cuando mantenemos estos pop ups y banners en la versión móvil. Hay portales digitales que desde el móvil son imposibles de navegar, ya que pasas más tiempo cerrando ventanas. Y muchas veces la opción para cerrarla es tan pequeña que terminas pinchando en el propio banner/pop up y terminas en la página del anunciante. Lógicamente esto está hecho a posta, pero el abusar de esto hace que el usuario abandone nuestra web, y que la próxima vez que nos visite porque ha pinchado en algún enlace que le han compartido, automáticamente abandone nuestro website.
Lógicamente este es un caso extremo y la mayoría de las webs no tienen esta cantidad ingente de pop ups y banners. Pero es importante no olvidarse de ellos y si tenemos algún tipo de pop up en nuestra web, para destacar alguna promoción por ejemplo, desactivarla para las versiones móviles, o de que al menos, no sobre pase la resolución móvil y que permita cerrar la ventana de manera sencilla y sin necesitar la precisión de Robin Hood.