Forum Moderators: open
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?
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.
<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;
}
setResolution();
</script>
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]
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:
sw..76-85%..86-95%..96-100%..total
800......0.......3.......10.....13
1024.....1.......5.......20.....25
1280....13.......8.......15.....36
As for viewportHeight (the fold), I'm now simply counting the absolute values. That way the average and modal values can be determined.
It discusses how the "fold" really doesn't matter in web design today. It's an interesting read.
The next great frontier in web page design has to be bottom of the page. You’ve 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...
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?
[webmasterworld.com...]
Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s very clear that the rest of the page can be just as valuable – perhaps more valuable – to contextual advertising. Personally, I’d 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 we’ve got them there, why not give them something to do next? Something contextual, a natural next step in your site.
Again, emphasis mine.
Would that be the right approach?
We're doing something like this in 30px increments...
Viewport Width
100¦130¦160¦190¦220¦250¦280¦310¦340¦370¦400¦...
Viewport Height
100¦130¦160¦190¦220¦250¦280¦310¦340¦370¦400¦...
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.
...mostly webmasters / people in our industry with all the toolbars...
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.
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.
I log:
screen.width+'x'+screen.height
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.
The article rightfully points out that users do know how to scroll.
thanks to the implementation of scroll wheels on the mouse.
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.
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.
Scrollwheel was the best stepforward for the mouse and websites!
Agreed!
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
[webmasterworld.com...]
SOC - Source Ordered Content
[webmasterworld.com...]
And two other topics that are a bit older but also come into the equation...
Inverted Pyramid Writing
[webmasterworld.com...]
How Do Search Engine Robots Work?
[webmasterworld.com...]
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.
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.
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.
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?
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?
Ok over the last week these are some of my figures a bit ruff at the moment but I’ll 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, I’ve 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?
Vimes.
