tech.gate.io blog

For Web designers, it's important to know which screen and browser windows sizes the Web site's visitors use because a new design should be optimised in these ways:
1. existing space should be utilised as good as possible
2. horizontal scrolling should be avoided because it's very annoying for users

To get an idea of your users' settings, you can use the AWStats log analysing tool. It's free and generates graphical access statistics for your Web site. It comes with a JavaScript (awstats_misc_tracker.js) that you can embed on your site and when a user visits the site, some properties of his/her browser are reported to the logs in a form like this:

www.gimpusers.com xxx.xxx.xxx.xxx - - [14/Feb/2010:06:38:20 +0100] "GET /js/awstats_misc_tracker.js?screen=1280x800&win=1263x616&cdi=24&java=true&shk=n&svg=n&fla=y&rp=n&mov=y&wma=y&pdf=y&uid=awsuser_id1266125900481r8004&sid=awssession_id1266125900481r8004 HTTP/1.1" 200 2676 "http://www.gimpusers.com/forums/gimp-docs/10734-print-version-of-Gimp-Manual-pdf.html" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6" (35)

 
As you can see, this user had a 1280x800 screen resolution and the (useable) browser size was 1263x616. Sadly, the graphical report of AWStats is only able to report the screen resolutions but not the window sizes although the window sizes are more interesting (we don't expect our users to resize their browser window for our Web site).

To extract information about the window size probability distribution, we'll use R (http://www.r-project.org, or for Debian/Ubuntu, there's a package "r-recommended"), a free software environment for statistical computing and graphics. First, we have to prepare our log files and extract the AWStats lines:

awk -- '/&win=[[:digit:]]+x[[:digit:]]+/ { print $0; }' /var/log/apache2/access-gimpusers.log >raw

 
All lines containing &win=AAxBB will be printed to "raw".

Then we create two files with the window and screen widths:

awk -- '{ match($0, /\?screen=([[:digit:]]+)x[[:digit:]]+/, a); print a[1]; }' raw >screen
awk -- '{ match($0, /\&win=([[:digit:]]+)x[[:digit:]]+/, a); print a[1]; }' raw >win

 
Now we can start R and load the values:

$ R
> screen <- scan('screen')
Read 20914 items
> win <- scan('win')
Read 20914 items

 
Let's get a summary:

> summary(win)
   Min. 1st Qu.  Median    Mean 3rd Qu.    Max. 
      1    1027    1263    1258    1358    2545

 
So we can expect our uses to have a window width of about 1258 and 50% of our users have a browser width in the range 1,1263.

For a better view, we can plot a histogram:

> hist(win)

or the distribution function F:

> plot(ecdf(win),do.points=FALSE,verticals=TRUE)

or the density function:

> plot(density(win))

We can see peaks at the default resolutions.

If we want to know which resolution we can choose so that a part x of our users will have to scroll, we have to look
at the x-quantile of the win distribution:

> quantile(win)
  0%  25%  50%  75% 100% 
   1 1027 1263 1358 2545 
> quantile(win,.1)
 10% 
1000 
> quantile(win,.2)
 20% 
1007 
> quantile(win,.3)
 30% 
1127 
> quantile(win,.4)
 40% 
1255

 
So 10% will have to scroll horizontally if we choose a site width of 1000, 20% for 1007, 30% for 1127 and 40% for 1255. If we design
for 1024 px screen size, i.e. about 990 px Web site width, only 10% our users will have to scroll. However, if we design for 1127 px
site width, 30% of the users will have to scroll.

However, this can't be only aspect that is taken into consideration because maybe it's more important to pack content onto the page
or to optimise it for larger screens (and window sizes). This is up to you, but the statistical analysis gives you a hint.

At the end, we can determine the correlation (by Pearson) between window and browser sizes:

> cor(win,screen)
[1] 0.1900401

=> The linear (!) correlation factor between window and browser size is 19%, that means there is no good linear correlation (in
the form window size = A * browser size + . So I think that most people don't work in full-screen mode, because in full-screen mode,
window size = browser size + B (so it would be linear).