Hace ya tiempo que tener una web correctamente adaptada a móvil es uno más de los 200 factores (o más) que influyen en el posicionamiento orgánico de cualquier página web.
Es muy probable que ya tengas tu web con una versión móvil siguiendo alguna de las tres técnicas que se enumeran en este artículo, pero es muy probable que incluso tras implementar la versión móvil con diseño web adaptable, publicación dinámica o un sistema de urls independientes sigas viendo errores en el apartado usabilidad móvil de Google Web Masters Tools ¿verdad?
| [-] Indice de contenidos |
|---|
Errores principales de usabilidad móvil
Elementos táctiles demasiado próximos entres sí o de reducido tamaño
Este error es bastante claro, cuando un usuario móvil se enfrenta a pulsar un botón demasiado pequeño tiene serios problemas y puede llegar a frustrarse o también si ponemos dos elementos táctiles muy próximos entre sí es posible que sea difícil pulsar en el correcto.
Para resolverlo debemos hacer que ningún elemento táctil sea de menos de 48×48 pixeles en caso de ser una imagen y si es un enlace de texto seria muy recomendable que también fuera de fácil pulsación bien haciendo un ancho suficientemente largo, utilizando un tamaño de fuente suficiente o dejándolo bien separado del resto del texto.
Ajustar el tamaño del contenido a la ventana gráfica
Este problema se centra en que no debemos usar contenidos que puedan ser más anchos que la ventana grafica, porque de hacerlo obligamos al usuario a hacer scroll lateral y esto es algo que nos gusta muy poco porque no estamos acostumbrados a ello.
Por tanto tenemos que hacer contenidos que se ajusten a la ventana, podemos seguir estos consejos:
- No usar elementos CSS de ancho fijo, es mucho mejor usar anchos relativos basados en el tamaño de la pantalla.
- Mucho ojo también con los valores de posicionamiento absolutos de gran tamaño porque pueden hacer que parte del elemento quede fuera de la pantalla visible.
En definitiva tienes que conseguir que sean los elementos de contenido los que se adapten a la pantalla para ofrecer una buena experiencia en cualquier tipo de dispositivo.
Ventana gráfica no configurada
Este es un aspecto muy importante y además sin él no podríamos tener nunca bien el punto uno sobre elementos táctiles.
Una página optimizada para dispositivos móviles debería incluir en su cabecera lo siguiente entre <head> y </head> -alfinal de los restantes meta tags que pueden estar indicados como meta name = xxxx o meta content = xxxx
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
Con lo anterior estaríamos diciendo el ancho de la ventana será igual al ancho del dispositivo y que la escala incial es 1. De esta forma los dispositivos móviles serán capaces de mostrar el contenido según el tamaño de su pantalla. Si no se coloca esta instrucción en la cabecera las páginas se mostrarán igual en una dispositivo móvil que un PC lo que provocará que el usuario no pueda ver bien el contenido y tenga que hacer zoom.
Tamaño de las fuentes muy pequeño
Debes usar un tamaño de fuente suficiente para que el usuario móvil lo pueda leer sin hacer zoom, para unas recomendaciones más concretas os dejo aquí estas de Google.
- Utiliza un tamaño de fuente base de 16 píxeles CSS. Ajusta el tamaño según sea necesario basándote en las propiedades de la fuente usada
- Usa tamaños en relación con el tamaño base para definir la escala tipográfica.
- El texto necesita espacio vertical entre los caracteres y puede ser necesario ajustarlo para cada fuente. La recomendación general es utilizar la altura de línea predeterminada del navegador, que es de 1,2 em.
- Limita la cantidad de fuentes y la escala tipográfica. Si usas muchas fuentes y tamaños de fuente, el diseño de la página puede parecer descuidado y excesivamente complejo.
Uso de Flash
En fin… parece mentira pero todavía queda “mucho internet” proveniente de aquellos años en los que se usaba Flash, si tu web es así o usa elementos Flash ya puedes ir cambiandolo porque no lo quieren ni los buscadores ni los dispositivos móviles.