Qué es above the fold y qué debe aparecer en la primera pantalla

¿De dónde viene el término above the fold?

El término viene de los periódicos de papel: las noticias más importantes se colocaban por encima del pliegue, en la mitad superior de la portada que se veía en el quiosco.

En la web, el pliegue es el borde inferior de la pantalla antes de hacer scroll. La idea es la misma: lo que está arriba recibe más atención y decide si el lector sigue.

¿Cuánta atención recibe la primera pantalla?

La primera pantalla concentra la mayor parte de la atención: el estudio de seguimiento ocular de Nielsen Norman Group de 2018 encontró que el 57 % del tiempo de lectura se dedica a ella y el 74 % a las dos primeras pantallas.

Eso no significa que la gente no haga scroll: lo hace si la primera pantalla le convence de que merece la pena. Por eso su trabajo es responder rápido y dar motivos para seguir.

¿Qué debe aparecer en la primera pantalla?

El contenido above the fold de una página de servicio debe responder en segundos a tres preguntas: qué es, para quién es y qué hacer ahora, con un titular claro, una frase con el beneficio o la respuesta, y el botón de acción.

• Titular que coincide con la búsqueda o el anuncio.
• Respuesta o beneficio principal en una o dos frases.
• Prueba rápida: una cifra, un caso, una valoración.
• Botón de contacto o compra.
• En negocios locales, el teléfono o la ubicación.

¿Cómo cambia en móvil?

En móvil, la primera pantalla es mucho más pequeña, así que hay que elegir todavía más: el titular, una frase y el botón, sin imágenes enormes que empujen el contenido hacia abajo.

Además, en móvil los banners de cookies y las ventanas emergentes ocupan buena parte de esa primera pantalla. Diseñarla primero para móvil obliga a priorizar lo esencial.

Una prueba útil es abrir la página en el móvil más pequeño que use tu público y comprobar si, sin tocar nada, se entiende qué ofreces y dónde pulsar.

¿Cómo afecta la primera pantalla al SEO?

La primera pantalla influye en el SEO de dos formas: su elemento más grande suele ser el LCP, una de las Core Web Vitals, y su contenido decide si el usuario se queda o vuelve a la SERP.

Google lanzó en enero de 2012 un algoritmo de diseño de página que afectaba a las webs con demasiados anuncios en la primera pantalla. La idea sigue vigente: la parte alta de la página debe estar dedicada al contenido que busca el usuario.

¿Cómo diseñar la primera pantalla paso a paso?

Cómo diseñar la primera pantalla de una página:

1. Escribir el titular con la palabra clave y la promesa principal.
2. Añadir una frase que responda a la búsqueda.
3. Incluir una prueba breve: cifra, caso o valoración.
4. Colocar el botón de acción principal.
5. Comprobar cómo se ve en un móvil pequeño.
6. No cargar en diferido la imagen principal y medir el LCP.

¿Cómo es la primera pantalla de nuestras páginas?

En las páginas de Estrategia 360, la primera pantalla incluye el H1, una respuesta directa de dos o tres frases con un dato, la referencia de precio cuando la hay y el botón de contacto.

En el glosario, la primera pantalla muestra además un resumen en 30 segundos y una herramienta práctica, para que quien llega con prisa obtenga la respuesta y quien quiere profundizar tenga motivos para seguir leyendo.

¿Qué errores se cometen en la primera pantalla?

El error más común es ocuparla con una imagen o un vídeo enorme y un eslogan genérico, sin decir qué se ofrece ni cómo contactar.

• Sliders que cambian antes de poder leerlos.
• Ventanas emergentes nada más entrar.
• Titular que no coincide con la búsqueda.
• Botón de acción solo al final de la página.
• Imagen principal cargada en diferido.