La mayoría de sus visitantes llega desde el móvil. Aun así, casi siempre se construye en la pantalla grande, y la vista pequeña se revisa, si acaso, al final del todo. Justo de ahí surgen los problemas que más a menudo reparo en mis formaciones.
El único consejo de cambio de hábito
Construya la página y revise después cada sección inmediatamente en móvil, antes de pasar a la siguiente. No todo de golpe al final.
La diferencia es considerable: si al terminar corrige veinte secciones a la vez, pierde la visión de qué cambio ha surtido efecto y dónde. Sección por sección es cada vez una menudencia.
La vista se cambia en el editor, abajo a la izquierda, mediante el icono de dispositivo.
Cómo se relacionan las vistas de dispositivo
El principio con el que la mayoría fracasa al principio: Elementor hereda de grande a pequeño.
Lo que ajuste en la vista de escritorio vale automáticamente también para tableta y móvil, mientras no fije allí algo distinto. En cuanto introduzca un valor propio en la vista de móvil, ese valor queda fijado para el móvil y ya no sigue al escritorio.
De ahí se derivan dos reglas prácticas:
Cambie los contenidos siempre en la vista de escritorio. Si edita un texto en la vista de móvil, cambia en todas partes, pero pierde con facilidad la visión de qué ajuste está colgado dónde.
Fije valores móviles solo donde sea necesario. Cada valor sobrescrito es un punto más que tendrá que mantener en futuros cambios.
Los cinco errores más frecuentes
Anchuras fijas en píxeles. Un contenedor de 1200 píxeles de ancho no cabe en ninguna pantalla de móvil y genera desplazamiento horizontal. Use valores porcentuales o una anchura máxima en lugar de una fija.
Espaciados pensados solo para escritorio. 120 píxeles de relleno arriba y abajo se ven generosos en la pantalla grande. En el móvil significan que el visitante recorre superficies vacías. Fije en móvil valores bastante menores: normalmente la mitad o menos.
Tamaños de letra sin adaptación móvil. Un titular de 64 píxeles ocupa cinco líneas en el móvil. Para los títulos casi siempre merece la pena un valor propio, más pequeño.
Superficies de clic demasiado pequeñas. Los botones y los puntos de menú necesitan un tamaño mínimo para poder alcanzarse con el pulgar de forma fiable: unos 44 por 44 píxeles. Dos enlaces uno debajo del otro con poco espacio son un despropósito en el móvil.
Orden incorrecto. En escritorio la imagen está a la izquierda y el texto a la derecha. En el móvil se apilan, y de pronto la imagen aparece antes del titular. Con contenedores flexbox cambia el orden en Avanzado por cada vista, sin duplicar la estructura. Por qué los contenedores son superiores aquí lo explico en Contenedores en lugar de secciones.
Ocultar elementos en móvil, con criterio
En Avanzado → Responsivo puede ocultar elementos por dispositivo. Es útil para gráficos decorativos que en el móvil solo ocupan espacio.
Dos limitaciones: los elementos ocultos se cargan igualmente, así que ahorra espacio, pero no tiempo de carga. Y no oculte nunca contenidos necesarios para la comprensión. Una versión móvil a la que le faltan informaciones esenciales no es una optimización.
Breakpoints propios
Por defecto, Elementor trabaja con escritorio, tableta y móvil. En Ajustes del sitio → Responsivo se pueden activar umbrales adicionales, por ejemplo para pantallas grandes o móviles pequeños.
Mi consejo: quédese con las tres vistas estándar mientras no tenga un problema concreto. Cada breakpoint adicional significa una vista más que debe revisar en cada cambio, y esa precisión extra no la nota nadie en la práctica.
Comprobar: no solo en el editor
La vista de móvil en el editor es una simulación. Muestra bien la anchura, pero no todo: el comportamiento táctil, la representación real de las fuentes, el comportamiento de carga con mala conexión.
Mire la página al menos una vez en un dispositivo real antes de publicarla. Y compruebe sobre todo dos cosas: ¿se puede desplazar la página horizontalmente? Entonces hay en algún sitio un elemento demasiado ancho. ¿Y funciona el menú, se despliega y se puede cerrar?
En cuanto al tiempo de carga
En móvil la conexión suele ser peor y el dispositivo más lento. Justo ahí se miden también los Core Web Vitals, que influyen en la valoración de búsqueda. Si quiere ahorrar tiempo de carga en algún punto, hágalo en móvil: Elementor y Core Web Vitals.
Elementor Pro: los ajustes responsivos existen en ambas versiones. Pro los amplía a la cabecera, el pie de página y los popups, y justo en el menú del móvil ahí está la diferencia perceptible. Ver Elementor Pro
Si quiere repasar su página conmigo en móvil en lugar de curar síntomas sueltos, esa es una parte típica de mi formación de Elementor.
Etiquetas