Malditos correos de Google Search Console.

Estás felizmente mirando el móvil y de repente te salta una notificación de Google Search Control: «Nuevos problemas detectados en (nombredetuweb)»

Kawen-su-prima-la-del-pueblo…

Que sí, que sí, que Google lo hace por tu bien, para que sepas errores que tiene tu web que ni se te pasarían por la cabeza, pero, ainsss… ¿y ahora qué?

Pues ahora, vamos a perderle el miedo a trastear con nuestra web y vamos a solucionarlos.

La clave de todo esto es hacerle caso a Google, porque a menudo, esos problemas a tí te pueden pasar desapercibidos, tu te conectas con tu móvil y lo ves bien, pero… no todos tienen el mismo móvil que tú.

Resulta que al igual que sucede con las pantallas de ordenador no todos los móviles tienen la misma resolución ni el mismo espacio vital para mostrar los botones, menús, etc, y lo que tu ves bien, tal vez en otro móvil se solape, así que respira hondo, prepárate un café y vamos a leer el informe de Google.

¿Por qué es importante la usabilidad móvil?

¿En serio me lo estás preguntando?

Sí, ya se que es una auto pregunta, no estoy loca XD

Cada vez utilizamos más y más los móviles y las tabletas para realizar búsquedas por internet, y no solo búsquedas rápidas, si no para informarmos y navegar por la información que nos proporcionan.

Por eso la navegación tiene que ser fluida dentro de la web ya hemos hablado anteriormente sobre la importancia de los menús bien estructurados y fáciles de manejar en una web.

Así que cuando pensamos que nuestra web va a ser manejada desde un medio táctil como un móvil o una tablet, además hay que tener en cuenta detalles como el tamaño de la letra y las separaciones entre las distintas opciones del menú.

¿Cuáles son los errores más comunes de usabilidad móvil?

Enlaces demasiado próximos entre sí o demasiado pequeños.

Que levante la patita el que intentando seguir enlace en el móvil y le da a otro…

Sí, a todos nos ha pasado.

Si los elementos táctiles de tu web (menus, botones, enlaces) están muy cerca unos de otros o son demasiado pequeños, es muy posible que esto le pase a cualquiera.

Para evitarlo deberíamos conseguir que ningún elemento táctil sea inferior a 48×48 pixels si es una imagen, y si es un elemento de un menú tendrás que jugar con el ‘padding’ para que haya suficiente ‘aire’ entre las opciones.

Contenidos que no se ajustan al ancho de la pantalla

Esto no suele suceder ya que casi todas las webs actuales tienen un diseño responsive (que se adaptan a la pantalla, vaya).

Peero, puede ser que, no se, te haya dado por trastear con el código CSS de tu diseño porque quieras incluir un trozo de código que te pareció super guay y resulta, que tiene un ancho fijo…

Siempre, siempre usa medidas relativas al tamaño de la pantalla.

Tamaño de la fuente demasiado pequeño o demasiado grande

El tamaño no sólo es importante en elementos táctiles, también es vital en cuanto a que la letra sea fácilmente leíble desde el dispositivo.

Google recomienda un tamaño de fuente de 16 pixels, pero dado que no todas las fuentes se ven igual, te recomendaría que lo comprobases con la fuente que utilizas en tu web y fueses ajustándolo.

No te olvides de ajustar también el interlineado, que no se amontonen demasiado las líneas o resultará difícil de leer. La recomendación general es utilizar la altura de línea predeterminada del navegador, que es de 1,2 em.

Y por supuesto, tampoco te pases en ponerlo demasiado grande, igual de contraproducente es obligar a la gente a hacer zoom que obligarles a tener que reducir la pantalla para leer una línea completa.

No tenemos configurada la ventana gráfica

Pese al nombre, la solución es muy sencilla, pasa por incluir la línea de código:

<meta name=viewport content=»width=device-width, initial-scale=1.0″>

en la cabecera de tu diseño.

Mediante esa línea le dices al navegador que el ancho de la ventana va a ser igual que el ancho del dispositivo y que su escala inicial del zoom es 1.

Así el contenido se adaptará al ancho de la pantalla del dispositivo donde se vea.

En la página w3bai.com, explican la importancia de esa línea de código: Responsive Web Design – La ventana gráfica

No te desesperes con Google Adsense

Irónicamente lo que más problemas de usabilidad genera en mis webs son precisamente los anuncios de Google…

Así que paciencia, a fin de cuentas ellos no afectan para que las visitas puedan leer el resto del artículo y por ahora, no me parecen prescindibles ;).