Para asegurarte de que se ve correctamente tu web en el móvil, es buena idea que realices una revisión desde tu smartphone. Debería ser un paso básico que hagas tras crearla. Así como cada vez que añadas un nuevo apartado o hagas un cambio importante.

Te interesará también leer el porqué debes adaptar tu web a dispositivos móviles.

Pero ¿Y en qué debes fijarte para saber si tu web está preparada para el móvil?

En esta entrada te indico los 7 puntos principales de tu web que debes revisar, ya que suelen ser las que más problemas dan. Y para cada una de ellas, te doy algunas pautas para que revises.

Cómo revisar tu web en el móvil

Lo primero, te dejo este mini-tutorial donde te explicaba cómo puedes hacer para ver una web desde tu ordenador como si fuese en el móvil:

Qué debes revisar para adaptar tu web al móvil

Ahora te detallo algunos de los puntos en que deberías fijarte

1) Cabeceras y contenido visible

La cabecera de una web es importante, porque es lo que va a captar la atención del visitante. Debes revisar también el aspecto de la cabecera de tu web en el móvil. Debe ajustarse bien, y dejar visible la parte más relevante.

Hay un concepto que se suele llamar el «Above the fold» que viene a decir algo así como «Por encima del pliegue» que hace referencia a esta parte que se verá nada más entrar en la primera pantalla, antes de desplazarnos.

Tienes que intentar que en esta parte queden los elementos más importantes de cada apartado de tu web, y que visualmente sea atractivo para animar a la gente a seguir leyendo.

Parte visible de la web en el móvil
Debes revisar que la parte importante de la cabecera de tu web quede visible nada más entrar también desde el móvil.

Algunas pautas a considerar revisando las imágenes de tu web en el móvil:

  • Si hay una imagen ¿Tiene la cabecera la altura adecuada? ¿Queda visible la parte interesante? ¿Hay un equilibrio entre calidad de la imagen en escritorio, y rapidez de carga en el móvil?
  • ¿Se ve la información suficiente para que el visitante sepa de qué trata el contenido?
  • OJO: Si no deja ver que hay algo más abajo, podrían pensar que no lo hay y salir. Tenlo en cuenta.
  • Ojo con los Sliders, recargan mucho la web, y son complicados de manejar en el móvil.

2) Imágenes de la web en el móvil

A la hora de visualizar las imágenes de la web en el móvil, en ocasiones es necesario realizar algunos ajustes.

¿Desbordan la pantalla?

En caso de que el tema que estés usando no lo gestione bien, las imágenes podrían desbordarse por los lados, o deformar tu web.

Tamaño del texto de la web en el móvil
Si el código de diseño no es correcto, las imágenes podrían salirse del ancho del móvil.

Normalmente estos aspectos del diseño, como el ancho máximo de las imágenes, están controlados por el tema si usas WordPress. Pero en algunas webs hechas en código, en algunos temas antiguos o temas poco profesionales no.

  • Si usas WordPress y te ocurre esto, te recomiendo plantearte cambiar el tema de tu web.
  • O si está hecha a código, pide al desarrollador que revise este detalle.

¿Son demasiado pequeñas?

  • ¿Son demasiado pequeñas? En algunos casos, como en las entradas de un blog, es buena idea que ocupen el ancho completo para que se vean bien.
  • ¿Aportan algo en la versión móvil o son puramente decorativas? A veces, puede valer la pena ocultar alguna imagen en la versión para móvil. Por ejemplo, si su aporte es puramente estético y ya hay suficientes elementos gráficos.
Imágenes demasiado pequeñas

¿Quedan demasiadas imágenes juntas?

A veces al reorganizarse el contenido en una sola columna en el móvil te puede ocurrir que el resultado no quede demasiado bien.

Por ejemplo, si tienes una maquetación para escritorio con bloques de texto y fotos alternando la ubicación izquierda-derecha. Como en este ejemplo:

Cambiar el orden de las imágenes en el móvil

Al verse los bloques de la web en el móvil, se reorganiza por defecto tal cual, por el orden en que aparecen las columnas. Y entonces tendrías dos imágenes juntas, o dos bloques de texto, y no quede bien.

  • Por defecto se organizaría en el móvil: Texto 1, imagen 1, Imagen 2, Texto 2, Texto 3, Imagen 3.
  • Lo ideal sería que en el móvil aparezca: Texto 1, Imagen 1, Texto 2, Imagen 2, Texto 3, Imagen 3.

Lo malo es que para resolver esto, normalmente será necesario hacer ajustes en código. Pero que sepas, que es posible cambiar el orden de los elementos de la web en el móvil si fuera necesario.

3) Tamaño de texto de la web en el móvil

En el móvil, es importante que los tamaños sean adecuados: Lo suficientemente grandes para ser legibles. Pero intentando que no sean demasiado grandes, para que quepa más contenido por pantalla.

¿Qué tamaño de fuente es mejor para el móvil?

¿Cuál es el tamaño de fuente óptimo para el móvil? Esto es un poco relativo y no se puede dar un valor concreto. Para empezar, porque depende de la fuente que estés usando. Un mismo tamaño de fuente, en distintas fuentes, puede dar lugar a un tamaño real muy diferente.

También, según el tipo de contenido que ofrezcas, y a qué tipo de público. Si sabes que será gente mayor deberías optar por tamaños de fuente más grandes. Si será gente de edad media o joven, puedes usar un tamaño de fuente más reducida que permita más contenido en pantalla.

Tamaño del texto de la web en el móvil

Tamaño de fuente adecuado para la web en el móvil

Lo que sí se pueden establecer algunas pautas orientativas sobre el tamaño adecuadao para el texto de una web en dispositivos móviles.

  • Para el cuerpo de texto
    • Hay un mínimo por legibilidad de unos 9 pixels (px). Menos que eso, no se debería usar en móvil.
    • Un mínimo razonable serían 12px.
    • Y hasta máximo unos 16 o 18 px en el cuerpo del texto podría ser razonable, si quieres una letra más visible y no es un problema reducir la cantidad de contenido por página.
  • Para los encabezados (títulos: h1, h2, h3…):
    • Sobre todo en los encabezados, el tamaño recomendado puede variar mucho según la fuente. Sobre todo si coges alguna especial, ya que en estas fuentes es donde más cambia el tamaño.
    • Normalmente los títulos es mejor ajustar a un tamaño algo menor en el móvil que el que se usa en el escritorio. Sino, a veces quedan demasiado grandes las fuentes. Esto hace que ocupen demasiado espacio y a veces que se corten las frases en varias líneas, lo que también las hace menos legibles.
    • Un tamaño adecuado en una fuente más o menos estándar suele estar entre 22px y 38px para móvil. Cuando en escritorio podrías llegar hasta 50px o 60px. Pero lo ideal es que lo pruebes y valores para el caso concreto.

4) Botones

Tienen que ser lo suficientemente grandes, y tener espacio suficiente alrededor (en especial de otros botones o enlaces) para presionarlos sin problema en la pantalla del móvil.

Se recomienda que tengan un tamaño de al menos 48x48px y espacio alrededor.

tamaño de los botones en el móvil

5) Formularios

Este es uno de los puntos que más problemas suele dar, en los formularios. Tanto en el formulario de contacto como especialmente en el de comentarios del blog.

En ocasiones, los campos de los formularios se amontonan o quedan desorganizados en la vista del móvil. Y esto, es una de las cosas que da muy mala imagen en tu web.

Campos del formulario de la web se ven desordenados

¡No olvides de revisar los formularios de contacto desde tu teléfono!

6) Color de la barra

Curiosamente, Google ha añadido esta verificación a sus controles de optimización de la web al móvil.

Es algo relativamente sencillo, algunos temas ya lo contemplan y permiten personalizarlo. Y sino, simplemente tienes que añadir este código a la cabecera <header> de tu web. Esto puedes hacerlo desde tu tema en algunos casos, o con un plugin.

El color se debe indicar en hexadecimal, si no lo tienes, puedes obtenerlo a partir de una imagen o del RGB con un conversor en internet.

Cómo poner color a la barra de chrome en el móvil

7) Optimización de velocidad

Aunque las redes cada vez son más rápidas, hay que considerar que la conexión desde un móvil siempre suele ser más lenta. En especial al conectar desde redes móviles, teniendo en cuenta que todavía hay zonas en que se conecta con 3G.

Lee aquí más sobre optimización de velocidad en WordPress.

Validar si tu web está adaptada a móviles

Una vez hayas revisado todos estos puntos básicos, algo más que puedes hacer es pasar el Test de Google.

¿Cómo corregir estos puntos para adaptar tu web?

En algunos casos, podrás corregirlos en la configuración de tu web o en tu tema. Otros dependen de cómo hayas creado los contenidos.

Pero en otros casos, o para adaptaciones más específicas, es necesario realizar ajustes de código. O como comentaba al inicio, si ves que realmente tu tema falla en muchos puntos de la adaptación al móvil… Igual es el momento de cambiar el tema, o de contratar un servicio de diseño web profesional.

Optimizar tu web para el móvil

Como ves, son muchos puntos a considerar. Y que es importante que tengas en cuenta para que tu web se pueda ver y utilizar correctamente desde el móvil.

Si necesitas ayuda, puedes escribirme. O si tienes dudas, deja un comentario aquí abajo.

Sácale más partido a tu web

¡Apúntate a mi lista VIP ya! Recibirás un montón de información interesante como esta.

 

¡Gracias por suscribirte! Tus datos se han enviado correctamente. Ahora sólo tienes que confirmar tu suscripción desde el e-mail que recibirás enseguida. Si no lo ves, echa un vistazo en SPAM o Promociones por si acaso.