≡En resumen
- Above the fold es todo lo visible en la primera pantalla, antes de hacer scroll.
- No tiene una altura fija en píxeles: cambia en cada móvil, tablet y monitor.
- Según Nielsen Norman Group, en 2018 el 57 % del tiempo de visualización se concentraba en la primera pantalla.
- Google penaliza desde 2012 las páginas que llenan la parte superior de anuncios y dejan poco contenido.
- La primera pantalla debe responder en segundos qué ofreces, para quién y qué hacer a continuación.
01 ¿Qué es above the fold?
El concepto se usa en diseño web, experiencia de usuario, SEO y publicidad. En todos los casos la idea es la misma: la primera pantalla es el espacio más visto de la página, así que ahí debe estar lo que más importa para el usuario y para el negocio.
En español se habla a veces de «primera pantalla», «mitad superior» o «zona visible sin scroll». También verás el término fold en SEO para referirse a la línea que separa ambas zonas.
02 Origen del término: de la portada del periódico a la web
La expresión nace en la prensa impresa. Los periódicos se exponían doblados por la mitad en quioscos y estanterías, de modo que solo se veía la parte superior de la portada. Las noticias más llamativas se colocaban «por encima del pliegue» para convencer al comprador de un vistazo.
Con la llegada de internet, diseñadores y editores trasladaron la idea a la pantalla: el «pliegue» pasó a ser el borde inferior de la ventana del navegador.
| Aspecto | Periódico impreso | Página web |
|---|---|---|
| Dónde está el pliegue | Doblez físico de la portada | Borde inferior de la pantalla al cargar |
| Tamaño | Fijo para cada cabecera | Variable según dispositivo y ventana |
| Objetivo | Que compren el periódico | Que el usuario entienda la propuesta y actúe o siga leyendo |
| Qué se colocaba o coloca | Titular principal y foto | Titular, propuesta de valor, imagen y llamada a la acción |
03 ¿Por qué es importante el above the fold? Lo que dicen los datos
Los usuarios sí hacen scroll, pero reparten su atención de forma muy desigual. Los estudios de seguimiento ocular de Nielsen Norman Group son la referencia más citada sobre este comportamiento.
80 %
del tiempo de visualización en la primera pantalla en 2010
Fuente: Nielsen Norman Group, «Scrolling and Attention»
57 %
del tiempo de visualización en la primera pantalla en 2018
Fuente: Nielsen Norman Group, estudio con 120 participantes
74 %
del tiempo concentrado en las dos primeras pantallas (2018)
Fuente: Nielsen Norman Group
La lectura práctica es doble. Por un lado, la gente hace más scroll que hace una década, así que no hace falta meterlo todo arriba. Por otro, la primera pantalla sigue recibiendo más atención que cualquier otra: si no convence, gran parte de las visitas no llegará al resto del contenido, lo que se nota en la tasa de rebote.
04 Qué poner above the fold: elementos imprescindibles
La primera pantalla tiene que responder en pocos segundos a tres preguntas: qué es esto, si es para mí y qué hago ahora. Estos son los elementos que suelen conseguirlo:
Titular claro
Dice qué ofreces con las palabras que usa tu cliente, no con eslóganes vagos.
Propuesta de valor
Una o dos frases con el beneficio principal y lo que te diferencia.
Llamada a la acción
Un botón visible y concreto: «Pide presupuesto», «Ver precios», «Descargar la guía».
Imagen o vídeo relevante
Muestra el producto, el resultado o a quién va dirigido; evita fotos de archivo genéricas.
Señales de confianza
Valoraciones, logotipos de clientes, certificaciones o cifras verificables.
Navegación sencilla
Menú y buscador accesibles para quien ya sabe lo que busca.
05 Cómo optimizar el above the fold paso a paso
-
1
Define el objetivo de la página
Vender, captar un contacto, informar o llevar a una categoría. La primera pantalla debe servir a ese objetivo.
-
2
Mira tus datos de dispositivos
En Google Analytics revisa qué resoluciones y dispositivos usan tus visitas. Diseña para las más frecuentes, empezando por el móvil.
-
3
Prioriza el contenido
Titular, propuesta de valor y llamada a la acción deben verse sin scroll en esas resoluciones.
-
4
Cuida la velocidad
El elemento principal de la primera pantalla suele ser el que mide el LCP. Optimiza esa imagen o bloque de texto para que cargue rápido.
-
5
Evita saltos de diseño
Reserva el espacio de imágenes, banners y avisos de cookies para que el contenido no se mueva mientras carga.
-
6
Mide el comportamiento
Usa mapas de calor y de scroll para ver hasta dónde llegan los usuarios y en qué hacen clic.
-
7
Prueba variantes
Haz test A/B del titular, la imagen o el botón y quédate con lo que mejore la conversión.
Google recomienda que el Largest Contentful Paint (LCP) sea de 2,5 segundos o menos, y ese elemento casi siempre está above the fold. Por eso trabajar la velocidad de carga web y la primera pantalla van de la mano. Para el paso de medición tienes una comparativa de herramientas en nuestra guía de mapas de calor web.
06 Above the fold en móvil: ¿sigue existiendo el pliegue?
El pliegue existe en cualquier dispositivo, pero no está en el mismo sitio. En un móvil la primera pantalla es estrecha y alta; en un monitor, ancha y baja. Además, las barras del navegador, los avisos de cookies o las ventanas de instalación de apps le restan espacio.
- ✓Comprueba la primera pantalla en al menos un móvil pequeño, uno grande, una tablet y un portátil.
- ✓Evita imágenes de cabecera que ocupan toda la pantalla del móvil sin decir nada.
- ✓Que el botón principal sea fácil de pulsar con el pulgar.
- ✓No tapes el contenido con banners o ventanas emergentes nada más entrar.
- ✓Deja una pista visual de que hay más contenido debajo (un bloque cortado, una flecha) para invitar al scroll.
Antes: una foto de una sonrisa a pantalla completa y el lema «Tu sonrisa, nuestra pasión». Ningún servicio ni forma de contacto sin hacer scroll.
Después: titular «Implantes y ortodoncia en Valencia con primera visita gratuita», tres ventajas en una línea, valoración media en Google y botón «Pedir cita». La información clave se ve en el móvil sin desplazarse y el usuario ya sabe qué hacer.
07 Errores habituales en la primera pantalla
| Error | Por qué perjudica | Solución |
|---|---|---|
| Sliders o carruseles automáticos | Diluyen el mensaje y suelen cargar lento | Una sola imagen y un mensaje principal |
| Titular ambiguo | El usuario no entiende qué ofreces | Describe el producto o servicio con palabras concretas |
| Llamada a la acción escondida | Menos clics y conversiones | Botón visible y con un verbo de acción |
| Exceso de anuncios arriba | Mala experiencia y riesgo con el algoritmo Page Layout | Prioriza el contenido y baja la publicidad |
| Ventanas emergentes al entrar | Tapan el contenido y frustran en móvil | Retrásalas o usa formatos menos intrusivos |
Preguntas frecuentes sobre Above the fold
Significa «por encima del pliegue». En una web es el contenido visible en la pantalla nada más cargar la página, sin hacer scroll.
Es la parte de la página que queda por debajo de la primera pantalla y que solo se ve al desplazarse hacia abajo.
No hay una medida fija. Depende del dispositivo, la resolución, el zoom y las barras del navegador, así que conviene revisarlo en los tamaños de pantalla que más usan tus visitas.
Sí. Según Nielsen Norman Group, en 2018 la primera pantalla todavía concentraba el 57 % del tiempo de visualización. Los usuarios hacen scroll, pero solo si lo que ven arriba les convence.
De forma indirecta, sí. Google lanzó en 2012 el algoritmo Page Layout contra las páginas con demasiados anuncios arriba, y métricas como el LCP miden la carga del contenido principal, que suele estar en la primera pantalla.
Un titular claro, la propuesta de valor, una llamada a la acción visible, una imagen relevante y alguna señal de confianza como valoraciones o logotipos de clientes.
Revisa en Google Analytics las resoluciones más habituales, prueba la página en esos tamaños con las herramientas del navegador y usa mapas de scroll para ver hasta dónde llegan.
Fuentes consultadas
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.