Above the Fold: qué significa hoy con pantallas de 360 a 3440 píxeles

El término nace en los periódicos. Los diarios se exhibían doblados por la mitad en los quioscos, así que el titular y la foto que iban en la mitad superior de la portada, la parte visible sin desdoblar el periódico, decidían si alguien compraba el ejemplar o pasaba de largo. Esa mitad superior era literalmente "arriba del pliegue": above the fold.

Cuando el diseño web se profesionalizó a finales de los años noventa, la analogía se trasladó directamente a las pantallas. Un usuario abre una web y ve una porción de la pantalla sin tocar el ratón ni el dedo; el resto queda oculto hasta que hace scroll. Los primeros estudios de usabilidad de esa época, con monitores mayoritariamente de 800x600 o 1024x768 píxeles, mostraban que gran parte de los usuarios no llegaba a bajar la página. La conclusión práctica fue simple: si algo importa, que esté visible sin scroll.

Esa regla se convirtió en dogma de diseño durante más de una década. Titulares, llamadas a la acción, formularios de contacto y propuestas de valor se apretujaban en los primeros 600 u 800 píxeles de alto, a veces a costa de la claridad visual, para no perder al usuario que no scrollea.

De ese miedo nació todo un pequeño mercado de herramientas. Proveedores de mapas de calor como Crazy Egg o Hotjar construyeron su primer argumento de venta casi por completo alrededor de una pregunta: cuántos usuarios llegan a hacer scroll en una página y hasta dónde. Las agencias enseñaban a sus clientes capturas de pantalla con una línea roja a 600 u 800 píxeles, advirtiendo de que casi nadie veía lo que quedaba debajo. Esa práctica no era descabellada en las condiciones técnicas de la época, con un puñado de tamaños de pantalla habituales. El problema llegó después, cuando esa única línea roja se convirtió en regla fija mucho después de que la variedad de dispositivos por debajo se hubiera multiplicado.

La llegada de Core Web Vitals cambió el marco de referencia. Google no habla de "above the fold" en su documentación técnica sobre LCP (verificado: la página oficial de web.dev sobre Largest Contentful Paint no menciona el término); habla de viewport, el área de pantalla realmente visible en cada dispositivo y cada sesión. El LCP mide cuánto tarda en renderizarse el elemento más grande dentro de ese viewport, ya sea una imagen, un bloque de texto o un vídeo. Si un elemento se sale del viewport o queda cortado, esa parte no cuenta para el cálculo (verificado, según la documentación de web.dev).

La diferencia es sutil pero importante. Above the fold, tal como se usaba en los años 2000, asumía un valor fijo, una línea imaginaria a una altura de píxeles concreta, igual para todos los visitantes. El LCP no asume nada de eso: se mide por sesión real, con el viewport real de cada usuario. No hay una línea del pliegue única que Google evalúe; hay tantos viewports como combinaciones de dispositivo, orientación y zoom existen entre los visitantes de una página.

Dicho de otro modo, el concepto original resolvía un problema de jerarquía visual con una regla fija. Core Web Vitals resuelve un problema de rendimiento con una medición dinámica. Ambos importan, pero no son intercambiables, y confundirlos lleva a errores de diseño.

Esta es la pregunta que de verdad importa hoy, más que la definición del término. Si un móvil tiene un viewport de 360 píxeles de ancho y un monitor ultrawide llega a 3440, "el contenido visible sin scroll" es un número radicalmente distinto para dos personas que visitan la misma URL en el mismo minuto. ¿Tiene sentido seguir diseñando pensando en una línea de corte única?

Los datos de cuota de mercado de resoluciones de pantalla lo confirman de forma bastante contundente: en julio de 2026, la resolución más usada en el mundo, 1920x1080, representaba apenas un 10,13% del tráfico global (verificado, Statcounter Global Stats, datos de julio de 2026, actualizados el 7 de agosto de 2026). El resto se reparte entre docenas de anchos de viewport móvil, desde 360x800 hasta 414x896, cada uno con cuotas de un solo dígito. No existe una resolución dominante desde hace años; existe una fragmentación tan amplia que fijar un píxel exacto como frontera del fold es, en la práctica, arbitrario.

Y no es solo cuestión de ancho. Above the fold fue en origen, sobre todo, una cuestión de alto: cuánto tiene que bajar un usuario antes de que realmente haga scroll. Esa altura también varía muchísimo hoy: un móvil en vertical suele mostrar solo entre 600 y 700 píxeles de alto útil, una vez que la barra del navegador y los elementos del sistema operativo recortan el espacio disponible, y esa cifra cambia incluso dentro de la misma sesión, cuando la barra de direcciones se oculta o reaparece al hacer scroll. Una ventana de escritorio a pantalla completa, en cambio, muestra fácilmente entre 900 y 1000 píxeles. Pensar en above the fold solo en términos de ancho deja fuera la mitad del problema real.

Ahora bien, esto no significa que el principio de fondo esté muerto. Un estudio de seguimiento ocular del Nielsen Norman Group, con datos de 2018, encontró que los usuarios dedicaban un 57% de su tiempo de visualización a la parte superior de la página, frente al 80% que se registraba en un estudio equivalente de 2010 (verificado, nngroup.com, estudio de 2018; son datos de hace más de siete años y no hemos localizado una actualización posterior con metodología comparable, así que se citan con esa reserva). El mismo estudio señalaba que el 74% del tiempo de visualización se concentraba en las dos primeras pantallas de contenido, y que el patrón de caída brusca de atención después de ese tramo se mantenía igual que en 2010, solo que desplazado más abajo.

La lectura razonable de estos dos datos juntos es esta: como línea de píxeles fija, above the fold no aguanta el análisis en 2026. Como principio de que el contenido situado más arriba recibe sistemáticamente más atención que el que exige scroll, sigue siendo cierto, solo que el corte ya no es una frontera nítida sino una pendiente de atención decreciente que varía según el dispositivo. Cambiar la pregunta "¿qué entra en los primeros 700 píxeles?" por "¿qué ve primero cada segmento real de mi audiencia, y qué carga rápido ahí?" es el giro que piden tanto los datos de comportamiento como las métricas de rendimiento.

La consecuencia práctica no es abandonar la idea de jerarquía visual, es dejar de tratarla como una medida en píxeles y empezar a tratarla como una decisión de prioridad de contenido por segmento de audiencia.

En primer lugar, conviene revisar los datos reales de la propia web antes de asumir nada: Google Search Console y el reporte de Core Web Vitals segmentan el rendimiento por dispositivo, y las herramientas de analítica muestran qué proporción del tráfico llega desde móvil, tablet o desktop, y con qué anchos de pantalla predominantes. Diseñar sobre un mockup a 1440 píxeles sin mirar esos datos es diseñar a ciegas para una fracción de la audiencia real.

En segundo lugar, el elemento LCP de cada plantilla clave, home, ficha de producto, artículo, debería identificarse y optimizarse de forma explícita: qué imagen, titular o bloque es el candidato a elemento más grande en cada breakpoint, y si carga rápido en condiciones reales de red móvil, no solo en un entorno de laboratorio con fibra.

En tercer lugar, el diseño responsive bien hecho ya resuelve buena parte del problema: en lugar de fijar una altura de página que debe caber en todos los tamaños, se define una jerarquía de contenido, titular, propuesta de valor, llamada a la acción principal, que se adapta de forma fluida según el espacio disponible, en vez de recortarse o comprimirse de forma forzada en pantallas pequeñas.

Por último, herramientas como los mapas de calor y las pruebas A/B siguen siendo el método más fiable para saber qué ve realmente cada segmento de usuarios, en lugar de asumirlo desde un diseño único. Un mapa de calor por dispositivo muestra dónde cae la atención en la práctica, no en la teoría, y una prueba A/B permite comprobar si mover un elemento por encima o por debajo de una posición concreta cambia de verdad el comportamiento.

Conviene además probar el diseño en dispositivos reales, no solo en emuladores del navegador. Un emulador simula un ancho de pantalla, pero rara vez reproduce la velocidad de carga real en red móvil, la interacción con el pulgar o el comportamiento de las barras del navegador que se ocultan y reaparecen al hacer scroll. Basar las decisiones de diseño y SEO en un único dispositivo de referencia, ya sea el móvil que el diseñador lleva en el bolsillo o un monitor de 27 pulgadas en la oficina, repite exactamente el mismo error de principios de los años 2000, solo que trasladado a un nuevo abanico de pantallas.

• Revisar los datos reales de dispositivo y viewport en Google Search Console y en la herramienta de analítica web antes de diseñar, en vez de asumir un tamaño de pantalla estándar.
• Definir la jerarquía de contenido (titular, propuesta de valor, llamada a la acción) de forma flexible, no como bloques fijos en píxeles concretos.
• Identificar y optimizar el elemento LCP de cada plantilla clave, comprobando su velocidad de carga en condiciones reales de red móvil.
• Probar el diseño en varios anchos de viewport reales, no solo en el tamaño de pantalla del ordenador del diseñador.
• Usar mapas de calor y pruebas A/B segmentadas por dispositivo para validar qué contenido recibe atención de verdad, en lugar de darlo por hecho.

• Fijar una altura exacta en píxeles como línea del fold y diseñar todo el contenido crítico para caber ahí, ignorando que esa línea cambia según el dispositivo.
• Sacrificar la claridad visual por meter demasiados elementos, titular, subtítulo, formulario, banner, menú, en la primera pantalla.
• Confundir el LCP con todo lo que está above the fold: el LCP mide un elemento concreto, no la sección completa.
• Diseñar y validar solo sobre un mockup de escritorio a 1440 píxeles sin comprobar cómo se comporta el mismo contenido en 360 píxeles o en un monitor ultrawide.
• Dar por buena una suposición sobre qué ve primero el usuario sin contrastarla con datos de mapa de calor o analítica real.