Responsive Above The Fold Overlay

In September last year I wrote an article about the crucial role of using analytics as a tool to make informed, data driven decisions in our design processes. As an example I used the “above-the-fold” opacity-fold.psb. Things have changed significantly since then and my approach to analyzing the user’s visibility of the layout has evolved.

Use of responsive media queries has taken the web design world by storm, mostly due to it’s ability to address growing number of devices, browsers and contexts we must design for. Creating a fold overlay for each device and editing them all in Photoshop manually wouldn’t be very efficient at all. Recognizing that my current method will soon be outdated, I looked at a problem from a different perspective. Using a flexible HTML layout foundation for the overlay, and CSS opacity attributes, I’ve managed to build a highly customizable and most importantly responsive (rather than adaptive) overlay.

Fold Sustainability:

As I said, everything is code based, and that was an absolute must. This makes the overlay very reusable and very efficient. Ability to import different sets of data, quickly  test different pages is great within itself, but doing it all without taking any screen-shots or having to draw any arrows ( . . . ) let’s just say it’s an improvement. Flexibility was also significant, dark pages might require a lighter overlay in order to better present the data used to arrive at a particular decision. Change the entire look of the overlay by  editing two hex values in the source. Only thing missing now is the automation that I hope one of you dev-types might help me with.

Here’s how it works:

Download / License

Source is available if you wanna play / modify it to your needs:
responsive-fold.html (15kb)

This work is licensed under a  Creative Commons License Creative Commons Attribution 3.0 Unported License .