El término “Above the fold” (ATF) se origina en el mundo periodístico cuando el papel era uno de los materiales más importantes para comunicar las noticias y que consistían en varias hojas juntas donde se les hacían pliegues para doblarlos por la mitad y entregarlos como un solo paquete, por lo tanto la primer hoja tenía sólo la mitad superior visible y era la que contaba con la mayor importancia.
Los editores utilizaban este espacio en la primera hoja (plana) para poner los títulos más importantes e imágenes más representativas de las noticias para que las personas les llamara la atención comprar el ejemplar.
En el mundo digital utilizamos ese concepto para hacer referencia a lo primero que puede ver el usuario cuando se carga una página web, de ahí deriva su importancia cuando estamos queriendo comunicar algo a quienes nos visitan.
Por ejemplo si entramos a http://www.informador.com.mx/ desde algún equipo de escritorio tendremos que el ATF sería el siguiente:
En la actualidad tenemos múltiples dispositivos por lo que el ATF sería diferente en cada uno de ellos debido al tamaño de la pantalla del usuario, por lo que la recomendación siempre será aprender de nuestras propias mediciones de acuerdo a las características de los dispositivos de las personas que visitan nuestro sitio.
Una de las herramientas más utilizadas en la actualidad para mediciones y analítica web en general es Google Analytics, pero existen otros como Piwik, Adobe Analytics, Kissmetrics, Clicky, etc. Para nuestro caso práctico haremos referencia a Google Analytics.
¿Con tantos dispositivos cómo podemos diseñar correctamente nuestro ATF?
En el mundo multi pantalla tenemos el problema de identificar cuál es la mejor forma de asegurarnos que nuestro contenido relevante sea el que se muestre primero y para ello vamos a usar Google Analytics y Chrome DevTols.
Google Analytics
Muchas personas en el mundo digital conocen muy bien Google Analytics y la mayoría de ellas lo tienen configurado en sus sitios web para su seguimiento. En caso de no contar con un código de seguimiento en tu sitio, te recomiendo que leas este artículo aquí.
En la sección de informes podremos saber cuáles son las resoluciones de los visitantes de nuestro sitio web. Para poder revisar esta información te recomiendo que ingreses a Audiencia (1) => Navegador y SO (2) => Resolución de Pantalla (3).
De esa forma podremos analizar cuáles son las resolución que utilizan los usuarios de nuestro sitio web y enfocarnos al desarrollo de una correcta visualización de los contenidos más importantes que debemos de resaltar en nuestro ATF.
Google DevTools
Una vez que hemos detectado las mejores resoluciones, habrá que hablar con el equipo de diseño, contenidos y de desarrollo del sitio web (especialmente los que se encargan de realizar las interfaces o front-end) para que puedan apoyarnos a lograr nuestros objetivos.
Una herramienta en la que podemos apoyarnos es Google DevTools, de la que previamente había comentado en otro artículo titulado “¿Cómo mejorar el performance y la correcta visualización de tu sitio web?” donde podremos utilizar el inspector de código y revisar en diferentes resoluciones nuestra página web.
Para usar esta funcionalidad hacemos lo siguiente:
1. Utilizar el botón derecho del mouse sobre cualquier parte de la página web haciendo click en “Inspeccionar” para que podamos visualizar “Chrome DevTools”.
2. Utilizamos el inspector de dispositivos (1) para habilitar el selector de resoluciones (2).
3. Escogemos el dispositivo con el que queremos hacer la pueba.
4. Usamos configuración personalizada de ancho y alto según sea necesario en caso de que en la lista de dispositivos no contemos con el requerido.
De esta manera podremos estar haciendo pruebas necesarias para que la información más importante que queremos mostrar en primer lugar se encuentre en el área conocida como “Above the fold”.
