¿Sigue importando el above the fold?

El fold se movió, la pregunta sigue igual

Ya no existe un único fold. Un portátil de 1440 × 900 enseña unos 750 píxeles de tu página una vez que el navegador se queda con su parte. Un iPhone en Safari enseña unos 650, y menos cuando la barra de direcciones está abajo. Así que cada visitante ve un trozo distinto de lo que hay arriba del todo. Lo que quiere de ese trozo no ha cambiado. ¿Estoy en el sitio correcto y merece la pena bajar un poco más?

La gente hace scroll, y decide rápido

Cualquiera que use un móvil desde 2010 hace scroll sin pensarlo. El pulgar se mueve antes de que el cerebro termine la frase. Así que el miedo antiguo de que nadie lee por debajo del fold está caducado. Aun así, la gente se va rápido. Alguien pulsa tu anuncio, lee el titular, no encuentra lo que le prometieron y desaparece en segundos. Bajar no le cuesta nada al lector. Lo escaso es su atención.

Mide tu fold antes de diseñarlo

Abre tu página en los tres dispositivos que salen de verdad en tus analíticas. Para casi todos mis clientes son un iPhone, un MacBook de 13 pulgadas y un monitor externo de 1080p. Haz una captura de la parte de arriba en cada uno, sin bajar nada. El móvil suele enseñar un titular y medio botón. El monitor grande suele enseñar un titular flotando en 400 píxeles de vacío. Diseña para los dos, por separado.

Lo que suele desperdiciar ese espacio

Tres cosas se comen la primera pantalla y no devuelven nada. Los carruseles rotatorios pierden a la gente en la primera diapositiva, así que la segunda y la tercera no las ve nadie. Los titulares abstractos tipo «Crecimiento, reinventado» encajarían igual de bien en cualquier web de cualquier sector. Las imágenes de hero enormes empujan el botón fuera de la pantalla del móvil. Esa última compruébala en un teléfono de verdad, porque el canvas de Framer es generoso de una forma que los móviles no.

Lo que se gana un sitio arriba del todo

Cinco cosas, más o menos por orden de prioridad. El nombre del producto y la categoría a la que pertenece. El resultado que consigue el comprador, escrito con sus palabras. Una prueba, como una fila de logos o un número que puedas defender. Un botón principal con un verbo. Y una imagen del producto real o del trabajo real, en vez de una foto de stock de un equipo sonriendo.

Dale al scroll un sitio al que ir

El borde de abajo de la primera pantalla tiene que verse cortado a propósito. Empieza una sección justo antes de la línea del fold. Enseña media fila de logos. Deja que un titular asome desde abajo. Un borde marcado y un hueco ancho justo en esa línea le dicen al ojo que la página se ha acabado. En páginas largas dejo el hero en torno al 80% del alto de la pantalla, para que siempre se vea un trocito de la sección siguiente.

Cómo revisar el tuyo en diez minutos

Enseña la parte de arriba de tu página a alguien de fuera de tu empresa durante cinco segundos. Tápala y pregúntale qué vende la empresa y para quién es. Si no sabe contestar, el fold ha fallado, y no hay animación que lo salve. Después del lanzamiento, mira un mapa de scroll. Si una buena parte de las sesiones no llega nunca a la segunda sección, el problema está dentro de esos primeros 650 píxeles.