You probably know that what people see "above the fold" - in the first screen visible without scrolling - on whatever page of your website they land on is going to have to do the job of drawing them deeper into the site. And if within a few seconds they don't see what they're looking for, they'll be gone.
Although when viewing your pages in your own system you may be seeing irresistible content above the fold, are you sure visitors are seeing the same?
To assume so could be a very bad assumption, depending on:
- how your site is coded
- the device on which your visitor is viewing your site
- the screen resolution of the visitor's browser
With a couple of free tools and a bit of work. you can take the guesswork out of discovering how many visitors to your site are seeing it on how big a screen, and what's visible to them above the fold.
Before you start, some things you need to know:
- You need to have a Google Analytics account that's been running long enough to produce some data.
- On a Windows PC, you need to be running Windows 7 or later for Google Chrome to work correctly.
- You need to have the latest compatible version of Google Chrome installed.
First, log in to your Google Analytics account and in the left-side menu, expand Audience, then expand Mobile and click on Overview:
That should take you to a screen like this:
Once there, click on the Secondary Dimension dropdown arrow, key "browser size" into the search field, and the green Browser Size link should pop up, like this:
Click the green Browser Size link, and the table below the graph should now display a list of all the browser sizes visitors to your site used during whatever time period you've chosen, along with (among other things) numbers of Users and average Bounce Rates for each browser size, like this:
Note the three things I've highlighted in that screencap:
Because this table may have thousands of lines, you may want to look at desktop, mobile, etc. devices one group at a time. To do that, in the search field at the top enter "desktop" or whatever, and the table will display Desktop devices only. In our example, for simplicity, I'm just going to work with the raw list, as in the screencap.
Now look at line #8: desktops with 800x600 screen resolution. What's interesting about this device/resolution combination is that the Bounce Rate is 100%. 661 people viewed a landing page on our site using a desktop device with 800x600 resolution, and every one of them clicked away without going farther into the site.
Obviously these people didn't find what they expected to find above the fold (or if they stayed long enough to scroll, below the fold either).
So: what did these people with 800x600 screen resolutions see on your landing page?
To find that out we need the Google Chrome browser running on Windows 7 or later and the Window Resizer extension developed by Ionut Botizan.
Just open Chrome, go to the Chrome Web Store and search for "window resizer":
Among the search results you should see this:
Install that extension.
Then open your website in Chrome. At top right in the Chrome toolbar you should now see the Window Resizer icon. Click on that to open it, like this:
Notice that you can click any of the preset resolutions, or use the 2 boxes at the bottom to key in any other resolution.
The above-the-fold part of the home page of our site, with 1440x900 resolution, looks like this:
There's a fair amount of interesting stuff visible there.
But then in Window Resizer, change the screen resolution to 800x600 - by keying those numbers into the 2 boxes at the bottom, as 800x600 isn't one of the presets - and see what those people with browsers set at 800x600 are seeing:
Obviously, if we want to draw people with 800x600 browser resolutions into the site, we need a redesign - maybe starting with reducing the amount of screen real estate occupied by the logo header and big photo, and putting a link to a meaningful free offer at the top of the left column.