Kinda cool, but it doesn't work well if you have a widescreen monitor with the browser full screen & your site is center aligned.

It seems to only work if you left align all your content.

You can work around this by resizing your browser to the width you want to test at.

Right, but at that point you're just doing all the work a browser extension can do for you.

Not really, you just need to resize it to the minimum width of your site. It's easy to see.

Presumably you (the developer) have a screen much wider than your site.

This should still give you useful data about the vertical placement of elements on your page, no?

This is bad and I'll tell you why. If you do client work (ie build websites for business owners) they will occasionally get obsessed with cramming all of their content 'above-the-fold'. They key distinction is that instead of logically placing important things above the fold (and still keeping the rest), they want EVERYTHING above the fold which leads to huge compromises in design, layout and functionality.

I would love to share this data with clients but I'm not looking forward to the resulting fallout.

Anyone know of a good way to handle the client who demands their entire website be ATF?

One (arguably important) unknown here is how likely is a 640x480 user to scroll the page vs a 800x600 user.

You can point out to your client that a more real quality is user engagement -- it's not enough to just show content. This is affected by ATF, but a newpaper-like design of cramming content together may not be the best approach.

You could run some A/B testing with two different designs and show them the results.

Could try to educate your client, explain why only the most important things should be above the fold, and show him a comparison with re-explanation if needed.

I don't understand why the size lines aren't straight?

They're picking the lines at "nice" percentages, so the lines won't necessarily be straight (different widescreen ratios, etc. get combined)

Easiest way to think of it: consider the position of the bottom right corner. It can be put in any position with a resize, so the line doesn't have to be straight.

The description didn't mention taking any screen obstructions into account, so I don't think you're correct; more likely it's the effect of overlapping screen-widths and heights. I think the answer is mobile browsers and netbooks.

The bumps disappear after the 350 vertical and the 600 horizontal line, so the screens making the difference are around that size.

Some small percentage of people have narrow but tall browsers (non-iPhone mobile browsers), so that's the little bump at the bottom-left of the 99% band. And other people have very wide but short screens (netbooks), so that's the bump at the top-right of the 99% band.

And a bunch of people with a higher than 1400px width monitors see the overlay image... all over again.

Not to mention, it totally screws up with centered content.

And the mentioned irregular lines that look like it was drawn in Paint.

Disappointing...

Would be useful to know who has a mouse wheel. That definitely makes a significant difference in my perception of "the fold" when there is almost no effort involved in scrolling down.

The donation button for example would be seen by me almost 100% of the time even if off the page because scrolling down maybe 50% of the height of the window is just habit when I come to a new page to throw the heading off the top and only show the content.

I've always designed my sites to be about 1000 pixels wide so almost every computer user can see everything across the site in the horizontal direction. What is more interesting is seeing how much of the screen can be seen in the vertical direction.

But you should also consider that not everyone is surfing full screen. Sure, the screen may be 1000 pixel wide, but the browser may only be 500 pixel wide.

For me this doesn’t mean that you should cram everything into something 500 pixel wide or less – sites that are 1000 pixel wide are fine. It’s just that sites shouldn’t break if you shrink the browser window (mind the margins) and the content part of the site (body text, videos, images) shouldn’t be much wider than 500 pixel. All the navigational stuff doesn’t have to be visible all the time, but the site should remain usable. (Since there shouldn’t be many more than 100 or so characters per line, having text no more than 500 pixel wide is certainly appropriate.)

(Luckily horizontal scrolling is a breeze on any current Mac which also happen to be running the OS on which running a browser not full screen is pretty likely.)

I totally agree with you. I always test layouts to make sure that they don't break when the browser window is less than 1000 pixels wide.

I use a Mac so horizontal scrolling is easy. Still I try to avoid it in my sites since most of my target audience uses Windows or other OS's.

Ouch, I hope by about 1000 you actually mean under 974. You're losing another 10% of your audience to gain 26 pixels if you design for 1000.

It's incredible how quickly the userbase drops from 974 to 1050... 10% of users see a horizontal scroll at 974 then it climbs to 50% once you get over 1050... Hope those extra 76 pixels are worth it for anyone designing sites that wide.

Pages that are centered and expand horizontally to fit don't work well with this. Eg: google web page. Apparently not everyone can see all of the search bar when I maximize but when I make the window smaller almost everyone can.

Now that everything has died down ...

This seems to be a good spot to quietly mention a project I worked on for a client recently. It's the standard photo gallery fare, etc. -- but their primary complaint was that it didn't look right at different screen resolutions.

I integrated two different frameworks I've built and developed a website that always adjusts to the user's browser window size. Check it out! http://messersmith-homes.com/landhomes/bigoak

I'm currently quietly adding features and polish to the two frameworks involved.

Good analysis. I think they should qualify it by content. A non-ad-driven site like "donate" should have the button on the top and the supporting argument below. A ad-driven site like the file sharing sites should have the button on the bottom so ads are at least scanned on your way to ther bottom.

I wonder how long it will be before they offer this data with stats specific to your site (via Analytics). I'm curious how widely this data varies based on user population.

the example implies that a donate button below the fold is a big barrier to conversion but recent studies seem to indicate it is not - certainly not worth designing for <750x300.

could you provide links to those studies? thanks!

Like it! Great tool for testing UI and scrollbars.

A VM + changing the display settings does not provide you with the same information.

This lets you see, at a glance, how likely it is that the each component on a page will be visible without scrolling.

To be fair, this does combine in stats (X% of users...)

Not just that - Google.com stats.. They would have to be some of the most valuable stats in terms of getting an unbiased sample of the general population.

Well, yes and no. Unclear what countries, languages, etc. they are including in here. Your site's audience may in fact not represent the general population, so you could be optimizing for the wrong group.

It would be helpful to be able to see these %age borders for just US surfers, for example, or from US daytime usage vs. nightime, or even IPs resolving to corporate vs. non corporate (poor attempt at separating at work from at home usage). This way you could optimize for your intended audience instead of the general populace, few of whom might be your paying customers.

Wouldn't the most pertinent stats actually be your own stats from your own analytics?