Una persona está leyendo cuando aparece una fotografía encima y empuja el párrafo hacia abajo. No tiene que haberse producido un error de carga para que la experiencia sea molesta. La estabilidad visual consiste en conservar el lugar del contenido mientras la página termina de prepararse.
Observa la página desde el primer momento, en lugar de abrirla únicamente cuando ya está completa. Repite la carga con una conexión limitada y con el ancho de un teléfono. Una imagen, un aviso, una fuente o un componente externo que llegue después puede revelar movimientos que pasan inadvertidos en una visita de escritorio con archivos guardados en caché.
Reserva espacio para lo que llegará después
Las imágenes deben aportar información suficiente para que el navegador reserve sus proporciones antes de terminar la descarga. En un diseño adaptable, el ancho visible puede cambiar sin que se pierda la relación de aspecto prevista. Revisa el código y la composición reales: un tema o un componente personalizado puede anular la información útil que entrega un bloque de imagen corriente.
Un video incrustado plantea un problema parecido. Si al principio la página casi no le asigna altura y luego inserta un reproductor grande, el texto inferior tendrá que desplazarse. Un espacio previo con las proporciones adecuadas permite recibirlo sin ese salto. Si existen varios tamaños posibles, prueba las configuraciones reales de móvil y escritorio; no elijas una altura que solo funcione en una captura.
El texto también se mueve. Una fuente que llega tarde puede modificar los saltos de línea y convertir un título de dos líneas en uno de tres. Compara la tipografía provisional con la definitiva, incluyendo palabras largas y caracteres acentuados. Elegir una fuente no se reduce al aspecto de unas letras aisladas.
Leer el diagrama como texto
- Llega una imagen: Indica dimensiones o proporción para que el navegador reserve su forma.
- Aparece un reproductor o aviso: Reserva espacio antes de insertarlo y revisa teléfono y computadora.
- Se reemplaza la fuente provisional: Compara saltos de línea y caracteres antes de aceptar el cambio.
Corrige el contenido que llega, no márgenes al azar en el párrafo inferior.
No confundas el elemento desplazado con la causa
Una herramienta puede destacar el párrafo que se movió aunque el origen sea un elemento insertado encima. Investiga la secuencia antes de añadir márgenes al párrafo señalado. Los espacios arbitrarios pueden disimular un síntoma en un ancho concreto y dejar intacta la inserción que lo provoca.
Por ejemplo, una franja promocional que aparece tarde en la parte superior desplaza todo lo que está debajo. Decide si debe formar parte de la composición inicial, ocupar un espacio reservado o presentarse de otra manera. La elección depende de su función, pero no debería sorprender a quien ya comenzó a leer.
Después del ajuste, recarga sin depender de una caché ya preparada y repite la interacción original. Desplázate, abre el menú y espera el contenido tardío. Una primera pantalla estable ayuda; una lectura estable exige observar también lo que sucede después.
