homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Browser Viewport Statistics
Why don't we have them?

 6:17 am on Sep 7, 2007 (gmt 0)

After Brett's recent topic about Wide Screen Displays Change Web Page Design? [webmasterworld.com], a view things came to light that we really do not discuss in great depth around here.

Browser Viewport Statistics

What is the Browser Viewport? In short, it is the "actual size" of the window that the page is occupying minus toolbars and other viewport real estate (the inner window dimensions). For example, my resolution is 1366x768. I have an available view of 1366x738 as there are 30 pixels of tools up there. ;) But, I have my browser minimized and my actual Browser Viewport is 1070x470. Wow, that fold just got a whole lot smaller, huh? We went from 768 to 738 and then to 470. Those are very interesting statistics, wouldn't you say so?

I've had my programming team implement some JavaScript tracking on various high traffic pages. We are now going to track the following browser statistics and really see what our audience is seeing.

Resolution: 1366w x 768h
Available: 1366w x 738h
Viewport: 1070w x 470h

Based on my research on Browser Viewport Stats, they really don't exist in any large numbers. There are a few who have done exactly what I just started and they've reported their numbers. We have a much larger community here and I'm sure we could get some fairly accurate stats in a short period of time.

Does your analytics program show you "viewport" sizes?

I say we define what "the fold" is in 2007/2008. Is it 500px? 600px? What is the average fold? Where does it all end? Remember, statistics show that it all takes place Above the Fold.

What's in your Fold?



 9:47 am on Sep 7, 2007 (gmt 0)

Great idea, p1r! I've now started gathering data on viewport width and height. I'm storing them in separate tables as the number of possible combinations is close to infinite.

Unfortunately my js counter script seems to be cached all over the planet, so I'll need to wait a while before any significant numbers will be available.


 2:58 pm on Sep 7, 2007 (gmt 0)

It was RonPK who got me started with all of this after he posted a bit of JavaScript to capture viewport data. We've since expanded that little snippet of JS and it now looks like this. RonPK, see anything out of order here?

<script type="text/javascript">
function setResolution() {
if (self.innerWidth) {
vpw = self.innerWidth;
vph = self.innerHeight;
} else if (document.documentElement&&document.documentElement.clientWidth) {
vpw = document.documentElement.clientWidth;
vph = document.documentElement.clientHeight;
} else {
vpw = document.body.clientWidth;
vph = document.body.clientHeight;

document.frmURI.clientWidth.value = vpw;
document.frmURI.clientHeight.value = vph;
document.frmURI.availWidth.value = screen.availWidth;
document.frmURI.availHeight.value = screen.availHeight;
document.frmURI.screenWidth.value = screen.width;
document.frmURI.screenHeight.value = screen.height;

Based on the statistics I'm looking at right now, everything appears to be in order.

[edited by: jatar_k at 6:39 pm (utc) on Sep. 7, 2007]
[edit reason] simplify code [/edit]


 4:17 pm on Sep 7, 2007 (gmt 0)

<blush>Too much honour, really...</blush>

The script looks fine to me.

I'm now storing viewportWidth as a percentage of screenWidth, so that I get a database table that basically looks like this:


Would that be the right approach?

As for viewportHeight (the fold), I'm now simply counting the absolute values. That way the average and modal values can be determined.


 4:28 pm on Sep 7, 2007 (gmt 0)

As a point of interest, I would recommend reading this article:

It discusses how the "fold" really doesn't matter in web design today. It's an interesting read.


 5:26 pm on Sep 7, 2007 (gmt 0)

Thanks for the link, Fotiman! The article rightfully points out that users do know how to scroll.

The next great frontier in web page design has to be bottom of the page. Youve done your job and the user scrolled all the way to the bottom of the page because they were so engaged with your content. Now what?

Somewhat off-topic in this thread, but this just spoiled my weekend as many of my pages have almost empty bottoms...


 4:25 pm on Sep 8, 2007 (gmt 0)

Fotiman, that is a very good article, thank you!

When does the fold matter?

The most basic rule of thumb is that for every site the user should be able to understand what your site is about by the information presented to them above the fold. If they have to scroll to even discover what the site is, its success is unlikely.

Emphasis mine.

Inverted Pyramid Writing
What is it and how does it influence a site's relevance?

Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But its very clear that the rest of the page can be just as valuable perhaps more valuable to contextual advertising. Personally, Id want my ad to be right at the bottom of the TMZ page, forget the top.

That's one wise advertiser. I would think that once you've compelled the user to scroll below the fold, advertisers are more likely to be noticed and visited since they are now outside of those "blind zones".

And to finish off the quote that RonPK referenced...

Now what? Is a footer really all we can offer them? If we know weve got them there, why not give them something to do next? Something contextual, a natural next step in your site.

Again, emphasis mine.


 5:50 pm on Sep 8, 2007 (gmt 0)

Would that be the right approach?

We're doing something like this in 30px increments...

Viewport Width

Viewport Height


 6:30 pm on Sep 8, 2007 (gmt 0)

REALLY key! Toolbars and crap eat away screen real estate however I feel it's mostly webmasters / people in our industry with all the toolbars...


 6:49 pm on Sep 8, 2007 (gmt 0)

Anyone have viewport stats that they are willing to share by now?

Both width and height would be useful, but I agree with pageone - I'd love to define where the fold falls today, if we can. I wish I had a server I could modify right now to collect my own data. I'm guessing that there would be at least two data peaks. One big quess for me is how many people are running their browser but not maximizing it.

I feel it's mostly webmasters / people in our industry with all the toolbars...

Guilty as charged - in Firefox. But my regular browser is Opera and I have it customized to one of the biggest viewports I can create. Text labels only, no images, and just a lean personal bar, tab bar and address bar. The status bar is set only to display "as needed" and at the bottom.


 7:54 pm on Sep 8, 2007 (gmt 0)

...mostly webmasters / people in our industry with all the toolbars...

Not so! I think many new computers come bundled with toolbars installed (a bit like Brett's example that started this discussion). I've been helping my neighbor setup his new laptop, just arrived from Dell with Google tool bar installed, and Google's desk top thingy too. I don't like all that pre-installed crap so I didn't take a lot of notice, but this stuff is on the non-techy computers too.


 8:48 pm on Sep 8, 2007 (gmt 0)

Well, I missed the discussion on wide screens since I'm not a contributing member (one of these days...) but I'll throw my 2cents in on that - I doubt wide screens matter, because I don't think there's any reason to believe that users will either maximize their browser window or scale it to the same proportions as the screen.

Indeed, I think my OWN tendency, the wider the screen goes, is to make the browser window a bit NARROWER, because on a wide-screen, there is now sufficient space to show another application, screen icons, etc.

On the current topic, I would be interested to know if these statistics confirm my suspicion that

(1) the majority of browser users who do not maximize their browser window prefer a "vertical" aspect ratio, regardless of physical screen width.

(2) wide-screen users are more likely to not maximize their browser window than 4:3 monitor users.

I think we are used to doing most reading in a "portrait" aspect ratio - correspondence paper, books, newspapers, etc. all use this format, and so it is going to be natural for people to choose this format for their browser.


 9:06 pm on Sep 8, 2007 (gmt 0)

This will be fascinating data - I've become increasingly aware of the shrinking fold since I switched to a widescreen laptop.

I do think regular users see height reduction due to toolbars and un-optimized browser control bars. I helped a novice user get connected to wireless in a coffee shop yesterday, and I was surprised that her browser looked more crowded than mine. I'm sure it was all auto-installed stuff.


 11:14 pm on Sep 8, 2007 (gmt 0)

I've been doing this for a couple of months now, and it appears that more and more people a browsing with sidebars and with the browser's window not maximized.

I log:
screen.availWidth+'x'+screen.availHeight (1)
window.outerWidth+'x'+window.outerHeight (2)
window.innerWidth+'x'+window.innerHeight (3)

and since IE doesn't have (2)(3), I'm logging this instead:
document.documentElement.scrollWidth+'x'+document.documentElement.scrollHeight (4)

with (3) or (4) I can see when a user opens a second tab (or a sidebar) and keeps browsing the site.
with (2) I see if a visitor has decided to maximize the window, or has changed it's shape.


 5:09 am on Sep 9, 2007 (gmt 0)

The article rightfully points out that users do know how to scroll.

thanks to the implementation of scroll wheels on the mouse.


 7:09 am on Sep 9, 2007 (gmt 0)

Scrollwheel was the best stepforward for the mouse and websites!

Also any user who has ever spent time in a forum knows how to scroll.

I think the confusion lies in the typical AOL user being the one most likely to click web ads and they rarely like to scroll, not that they don't know how to do it, but it breaks their concentration.

So be honest, viewport size is only important for ad revenue, not for website design in itself.


 11:03 am on Sep 9, 2007 (gmt 0)

I've been helping my neighbor setup his new laptop, just arrived from Dell with Google tool bar installed, and Google's desk top thingy too.

A recently purchased Gateway laptop also had the Google toolbar/desktop installed.


 2:46 pm on Sep 9, 2007 (gmt 0)

Scrollwheel was the best stepforward for the mouse and websites!


So be honest, viewport size is only important for ad revenue, not for website design in itself.

Ah, but therein lies a problem. Its not just "what you see" that is in the Browser Viewport. Here are a few recent topics that all tie in with this...

Developing Effective META Description Elements

SOC - Source Ordered Content

And two other topics that are a bit older but also come into the equation...

Inverted Pyramid Writing

How Do Search Engine Robots Work?

Now, back to these Browser Viewport Statistics. Why don't we have them? Is it because the amount of data to capture is a bit much? Why don't the analytics programs out there offer this type of granular data? What gives?

Here we've been discussing screen resolutions when the fact of the matter is that is the wrong metric. Especially if it dictates website design. Screen Resolution as a metric should be deprecated. I'm guilty of using it myself as that was what the topics are usually centered around. Can anyone give me a good reason why we haven't been focused on the viewport instead?

In regards to capturing data, we also put in an onload event to make sure we capture the true viewport size in addition to their settings on first visit to the page.

<added> I do see that some analytics programs track browser width and height. Most popular browser width for 2007 August? 1000-1499. Most popular browser height for 2007 August? 550-599 with 600-649 not far behind. Also nipping at that second popular height spot is 800-899.


 5:51 pm on Sep 9, 2007 (gmt 0)

This was a topic of discussion (in European design blogs) about a year ago. As a result Thomas Baekdal did a reasonable multi-site study and published his findings.

Finally we can see what sizes we need to design for. E.g. if you want to design for 95% of your visitors you need design for no more than 776x424px (fixed layout) - or between 720x400px to 1408x912px (fluid layouts).

We know that visitors OS, monitor size, and browser version vary widely by niche. As do open sidebars, toolbars, etc. I strongly recommend that concerned webmasters develop and run a site viewport analysis on a recurring basis, i.e. for the same month each year - it doesn't need to be continual, simply able to notice significant change. Certainly a potential competitive design to conversion advantage.


 6:36 pm on Sep 9, 2007 (gmt 0)

The past year has been rather remarkable in the growth of wider screen layouts on the web - many major corporations are now ignoring the viewport sizes that are limited by the old 800x600 resulution. So the question for each site owner is not if, but WHEN it's time to make your basic layout wider, and to design assuming the fold will fall further down the page.

Running a collection script for viewport sizes on a regular schedule makes good sense. It's interesting how static the numbers for 1024x768 resolution have been at W3Schools [w3schools.com]:

= 1024x768 =
Jan 07 - 54%
Jul 06 - 58%
Jan 06 - 57%
Jul 05 - 55%
Jan 05 - 53%
Jul 04 - 50%

The more rapid changes happened with the decline of the 800x600 and the rise of larger screen resolutions - but 1024 is in the same range as it was 2 years ago. I like their scheme of measuring every 6 months - a full year seems to be a bit too long, IMO. So for viewport stats, I'm also recommending every 6 months to clients.


 12:24 am on Sep 11, 2007 (gmt 0)

Great idea, but just one little emperor's new clothes comment:

How do I know what's above the fold if I don't know what size text (or what zoom level on everything for Opera) the user has the browser set to? It would work for images in IE and FF (so almost all visitors), but how well does it work for text?


 1:11 am on Sep 11, 2007 (gmt 0)

You're right to ask, ergophobe. In fact, the idea of "the fold" is extremely fuzzy. The link that Fotiman has in his earlier post in this thread is a very good article about exactly this point.


 4:20 am on Sep 12, 2007 (gmt 0)

Hey, it's great that we can even compile statistics for this stuff at least to the extent currently possible.

But in my mind, one of the biggest pieces of information missing, I mean totally unavailable, is the actual physical size of the user's monitor.

I can get an idea of it's shape based on resolution but I can't distinguish between a smallish widescreen laptop monitor and the monster widescreen that my wife is currently using at home.
(I still prefer the old-style ratio.)

Why, after all this time with plug-and-play and all, can't we know the physical dimensions of the monitor?

IE will tell you if the user has enabled font smoothing (ClearType) but not this.

Anybody else feel the same way?


 5:04 am on Sep 26, 2007 (gmt 0)


Ok over the last week these are some of my figures a bit ruff at the moment but Ill add to these once a month has been completed:

My site has a moderate amount of unique visitors a day and the script was placed on the most frequently viewed pages, Ive not completed the full break down as of yet but this might help others:

Screen Res/ Percentage
800 * 600 6%
1024 * 768 54%
1024+ 40%

Window Opened:
< 1000 29%
> 1000 71%

Anyone esle see this sort of divide?


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved