¿Qué es Above the Fold?
Above the fold es la porción de una página web visible al cargar sin necesidad de hacer scroll. Es el espacio de mayor densidad de atención del usuario y el primer determinante de si decide permanecer en la página o abandonarla.
¿Qué es above the fold?
Above the fold es un término que el marketing digital tomó prestado del periodismo impreso. Los diarios se exhibían doblados en los kioscos, y las noticias más importantes se ubicaban en la mitad superior — la parte visible sin desdoblar el periódico. En web, the fold es el límite inferior de la pantalla visible sin scroll, y above the fold es todo lo que queda por encima de ese límite. El principio editorial es el mismo: lo más importante va en el espacio que no requiere acción para ser visto.
El área above the fold tiene una propiedad fundamental que la diferencia del resto de la página: es lo que el usuario ve sin ninguna acción de su parte. En ese primer instante — que los estudios de eye-tracking estiman en menos de un segundo desde el load — el visitante forma una primera impresión que determina si hace scroll o cierra la pestaña. Jakob Nielsen y su equipo en Nielsen Norman Group vienen documentando este comportamiento desde hace más de dos décadas, con datos consistentes a través de cambios tecnológicos, dispositivos y generaciones de usuarios.
La evidencia empírica más citada viene del análisis de heatmaps a escala masiva: los usuarios pasan el 57% de su tiempo de atención en el contenido visible inicial, con una caída brusca de atención en las pantallas posteriores. El segundo pantallazo captura cerca del 17% y los siguientes se reparten el resto. Esta distribución no es un accidente del diseño de los sitios analizados — es una propiedad estructural del comportamiento humano frente a interfaces digitales.
Para el marketing digital, la implicancia es directa: el contenido visible sin scroll es el espacio de mayor densidad de atención de toda la página, y lo que se coloca ahí determina el techo de performance del resto. Lo que quede fuera de esa primera pantalla compite por una atención residual mucho menor. Esto tiene consecuencias medibles sobre la tasa de conversión, el tiempo en página, la tasa de rebote y, en última instancia, sobre el retorno del tráfico pago.
Steve Krug, en Don't Make Me Think (2000, revisado en 2014), formuló el principio general del que above the fold es una aplicación específica: cada elemento de una interfaz consume una cantidad limitada de atención cognitiva, y el diseñador debe tratar esa atención como el recurso más escaso. El above the fold no es una regla de layout — es la manifestación visible de esa ley de escasez atencional en el primer segundo de la visita.
El contenido visible según dispositivo
La primera pantalla web no tiene una medida estándar: cambia con el dispositivo, la resolución, el tamaño de ventana del navegador, las barras de herramientas activas y, en mobile, con la orientación del equipo. Lo que un usuario de desktop ve sin scroll puede estar dos pantallazos más abajo en el iPhone de otro visitante. Esta variabilidad es la razón por la que above the fold es un principio de priorización, no una medida fija en píxeles.
El contexto hoy está dominado por mobile. Más del 60% del tráfico web en la mayoría de los mercados hispanohablantes llega desde dispositivos móviles, y en sectores como ecommerce de consumo masivo o contenido editorial el número supera el 70%. Diseñar above the fold pensando primero en desktop y adaptar después para mobile — el patrón contrario al mobile-first — frecuentemente produce CTAs enterrados por debajo de la fold o propuestas de valor cortadas justo en la parte que importa.
Diseñar mobile-first — empezar el layout desde el dispositivo más restrictivo — es la mejor práctica operativa para garantizar que los elementos críticos queden above the fold en todos los contextos. La disciplina es simple: si el headline, la propuesta de valor y el CTA principal conviven en una pantalla de 375×667, van a convivir cómodamente en cualquier viewport más amplio. El camino inverso es el que rompe.
Qué debe ir above the fold (y qué no)
La decisión sobre qué colocar above the fold es una decisión de jerarquía y claridad, no de cantidad. El contenido visible debe responder una sola pregunta en el menor tiempo posible: ¿estoy en el lugar correcto y vale la pena quedarme? Todo lo que no contribuye a esa respuesta compite contra ella.
Above the fold lleva
- Propuesta de valor principal Qué es, para quién es y qué beneficio concreto ofrece — una sola frase densa. La propuesta de valor es el ancla semántica del above the fold. Si el usuario no entiende en 3 segundos qué hace la página, se va.
- CTA principal — uno solo El único llamado a la acción que importa en esa página. Claro, específico, en contraste visual suficiente. Múltiples CTAs above the fold compiten entre sí y reducen la conversión agregada.
- Señal de credibilidad Logo de cliente conocido, número de usuarios activos, premio relevante, certificación, o una media mention. Una única señal de prueba social visible reduce la fricción inicial sin saturar el espacio.
Above the fold NO lleva
- Sliders y carruseles Ocupan espacio de máxima atención con contenido que rota sin que el usuario lo controle. El primer slide captura entre 84-89% del click total — los siguientes son ruido visual que desplaza contenido prioritario.
- Navegación sobrecargada Una barra con 10 opciones en una landing de conversión distrae del objetivo único. En landing pages de performance, la navegación mínima o ausente mejora la conversión entre 20% y 40% en la mayoría de casos documentados.
- Imágenes decorativas sin propósito Un hero que ocupa el 80% del espacio visible pero no aporta información sobre qué hace la página es superficie quemada. Si la imagen desaparece y el usuario entiende lo mismo, esa imagen no pertenece al above the fold.
- Múltiples CTAs en competencia "Probá gratis", "Ver demo", "Hablar con ventas" y "Descargar PDF" todos juntos arriba producen parálisis de decisión. Un solo CTA primario gana — los demás van below the fold o se eliminan.
Milissa Tarquini escribió en 2007 un artículo famoso en A List Apart titulado Blasting the Myth of the Fold — un matiz importante al principio general. Su punto no era negar la importancia del área visible, sino cuestionar el reflejo de "meter todo arriba" que dominaba el diseño web de principios de los 2000. Esa tentación de sobrecargar sigue viva: la respuesta sigue siendo la misma hoy que hace casi veinte años. El above the fold no es un contenedor para empacar, es una superficie para priorizar.
Above the fold no es un problema de diseño — es un problema de priorización. La pregunta correcta no es "¿cómo hago que todo quepa en el primer pantallazo?" sino "¿qué es lo único que necesita estar visible sin scroll para que este usuario entienda por qué debería quedarse?" Una respuesta clara a esa pregunta vale más que cualquier decisión de layout.
Lisandro IserteCómo medir si tu above the fold funciona
La evaluación del above the fold no puede basarse en la intuición del equipo o en comparaciones con competidores. Los usuarios que llegan a la página probablemente no se parecen en nada al diseñador que la construyó, y las diferencias se acumulan rápido. Medir el contenido visible en condiciones reales requiere instrumentación específica y preguntas diagnósticas concretas.
Las cuatro señales se leen en conjunto. Un heatmap que muestra clicks concentrados en el CTA principal pero un scroll depth bajo indica que el CTA funciona pero el usuario no está interesado en profundizar — posiblemente porque la propuesta de valor no genera suficiente pregunta adicional. Un test de 5 segundos con resultados confusos pero A/B tests que muestran mejoras marginales indica que el problema no está en el layout sino en el mensaje de la propuesta. Diagnóstico antes que iteración.
Para equipos que recién empiezan a medir el contenido visible, el punto de partida más barato es Microsoft Clarity — gratuito, sin límite de sesiones, con heatmaps y session recordings. La integración toma unos minutos y permite observar, durante una semana, cómo visitantes reales interpretan la primera pantalla. Esa semana de observación típicamente hace más por el above the fold que tres meses de refactor basado en opinión.
Errores comunes con above the fold
Diseñar para desktop y olvidarse de mobile
Un CTA perfectamente ubicado above the fold en una pantalla de 1440px puede quedar completamente fuera de la vista inicial en un iPhone estándar. Con más del 60% del tráfico web llegando desde mobile, no verificar el above the fold en móvil antes de publicar es dejar conversiones sobre la mesa sistemáticamente.
Sobrecargar el área con demasiada información
Intentar comunicar todo en el primer pantallazo — propuesta, beneficios, precios, testimonios y CTA — produce una primera impresión caótica. La claridad es más valiosa que la completitud. El resto de la página existe para desarrollar lo que el above the fold plantea, no para compensar lo que no cabe.
Poner el CTA below the fold "para no parecer agresivo"
Un CTA visible no es agresivo — es claro. Ocultar la llamada a la acción en nombre de la sutileza produce páginas donde el usuario entiende qué ofrece la marca pero no sabe qué hacer. La claridad de intención no es agresividad comercial; es respeto por el tiempo del visitante.
Usar el hero para un video autoplay
Un video en autoplay above the fold compite con la propuesta de valor por el foco atencional. En mobile, además, puede ser bloqueado por el navegador, producir layout shifts y encarecer la carga de la página. Si hay un video, que sea opcional y esté below the fold, con un thumbnail claro arriba.
Confundir above the fold con página estática
Llegar a un above the fold sólido no significa congelarlo. La primera pantalla es el componente con mayor ROI de testing de toda la página — pequeñas variaciones en headline, CTA o señal de credibilidad pueden mover la tasa de conversión entre 10% y 40% en experimentos bien diseñados. Optimizarlo es trabajo permanente, no una decisión de lanzamiento.
Preguntas frecuentes sobre above the fold
¿Qué es above the fold?
Above the fold es la porción de una página web que el usuario ve al cargarla sin necesidad de hacer scroll. El término proviene del periodismo impreso: los diarios se exhibían doblados en los kioscos y las noticias más importantes iban en la mitad superior, la parte visible. En web, es el espacio de mayor densidad de atención de la página y el primer determinante de si el visitante decide quedarse o abandonar.
¿Qué elementos deben estar above the fold?
Tres elementos son esenciales above the fold: la propuesta de valor principal que responde qué hace la página y para quién, un único CTA claro y en contraste visual, y al menos una señal de credibilidad como logo de cliente, número de usuarios o certificación. Lo que debe evitarse: sliders, navegación sobrecargada en landing pages, imágenes decorativas sin contenido informativo, y múltiples CTAs que compitan entre sí.
¿Cuál es la diferencia entre above the fold y below the fold?
Above the fold es el contenido visible sin scroll al cargar la página, donde se concentra la mayor densidad de atención del usuario. Below the fold es todo el contenido que requiere desplazamiento vertical para verse. La diferencia no es decorativa: el above the fold determina si el usuario se queda, el below the fold se gana solo si el primero convenció. Por eso lo más importante va arriba y el desarrollo va abajo.
¿Cómo afecta above the fold al SEO?
El above the fold no es un factor directo de ranking, pero afecta el SEO de manera indirecta a través de las señales de comportamiento: dwell time, tasa de rebote y porcentaje de scroll. Un above the fold débil produce abandonos rápidos que Google interpreta como contenido no satisfactorio para la intención de búsqueda. Además, los Core Web Vitals (LCP, CLS) miden específicamente elementos del above the fold, donde una mala experiencia penaliza el ranking.
¿Above the fold sigue siendo relevante en 2026?
Sí. Los estudios de eye-tracking de Nielsen Norman Group documentan consistentemente que el 57% del tiempo de atención del usuario se concentra en el contenido visible inicial, con una caída brusca en el scroll posterior. El comportamiento de scroll cambió: los usuarios se desplazan más que antes, pero solo cuando el primer pantallazo captó su atención. Si el above the fold no convence, el scroll no ocurre.
Referencias clave
Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3ª ed.). New Riders. El texto fundacional sobre escasez atencional aplicada a interfaces web. Define el principio del que above the fold es una aplicación específica.
Nielsen, J. & Pernice, K. (Nielsen Norman Group, 2010). Scrolling and Attention. Estudio de eye-tracking sobre la distribución del tiempo de atención por pantalla. Fuente del 57% citado en este artículo. Datos actualizados en sucesivas revisiones.
Tarquini, M. (2007). Blasting the Myth of the Fold. A List Apart. Contrapunto importante al reflejo de "meter todo arriba" del diseño web temprano. No niega la relevancia del fold, sino que lo encuadra como problema de priorización.
Runyon, E. (2013). Carousel Click-Through Study. University of Notre Dame. Análisis citado sistemáticamente que muestra que el primer slide de un carrusel captura entre el 84% y 89% del click total. Evidencia operativa contra los sliders above the fold.
Términos relacionados