Los editores de periódicos lo descubrieron mucho antes de que existiera la web. La noticia que merece leerse va por encima del pliegue físico. Todo lo que queda debajo compite contra la decisión de pasar la página. En una web se aplica el mismo principio a la primera pantalla que ve un visitante antes de hacer scroll.
El above the fold (literalmente, "por encima del pliegue") es la parte de una página web que se ve en la ventana del navegador cuando la página carga por primera vez, antes de que el visitante haga scroll. Es la única parte de la página que ven todos los visitantes. Todo lo que hay debajo tiene que ganarse el scroll. El término viene del papel: un periódico doblado por la mitad en un quiosco solo muestra la mitad superior de la portada. Esa mitad superior tenía que ganarse la atención. El above the fold de una web funciona igual.
Lo que queda above the fold varía según el dispositivo, el tamaño de pantalla y el navegador de cada visitante. Un monitor de escritorio grande muestra mucho más contenido above the fold que un móvil en vertical. Diseñar para el pliegue significa pensar en todos ellos, no solo en la versión que ves en tu propia pantalla.
¿Por qué importa el contenido above the fold?
Los estudios sobre el comportamiento de lectura muestran de forma constante que los visitantes pasan más tiempo con el contenido de la parte superior de una página. Cuanto más abajo está el contenido, menos visitantes llegan a él. No es un fallo de atención. Es una respuesta racional al tiempo limitado. Los visitantes juzgan rápido si merece la pena leer una página, y ese juicio ocurre en la primera sección visible.
El above the fold es donde respondes a la primera pregunta del visitante: ¿estoy en el sitio adecuado? Si el titular, la imagen y las primeras líneas de texto lo dejan claro, los visitantes hacen scroll. Si están confusos o inseguros, la mayoría no da una oportunidad al resto de la página.
¿Qué debe ir above the fold?
El above the fold tiene poco espacio y mucho en juego. Cada elemento que aparece ahí debe ganarse su posición sirviendo al visitante o impulsando el objetivo de la página.
Un titular claro que diga de qué trata la página o qué obtiene el visitante. Una frase de apoyo o un subtítulo que añada contexto o concreción. Una imagen que refuerce el mensaje en lugar de limitarse a decorar. Una llamada a la acción que dé al visitante un siguiente paso claro si ya está convencido.
La navegación pertenece al above the fold. Los visitantes esperan encontrar en la parte superior de la página una forma de explorar el resto del sitio, y un menú enterrado u oculto crea fricción desde el primer momento. El artículo sobre qué es la navegación de una web explica cómo diseñar menús que funcionen bien en todos los dispositivos.
Lo que no pertenece al above the fold es todo lo que ocupa espacio sin contribuir a que el visitante entienda o decida. Las imágenes decorativas grandes sin valor informativo, los banners rotativos que retrasan la carga o los bloques de texto introductorio que el visitante tiene que recorrer antes de llegar al punto desperdician el espacio más valioso de la página.
¿En qué cambia el above the fold en el móvil?
En el móvil, el above the fold es bastante más pequeño que en el ordenador. Una pantalla de móvil en vertical muestra unos 600 a 800 píxeles de alto. Un monitor de escritorio puede mostrar de 900 a 1200 píxeles. El mismo diseño puede mostrar dos o tres secciones above the fold en el ordenador, y solo un titular y una imagen en el móvil.
La consecuencia práctica es que los visitantes de móvil deciden si se quedan o hacen scroll con mucha menos información de la que ven de entrada los visitantes de ordenador. Lo que más importa tiene que caber en una ventana más pequeña. Las secciones hero con imágenes de fondo grandes y poco texto son un problema habitual: se ven espectaculares en el ordenador, pero llenan toda la pantalla del móvil con muy poco contenido antes de que el visitante tenga que hacer scroll.
Probar el above the fold en un móvil real es importante, porque las vistas previas del navegador y las simulaciones de escritorio no representan con exactitud lo que ven los visitantes de móvil. Para una lista completa de aspectos móviles, el artículo sobre cómo hacer una web adaptada al móvil explica qué revisar antes de publicar.
¿El above the fold afecta a la velocidad de la página?
Directamente. El above the fold es lo primero que renderiza el navegador, así que cualquier recurso que retrase su aparición perjudica el tiempo de carga percibido, aunque el resto de la página cargue rápido.
Las imágenes hero grandes, las fuentes web que tienen que cargar antes de que se muestre el texto y los scripts que se ejecutan antes de renderizar la página empujan hacia abajo el contenido above the fold. Desde el punto de vista del visitante, la página carga lenta aunque el tiempo de carga técnico sea razonable. Un above the fold en blanco o a medio cargar mientras el resto de la página se pone al día es una de las causas más comunes de tasas de rebote altas en páginas que, por lo demás, están bien diseñadas.
Mantener optimizada la imagen hero, priorizar la carga de los recursos del above the fold y aplazar los scripts no esenciales son las soluciones más eficaces. El artículo sobre qué es la velocidad de una web explica el lado técnico del rendimiento de carga y qué lo afecta más.
¿El above the fold afecta al SEO?
El contenido above the fold es una señal que usan los buscadores para evaluar la calidad de una página. Se penaliza a las páginas que cargan mucha publicidad o contenido de baja calidad above the fold y empujan el contenido principal hacia abajo. Fue una actualización concreta del algoritmo dirigida a sitios que enterraban el contenido útil debajo de grandes bloques de anuncios.
Más allá de esa penalización concreta, el above the fold afecta al SEO de forma indirecta mediante las señales de comportamiento. Los visitantes que llegan a una página y se van enseguida porque el above the fold no les dio un motivo para quedarse generan tasas de rebote altas y poco tiempo de permanencia. Con el tiempo, estas señales indican a los buscadores que la página no respondió a la intención de la búsqueda.
Un buen diseño del above the fold también favorece una mejor estructura de títulos. Un titular claro visible above the fold, respaldado por una estructura lógica de página debajo, ayuda tanto a los visitantes como a los buscadores a entender la página rápido. El artículo sobre qué es el diseño web explica cómo las decisiones de diseño, como la jerarquía de títulos, moldean la experiencia del visitante. Para ver el panorama completo de los posicionamientos, el artículo sobre qué es el SEO explica los factores técnicos y de contenido que más importan.
Cómo gestiona WEMASY el diseño del above the fold
Las plantillas del creador de webs de WEMASY se crean pensando en el above the fold. Las secciones hero están optimizadas para cargar rápido y el editor visual te permite ver cómo se muestra cada sección en distintos tamaños de pantalla antes de publicar. La vista previa móvil muestra exactamente lo que ven los visitantes en un móvil antes de hacer scroll, así que puedes ajustar el contenido y el diseño sin adivinar.
Mira qué incluye en el creador de webs de WEMASY o consulta los planes en la página de precios.
Preguntas frecuentes
¿Sigue siendo relevante el above the fold con el comportamiento actual de scroll?
Sí. Los visitantes hacen scroll con más facilidad que hace una década, pero el above the fold sigue pesando de forma desproporcionada. Los visitantes pasan más tiempo con el contenido de la parte superior de una página, sin importar cuánto hagan scroll. En el above the fold se decide si se quedan o se van. Hacerlo claro, rápido y atractivo es hoy tan importante como siempre. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu web.
¿Qué altura debe tener una sección hero?
Una sección hero debe mostrar suficiente contenido above the fold para comunicar el propósito de la página sin ocupar toda la pantalla. En ordenador, un hero que llena toda la altura de la pantalla con solo un titular y una imagen puede resultar vistoso, pero también retrasa el acceso del visitante al contenido real. Un mejor enfoque es un hero lo bastante alto para causar una buena primera impresión y que aun así deje ver un adelanto del contenido de debajo, para indicar a los visitantes que hay más por ver si hacen scroll.
¿Qué es una llamada a la acción above the fold?
Una llamada a la acción above the fold es un botón o un enlace colocado en la primera sección visible de una página, que da a los visitantes ya convencidos una forma de actuar de inmediato sin hacer scroll. Algunos ejemplos habituales son "Empieza ya", "Reserva una llamada" o "Ver precios". No todos los visitantes que ven el above the fold están listos para actuar, y para eso existe el resto de la página, pero tener una acción clara disponible desde el principio reduce la fricción para quienes sí lo están.
¿Toda página necesita un above the fold potente?
Sí, pero lo que significa "potente" varía según el tipo de página. El above the fold de una página de inicio tiene que establecer quién eres y qué ofreces. El de un artículo del blog tiene que confirmar al lector que está en el artículo correcto y darle un motivo para seguir leyendo. El de una página de producto tiene que mostrar el producto con claridad y hacer accesible el precio. El principio es el mismo en todos los tipos de página: la primera pantalla debe responder a la pregunta más inmediata del visitante.
¿Cómo pruebo lo que aparece above the fold en distintos dispositivos?
La forma más precisa es revisar tus propias páginas en dispositivos reales. Usa un monitor de escritorio, una tablet y un móvil, tanto en vertical como en horizontal. Las herramientas para desarrolladores del navegador tienen un modo de simulación de dispositivos que da una aproximación razonable, pero no tiene en cuenta las barras de herramientas del navegador, las barras de direcciones ni las zonas de notificaciones que reducen la altura visible de la pantalla en los móviles reales. Lo que se ve bien en una vista previa del navegador suele tener un corte del pliegue claramente distinto en un dispositivo real.