DANGER ZONE
Above the Fold plugin for Sketch
Make sure your most important elements will be visible every time on every device. Above the Fold plugin supports Desktop, Mobile and Tablet viewports.
How It Works
We built Above the Fold plugin for the designers that want to check quickly which portion of their design will be visible in a browser window.
Gather Data
We gathered the most common viewport sizes around the web. Viewport is the area where Browsers load the web pages and >90%* is different to the user's screen size.
Aggregate dimensions
Then, we categorized the viewport sizes per device type (desktop/mobile/tablet) and aggregated them to shape each category. Also, we added the danger zone* which pinpoints a possible unsafe area.
Fit to your Artboard
Our algorithm analyzes your design by extracting artboards’ dimensions. Whilst providing you with the final results for the selected target device, it eliminates scale inconsistencies.
Viewport vs Screen
For example, let's compare the size of your current viewport to your total screen dimensions:
Embrace your process
Above the Fold plugin marks the above the fold section for all of your selected Artboards. In that way, you can be safe that your Call to Action will be visible when the page loads.
Select your Artboards
Above the Fold plugin analyze one or multiple Artboards at once. You just have to choose the Artboards you wish to test!
Choose the target device
Once you have selected your Artboard(s), the next step is to choose the appropiate device target from the plugin's panel menu.
Get back results
The analysis runs instantly and the results are visible as an extra layer on top of each Artboard. Now, you can review the visibility of your elements!
