Howdy! I’m Jim, co-founder and Design Lead at VisualEyes. Find a little bit about myself and my background here.

During my daily routine at VisualEyes, I design and optimize our landing page along with building/maintaining our design tool plugins.

The main goal for every landing page is to make the business’ value proposition clear enough and convert visitors to leads the optimal way.

Content layout and placement play a significant role in the aforementioned goals. Especially the content that appears above the fold because it’s the first visible when the user loads the page. Thus, it’s a common practice to place the elements that fulfill the conversions goals in the initially visible part of your page.

Our goal as frontend developers is to make sure that the design to code handoff is done the optimal way. CSS offers plenty of attributes that let us manage which content will be displayed on the initial screen. However, we have to be sure that the designer is aware of the issue and the dangers.

Designers have difficulties specifying the Above the fold at the design stage of our process. Many times they have no clue about the visible part of their users’ window. The only indicator is the default Artboard/Frame size of design tools, such as Adobe XD, Figma, Sketch. However these presets are specialized for the total screen resolution and not the real browsing window.

Let’s demonstrate the real problem with a practical example.

The right screenshot is taken from my actual device whereas the left is the Figma MacBook Pro preset. Now, the problem is obvious. The OS and Chrome browser’s navigation bars remove a dynamic portion of the available screen area. Thus, the actual free window for the landing page is smaller than the preset and our social proof elements are not visible anymore.

Very few of us browse the web in fullscreen mode, that’s why the viewport size almost always differs from the actual screen resolution. The CSS tricks site conducted a study and stated that 1% of the users have their browsing window in fullscreen mode. The study is from 2016 but I highly doubt that the results would be different now.

How to solve it?

That’s the reason we built Above the Fold plugin, and mark in layers where the above the fold section ends.

Our approach was to gather the most common screen resolution around the web per device type (Desktop, Mobile, Tablet). Then, we calculated the average user viewport size and aggregated the results to form a danger zone. A zone in which you can’t be sure that your elements are safe.
The final results of Above the Fold plugin are the followings:

We share our Sketch & Figma plugins for free to the community because we strive to make the design to code handoff process easier and more robust for everyone. Go and give it a try, we’d be glad to learn your feedback and your suggestions.

👉You can learn more & download the plugin on our PH page 👈

Our Spectrum community is always open to interesting suggestions and discussions by creative people like you!