Ir al contenido
Lisandro IserteMarketing y Branding
Glosario · Concepto

¿Qué es Above the Fold?

Por Lisandro IserteÚltima actualización:
Above the Fold en pocas palabras

Above the fold es la porción de una página web visible al cargar sin necesidad de hacer scroll. Puede influir en la primera impresión y en la decisión de seguir explorando, junto con la relevancia del contenido y la intención del visitante.

¿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 es lo que el usuario ve al cargar la página sin desplazarse. Esa primera impresión puede influir en la decisión de continuar, pero no determina por sí sola si hace scroll o abandona: también importan lo que busca, la claridad del contenido y el contexto de la visita.

En Scrolling and Attention (2018), Therese Fessenden presentó un estudio de Nielsen Norman Group con 120 participantes y una pantalla de 1920×1080. En esas condiciones, cerca del 57% del tiempo de visualización se concentró en el contenido visible inicial y un 17% en el segundo pantallazo. El artículo contrasta esos resultados con el 80% registrado above the fold en 2010. Son observaciones de esos estudios, no porcentajes universales para cualquier página o dispositivo.

Para el marketing digital, el contenido visible sin scroll es una oportunidad para presentar lo esencial y orientar la visita. Su efecto sobre la tasa de conversión, el tiempo en página o el retorno del tráfico pago debe medirse en cada caso. El contenido posterior también puede ser decisivo cuando el usuario necesita comparar opciones, resolver dudas o profundizar antes de actuar.

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. Esta perspectiva ayuda a priorizar la información de la primera pantalla, sin convertir el pliegue en una regla rígida de layout.

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.

Desktop ~900–1080px de alto visible Mayor superficie. Permite más elementos above the fold, pero la densidad de atención por píxel es menor que en mobile.
Laptop ~700–800px de alto visible Barra del navegador, pestañas y dock reducen el espacio disponible. Es el formato donde más fácilmente se recortan elementos críticos.
Mobile ~550–700px de alto visible La superficie más limitada y la que más tráfico recibe. Mobile-first prioriza este formato como punto de partida del diseño.
Tablet ~700–950px según orientación Variable entre portrait y landscape. Requiere verificación explícita en ambas posiciones, no heredar del diseño desktop.

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 qué hace la página, puede perder interés; conviene comprobar la claridad del mensaje con usuarios reales.
  • 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 Iserte

Có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.

¿La propuesta de valor se entiende en 5 segundos? → Test de 5 segundos Mostrar la página durante 5 segundos a usuarios nuevos y pedirles que resuman qué hace. Si no pueden, el above the fold falla en su función básica.
¿Dónde está mirando el usuario realmente? → Heatmaps de clicks y scroll Herramientas como Hotjar o Microsoft Clarity revelan si los elementos prioritarios reciben atención o si el usuario los ignora para ir a otro lado.
¿Qué porcentaje de usuarios hace scroll? → Scroll depth analytics Si el scroll depth al 50% de la página es menor al 40%, el contenido visible no está captando suficiente atención como para motivar el desplazamiento.
¿Qué variante convierte mejor? → A/B Test del hero El above the fold es el componente de mayor ROI para testear. Pequeños cambios en headline o CTA producen diferencias de conversión de dos dígitos con frecuencia.

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 y la mitad superior quedaba visible. En web, esa primera pantalla puede influir en la primera impresión, pero no determina por sí sola si el visitante se queda o abandona.

¿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. Below the fold es el contenido que requiere desplazamiento para verse. La primera pantalla ayuda a presentar y orientar; el contenido posterior permite desarrollar información y también puede ser decisivo para el usuario. La prioridad depende del objetivo de la página y de lo que la persona necesita resolver.

¿Cómo afecta above the fold al SEO?

El contenido de la primera pantalla influye en la experiencia de uso. Google utiliza los Core Web Vitals entre sus señales de ranking. LCP mide el tiempo hasta que se renderiza el contenido de mayor tamaño visible en el viewport durante la carga. CLS mide los desplazamientos inesperados del contenido visible a lo largo de la vida de la página, también durante el scroll; no se limita a la primera pantalla. Mejorar estas métricas no garantiza mejores posiciones: también importan la relevancia y otros factores.

¿Above the fold sigue siendo relevante en 2026?

Sí, como criterio de priorización que conviene validar en cada sitio. El 57% publicado por NN/g corresponde al estudio de 2018 con 120 participantes y una pantalla de 1920×1080; no es una proporción universal. La primera pantalla puede facilitar la exploración, pero el scroll también depende del objetivo del visitante y del contenido que busca.

Referencias clave

  1. Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

    (3ª ed.). New Riders.

  2. Fessenden, T. (2018). Scrolling and Attention

    . Nielsen Norman Group.

  3. Tarquini, M. (2007). Blasting the Myth of the Fold

    . A List Apart.

  4. Runyon, E. (2013). Carousel Click-Through Study

    . University of Notre Dame.

Resumen y fuente para consultar con IA

Above the fold es la porción de una página web visible al cargar sin necesidad de hacer scroll. Puede influir en la primera impresión y en la decisión de seguir explorando, junto con la relevancia del contenido y la intención del visitante.

Autor: Lisandro Iserte. Fuente original.

¿Querés seguir con un curso?

Estoy preparando cursos de marketing y branding. Podés pedir un aviso de lanzamiento.

Tu forma de leer

Automático usa el modo oscuro de 19 a 7 h, según tu hora local.

¿Qué estás buscando?