Cómo diseñar una web rápida para móvil

En torno al 80% del tráfico que reciben las webs a día de hoy proviene de los móviles. Es decir, si hablamos de tipos de dispositivo, los que más se usan para navegar y hacer búsquedas son los móviles. A mucha distancia de diferencia están los ordenadores, con cerca del 18% y finalmente las tablets con un porcentaje muy bajo de usuarios.

¿Esto qué quiere decir? Que cuando diseñamos una web, tenemos que poner el foco en la versión móvil, y esto es algo que muchas veces se está haciendo mal. Por eso, estos son algunos consejos para lograr un sitio responsive efectivo para móviles, que consiste en crear el diseño web en formato de pantalla de móvil, para después adaptarlo al ordenador y no a la inversa como es habitual.

Aunque pueda parecer que es simplemente una cuestión de aspecto, realmente es muy importante de cara a la velocidad que tiene una web, algo que afecta directamente al SEO y a la posición en los buscadores de internet. Por eso, para diseñar una web responsive y rápida para móvil, hay que tener en cuenta algunas consideraciones que te dejamos a continuación.

Comprueba la velocidad de carga

Si ya tienes diseñada la web y estás pensando en cambiarla, lo primero que necesitas saber es dónde estabas y a dónde quieres llegar. Para eso puedes utilizar algunas herramientas gratuitas de medición, aunque una buena opción es utilizar PageSpeed Insights, de Google, que puntuará tu web del 1 al 100. Si esta no supera los 80 puntos, te aconsejamos que la revises para mejorarla.

Reduce el tamaño de las imágenes

No es lo mismo ver una foto o infografía a tamaño pantalla de ordenador que en un móvil. Y es que aunque las pantallas cada vez son más grandes, todavía siguen sin superar (por lo general) la palma de una mano. ¿Esto qué quiere decir? Que la calidad que necesita una foto en pantalla de ordenador no es la que se necesita en móvil. Por lo tanto, reduce su tamaño y sustitúyela, para que la velocidad de carga sea superior. Ahora bien, revisa las infografías, ya que si son demasiado pequeñas perderán calidad. No queremos que tengan que hacer zoom, ni que se vean borrosas así que simplifica todo lo que puedas.

Menú fácil y navegable

Otro de los aspectos a optimizar es el menú. Si tienes un menú muy largo, lo recomendable es acortarlo y simplificarlo para que no resulte demasiado largo y confuso a la hora de navegar en móvil. Aunque esto también es aplicable al ordenador, ya que lo sencillo siempre ayuda a tener una buena navegación, en móvil cobra especial importancia. Además, en cuanto al UX (o user experience) conviene que el menú en forma de hamburguesa esté arriba a la derecha o en su defecto abajo a la derecha (algo poco habitual), ya que es el lugar más cercano al dedo gordo.

Adapta los titulares y el texto

Aunque hay plantillas de temas que ya incluyen esta funcionalidad, hay ocasiones en las que hay que ajustar el tamaño de los textos de forma manual. Revisa que los titulares no ocupen demasiadas líneas debido a su tamaño y que esto dificulte la legibilidad. Ahora bien, a diferencia de desktop, los botones tendrán que ser más grandes. Si en ordenador quedan centrados, en mobile es muy posible que tengan que ir al ancho completo de la pantalla o casi. Asimismo, evita colocar los elementos muy cerca, porque al navegar con pantallas táctiles puedes complicar mucho a los usuarios.

Prioriza contenidos

Muestra primero los contenidos más importantes. Esto responde a un carácter asociado a la persona que navega por internet con el móvil y que quiere encontrar el contenido de manera rápida. Relacionado con esto, evita que las URLs sean demasiado largas, ya que esto resultará pesado para la navegación. Aunque incluir contenido es esencial para el SEO, evita alargarte demasiado y hacer textos pesados. Si responden a otras intenciones de búsqueda, haz otras URLs. Por tanto, para conseguir un buen posicionamiento SEO esto es clave.

Evita vídeos y animaciones flash

Puede que los contenidos como vídeos que se reproducen automáticamente o animaciones flash no funciones en algunos dispositivos móviles, así que una vez más, simplifica. Reduce todos aquellos elementos que puedan pesar demasiado y agiliza la lectura.

Comprueba que todo funciona correctamente

A pesar de estar editando en versión móvil, la mejor manera de comprobar que los cambios se han realizado correctamente es visualizándolo desde tu propio móvil en modo incógnito, sin que haya guardado caché. Y cómo no, pedir a familiares y amigos que naveguen y te digan si su experiencia ha sido buena será la mejor manera de comprobar que todo está correcto.