Los sitios web casi están vetados de Google si no están adaptados para móviles. Aprende cómo hacerlo.
Ahora hasta para estar ubicado dentro de los primeros lugares de una búsqueda en Google (o hacer SEO, como mejor quieras llamarlo) es necesario que tengas un sitio web adaptado para móviles. Hace algunos años entrar a una páginas web desde un navegador móvil era una experiencia frustrante. Ahora casi todo la web funciona alrededor de la experiencia móvil.
Google castiga a quienes no tengan su web adaptada para móviles casi desapareciéndolos de sus búsquedas. Dicho esto, en este post vamos a ver algunos principios fundamentales del diseño mobile-first (móvil primero), y cómo adaptar tu página para que tus usuarios puedan navegar en tu web, sin importar el dispositivo.
¿Cómo optimizar tu sitio web para móviles?
1. Diseña con el móvil en tu mente
Esto parece una obviedad, pero no lo es tanto. Ten en cuenta:
- Priorizar: Las pantallas de los móviles tienen espacio limitado. Las pantallas de los móviles presentan el contenido de forma vertical, a diferencia de la estructura mucho más amplia -horizontal- de los ordenadores de sobremesa. Esto significa que hay que diseñar priorizando.
- Primero el contenido: El color en segundo lugar. Haz que tu texto y otras partes del contenido sean fácilmente legibles y accesibles. Una pantalla móvil es menos recomendada para elementos visuales que distraen.
- Facilidad de navegación: En un dispositivo móvil, no se puede hacer clic en cualquier sitio y volver a la página de inicio. A menos que, por supuesto, planifiques este tipo de navegación con antelación, algo que recomendamos hacer. Experimenta con widgets de desplazamiento hacia arriba, pero también con cabeceras adhesivas siempre que sea posible.
2. Optimización de recursos
Los elementos visuales como las fotos, las ilustraciones, los iconos y los vídeos son los que más ancho de banda consumen en las páginas web. Aunque no hay un tamaño de página web que todos deban cumplir, es de sentido común que un tamaño de página web menor equivale a tiempos de carga más rápidos, lo que siempre es bueno para web móvil.
- Cambia el tamaño de tus imágenes: Las fotos a tamaño completo deberían proporcionarse como enlaces alternativos cuando sea apropiado. El cambio de tamaño puede reducir hasta el 80% del tamaño total de la imagen, dependiendo de las dimensiones requeridas. Sin embargo, para los dispositivos móviles, nunca hay razón para superar el rango de 600-700px como máximo.
- Reduce el tamaño del archivo: La compresión/optimización de imágenes es el proceso de utilizar software de terceros para reducir el número de colores presentes en una imagen. Esto puede hacerse hasta el punto de que tus fotos no pierdan su calidad innata, pero sí que se reduzca drásticamente su tamaño de archivo.
- Explora formatos de archivo alternativos: La última y mejor tecnología en imágenes digitales gira en torno a los formatos de archivo WebP y SVG. Los SVG, por ejemplo, pueden adaptarse automáticamente al tamaño de la pantalla.
- Con conocimiento de causa: Siguiendo el concepto de diseño móvil intuitivo, no tienes que reutilizar los mismos componentes visuales en tus diseños móviles. Eliminar algunas imágenes de fondo y sustituirlas por fondos de color -en móvil- no perjudicará la experiencia del usuario. Busca siempre formas de ahorrar hasta la más mínima cantidad de ancho de banda.
3. Carga lenta
Esta es una opción que le dice al navegador que cargue (renderice) el contenido que sólo está dentro de la ventana gráfica del usuario. Por lo tanto, si hay fotos o vídeos de gran tamaño añadidos a una parte de la página, esos archivos sólo se mostrarán cuando la pantalla del navegador llegue a esa parte del sitio.
Y si te preocupan los posibles problemas de SEO, no te preocupes. Google ha confirmado que sí renderiza las páginas que utilizan carga lenta, y lo ve como una señal más de mejora del rendimiento. Hay muchos plugins disponibles en la web que funcionan para la carga lente de tu página en móviles.
4. Caché web
La caché web se basa en el concepto de copiar una versión de una página, que puede ser presentada al usuario en cualquier momento. Las páginas se almacenan en la caché en la primera visita a una página web. Cuando un nuevo usuario intenta acceder a esa página, en lugar de servir la versión en vivo, el servidor web mostrará la versión en caché.
El objetivo de cualquier tipo de almacenamiento en caché es mejorar el rendimiento del sitio web y disminuir los recursos de back-end necesarios. Dependiendo de tu solución de almacenamiento en caché, puedes configurar intervalos personalizados.
Algunos de los nombres más populares en el almacenamiento en caché web son Varnish, Squid y Memcached. Pero ten por seguro que hay muchas otras soluciones en el mercado, especialmente si eres usuario de WordPress.
5. AMP (Accelerated Mobile Pages)
El proyecto AMP (páginas móviles aceleradas) de Google es la optimización para móviles con esteroides. Básicamente, AMP reduce las páginas a lo esencial para proporcionar una experiencia de carga súper rápida, pero también para dar prioridad a la legibilidad del contenido.
AMP es una página HTML desnuda con ciertas limitaciones para el tipo de contenido que se puede mostrar. Esto da como resultado tiempos de carga mucho más rápidos, y un mejor rendimiento general debido a la limitación para ejecutar scripts.
6. Prueba antes de publicar
Hoy en día, no hay excusa para no tener un entorno de prueba separado para tu web. La mayoría de las plataformas SaaS en la nube ofrecen entornos de ensayo por defecto, así que comprueba con tu proveedor si tienes acceso a uno.
¿Qué es un entorno de ensayo? Bueno la forma más rápida de explicarlo es mirando tu sitio web actual en vivo. Este sitio es lo que se llama un sitio de producción - una versión en tiempo real de todo el código, los scripts y el contenido en el que se basa su sitio.
Un entorno de ensayo en este contexto es una copia de su sitio de producción. Un sitio ficticio, por así decirlo. Y en este entorno de puesta en escena, eres capaz de hacer cambios o añadir nuevas características sin romper tu sitio en vivo.
Probar no es tan aterrador como parece. Pero seguro que sí lo es cuando borras accidentalmente toda tu base de datos en un servidor de producción.
Escrito por: BBB
Nada fuera de lo anormal, como tú, vamos. ;)
Suscríbete al #Blog
Al suscribirte te enviaremos un boletín cada semana con la información más relevante. Tendrás acceso a contenidos exclusivos para suscriptores
