Esto daría para un libro aparte, pero intentaremos condensarlo en una sola frase: la UX es parte del SEO, por lo que tener una web adaptada a móviles es sumamente importante para que rankees en los resultados de búsqueda Mobile.
Google lanzó el Mobile First Index hace poco, dando prominencia a las páginas adaptadas a móviles por encima de las adaptadas a escritorio
Desde hace mucho tiempo, Google separa los rankings Mobile de los Desktop. dispositivos con usos distintos implican resultados de búsqueda distintos.
Google distingue 3 tipos de versiones móviles: diseño web adaptable, publicación dinámica y URLs independientes.
Según podemos leer en su documentación oficial:
Nutricion enteral y parenteral
1. Diseño web adaptable: se proporciona el mismo código HTML en la misma URL, independientemente del dispositivo del usuario (ordenador, tablet, móvil o navegador no visual), pero se puede procesar la presentación de manera diferente (es decir, «responder») en función del tamaño de la pantalla. Este es el patrón de diseño que recomienda Google.
2. Publicación dinámica: se utiliza la misma URL, independientemente del dispositivo, pero se genera una versión diferente del código HTML para diferentes tipos de dispositivo en función de la información sobre el navegador del usuario que se reciba en el servidor.
3. URL independientes: se proporciona código diferente para cada dispositivo y en URL independientes. Con esta configuración, se intenta detectar el dispositivo de los usuarios y, a continuación, se redirige a estos a la página correspondiente mediante redireccionamientos HTTP junto con la cabecera HTTP Vary.
Básicamente, para darle al usuario y a Google un diseño Mobile que le guste, debemos:
● Indicar a Google si una página tiene formato para móviles o no. Esto ayuda a Google a rastrear con el bot Mobile esa página, a indexarla dentro de los resultados de búsqueda para móviles y a mostrarla cuando se está usando dicho dispositivo.
● Comprobar que todos los recursos que conforman la página puedan rastrearse: esto es, que Googlebot pueda rastrear las imágenes, los CSS, los anuncios y los scripts que generan todas las versiones del site (Desktop, Tablet y Mobile). De no ser así, puede que el bot de Google no sea capaz de detectar si esa página está optimizada para móviles o no.
● Evitar los errores que crean frustración en la experiencia de usuario en ese dispositivo. Una buena forma es usando la propia herramienta de Mobile Friendly Test de Google.
Vamos con ese listado de errores:
- No mostrar contenidos diferentes en las diferentes versiones del site para dispositivos. Consistencia.
- Velocidad de carga lenta
- Comprimir el contenido de la versión Desktop en la versión Mobile sin adaptarlo
- No especificar la ventana gráfica con la etiqueta meta viewport
- Que el contenido no se adapte a la ventana gráfica (esto pasa si usamos valores absolutos en los CSS, por ejemplo, píxeles en vez de %)
- Especificar un ancho fijo (no adaptable) para la ventana de contenido
- Mostrar textos larguísimos que entorpezcan el proceso de compra (en Mobile podemos mostrarlos con un “leer más”)
- Incluir vídeos que no se pueden reproducir (en Flash)
- Poner capas por encima del contenido que bloqueen el acceso al contenido que quiere ver el usuario (interstitials, por ejemplo)
- Redirecciones al site Mobile mal hechas (por ejemplo, que tanto la home como las segundas páginas de la versión Desktop se redirijan a la home de Mobile y no a las páginas que tocan)
- Páginas desmaquetadas o con navegaciones complicadas
- Páginas con el texto demasiado pequeño para ser leído en un Smartphone. Google recomienda un texto de 16 píxeles
- Elementos táctiles (botones) demasiado próximos entre si que pueden provocar que hagamos clic en un elemento que no queríamos
No está mal, ¿no? ¡A empezar con el Mobile que ya vamos tarde!
“Hablar de la venta online como un elemento imprescindible a la venta tradicional se ha quedado obsoleto, al igual que la eterna lucha de dispositivos, ¿desktop o mobile? Si aún te planteas esta pregunta, necesitas leer lo siguiente.
En el sector del marketing digital llevamos unos meses escuchando el término ‘mobile first’. Así que, ¿por qué no hablamos del ‘mobile ecommerce first’? . Negocios de moda, alimentación, deportes, viajes,… todos ellos se están viendo obligados a dar un giro (por fin) a la forma de adaptarse a las necesidades reales de sus clientes.
Y es que los datos hablan solos. Los españoles pasan de media poco menos de 3 horas al mes en un e-commerce y un tercio de los internautas acceden únicamente a estos sitios a través de sus móviles, según el último estudio de tendencias en e-commerce publicado por Comscore en marzo. Obviamente, estos datos se disparan con el público millenial.
¿Cuáles son los principales usos que hacen las personas (sí, hablo de personas y no de usuarios) de los dispositivos móviles? Sin duda, se han convertido en una herramienta de investigación. Nos gusta comparar precios y buscar características de productos. ¡Precios y características! No una historia idílica de amor con nuestro cortacesped. Si un dependiente hace eso, diríamos que nos quiere vender la moto. Entonces, ¿por qué seguimos insistiendo en incluir textos de este tipo en nuestras descripciones de producto?
Bien, esa es la respuesta que me esperaba. Alguien dijo alguna vez “necesitamos textos largos para que nos posicione bien Google”.
Y algún que otro iluminado completó con “necesitamos contar historias de nuestro producto”. Correcto, pero no en las fichas descriptivas, por favor.
Desplegar la flechita que viene al lado de la descripción del producto y encontrar un cuento que podría ser la autobiografía de Jordi Hurtado, ¿a quién no le ha pasado?
Volvamos a lo importante: precios y productos. Estos dos factores serán decisivos a la hora de accionar la compra de las personas que visiten nuestro ecommerce, por lo tanto, vamos a dárselos servidos en bandeja.
Y aquí ponemos de ejemplo al gigante que le está comiendo la tostada a todos los negocios minoristas: Amazon. La empresa de Jeff Bezos domina el comercio electrónico en Europa y, en concreto, en España donde su alcance es del 41%. Por lo tanto, te invito a echar un vistazo a cómo presenta esta compañía sus productos. Variedad de fotografías, valoraciones (imprescindibles para aportar credibilidad cuando las personas no pueden tocar, testear o probar el producto), precio y ahorro y, por último a destacar, funciones y descripción de nuestra elección.
¿Has leído alguna de las descripciones/funciones que ofrece Amazon de los productos? Podrán ser más o menos extensas, pero lo que está claro es que son fieles a la realidad del producto, y eso es lo que las personas quieren encontrar.
Y recalco, si las personas se muestran interesadas en un site, Google también lo hará (aunque con ayuda). No te olvides de ayudar al buscador a entender tu producto: el marcado estructurado y la geolocalización son imprescindibles. Por lo tanto, intenta reflejar en los textos de tu ecommerce todas las características y funcionalidades de lo que ofreces. Responde a las preguntas de las personas. Un consejo: si te atascas, acércate a un comercio físico que ofrezca productos similares a los tuyos y escucha lo que preguntan las personas a los dependientes. Eso será lo que tengas que aportar tú a tus clientes.
Y siguiendo con el consejo, pasemos por la línea de cajas. ¡Oh sorpresa! Nos ofrecen otros productos, ¿cogemos la idea para nuestro ecommerce? Sí, aunque la rueda ya está inventada. Esto se llama ‘cross selling’, es decir, recomendaciones de productos relacionados con gustos y preferencias de las personas que han visitado tu site.
En este punto te aconsejo que reflexiones y pienses muy bien lo que vais a recomendar. Existen varias opciones, de las cuales quiero resaltar dos: productos de la misma categoría en la que está navegando el cliente, destinado a un público indeciso que necesita valorar más opciones; o productos complementarios a lo que está viendo el cliente, muy útil en el sector moda para completar ‘looks’ y aumentar el ‘ticket medio’, una de las referencias clave para cualquier ecommerce. Este dato permite visualizar cuánto es el gasto medio que dedican nuestros clientes en el ecommerce.
Sin embargo, no todo es la optimización dentro del site. Nuevas tendencias para atraer futuros clientes a tu ecommerce están surgiendo en redes sociales.
Instagram Shopping, la nueva herramienta donde podrás contar la historia que dejaste de lado en la descripción del producto en tu web y derivar esos clientes al carrito de la compra.
Sin olvidarnos de Youtube, la plataforma perfecta para que tu cliente vea el producto en la vida real, con colores, movimientos y personas reales que siguen contando esa historia de la que una vez te habló un seo.
Y por favor, por favor, por favor, no hay cosa peor que esperar colas, ¿verdad? Entonces no hagas esperar a los clientes de tu ecommerce. Controla, testea, comprueba la velocidad de tu site.
Google recomienda que una web se pueda utilizar en cinco segundos en dispositivos móviles de rango medio con conexiones 3G y en tres segundos en conexiones 4G. Para optimizar la carga, el buscador ha puesto a nuestra disposición dos nuevas herramientas: Mobile Scorecard y Impact Calculator. Con ellas, podrás analizar y calcular la cantidad de ingresos que tu ecommerce estás perdiendo debido a su velocidad de carga lenta.”
Importancia de la Versión Móvil
- Experiencia del Usuario (UX):
- Los usuarios móviles tienen expectativas de una experiencia rápida y fluida. Un sitio optimizado para móviles mejora la navegación y la satisfacción del usuario.
- SEO:
- Google utiliza la indexación móvil primero («mobile-first indexing»), lo que significa que utiliza la versión móvil del contenido para indexar y clasificar las páginas.
- Un sitio móvil optimizado puede mejorar el posicionamiento en los resultados de búsqueda, aumentando la visibilidad y el tráfico.
- Accesibilidad:
- Los dispositivos móviles son más accesibles para muchas personas, lo que aumenta la audiencia potencial de tu sitio web.
- Conversión:
- Un sitio móvil bien diseñado puede aumentar las tasas de conversión, ya que facilita a los usuarios completar acciones importantes como realizar compras o enviar formularios.
Mejores Prácticas para el Desarrollo de la Versión Móvil
- Diseño Responsivo:
- Utiliza un diseño web responsivo (RWD) para asegurar que tu sitio se adapte a diferentes tamaños de pantalla y resoluciones.
- Utiliza CSS media queries para ajustar el diseño según el dispositivo.
- Optimización de Velocidad:
- Minimiza el tamaño de los archivos (CSS, JavaScript, imágenes) para mejorar los tiempos de carga.
- Usa técnicas de carga diferida (lazy loading) para imágenes y otros recursos pesados.
- Interfaz de Usuario (UI):
- Diseña una interfaz intuitiva y fácil de usar con botones grandes y fácilmente tocables.
- Asegúrate de que el contenido sea legible sin necesidad de hacer zoom.
- Contenido:
- Mantén el contenido conciso y directo, adaptado al comportamiento de navegación móvil.
- Utiliza encabezados, listas y párrafos cortos para mejorar la legibilidad.
- Navegación:
- Implementa una navegación sencilla y accesible, como menús desplegables o hamburguesa.
- Asegúrate de que los enlaces y botones sean fáciles de tocar.
- Accesibilidad:
- Asegúrate de que tu sitio móvil sea accesible para personas con discapacidades, siguiendo las pautas de accesibilidad web (WCAG).
- Testing y Monitoreo:
- Prueba tu sitio móvil en diferentes dispositivos y navegadores para asegurar la compatibilidad.
- Utiliza herramientas como Google Mobile-Friendly Test para evaluar y mejorar la usabilidad móvil.
Herramientas y Tecnologías para Optimizar la Versión Móvil
- Frameworks y Bibliotecas:
- Bootstrap: Un popular framework CSS que facilita el desarrollo de sitios web responsivos.
- Foundation: Otro framework potente para crear sitios web responsivos.
- AMP (Accelerated Mobile Pages):
- Una tecnología de Google que permite crear páginas móviles extremadamente rápidas.
- Ideal para sitios de noticias y blogs que desean mejorar la velocidad de carga.
- PWA (Progressive Web Apps):
- Permiten que las aplicaciones web se comporten como aplicaciones nativas con características como notificaciones push y funcionamiento offline.
- Mejoran la experiencia del usuario y pueden aumentar el compromiso y las conversiones.
- CDN (Content Delivery Network):
- Utiliza una CDN para reducir la latencia y mejorar los tiempos de carga distribuyendo el contenido en servidores globales.
Ejemplo de Implementación de Media Queries para Diseño Responsivo
/* Estilos para dispositivos móviles */
@media (max-width: 600px) {
body {
font-size: 16px;
}
.container {
padding: 10px;
}
.menu {
display: block;
}
.menu-item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
}
/* Estilos para dispositivos de escritorio */
@media (min-width: 601px) {
body {
font-size: 18px;
}
.container {
padding: 20px;
}
.menu {
display: flex;
}
.menu-item {
padding: 15px;
border-right: 1px solid #ccc;
}
}