Andrew Pollack's Blog

Technology, Family, Entertainment, Politics, and Random Noise

Designing your web site for YOUR target browsers - Not just "global" standards

By Andrew Pollack on 10/30/2007 at 08:34 AM EDT

Second Signal's web site has been the focus of a great deal of my time recently. I'd love to use all that screen real estate on the right side that my laptop's wide screen shows, but before even attempting that I needed to understand what other people would see.

There are lots of sites out there declaring that most people are using 1280x1024 screens now that LCD panels have been standardizing on that at 17" for so long. Other sites say the majority are 1024x768 still. Pretty much nobody is running at 800x600 other than the special cases for visually impaired or mobile browsers.

I decided to do my own mini-survey to see what the people browsing MY site were using. To do that, I used (blatantly copied from a demo) the following code:
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
	//Non-IE
    	myWidth = window.innerWidth;
    	myHeight = window.innerHeight;
  } else if( document.documentElement 
		&& ( document.documentElement.clientWidth
		 || document.documentElement.clientHeight ) ) {
  	//IE 6+ in 'standards compliant mode'
  	myWidth = document.documentElement.clientWidth;
  	myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth 
		|| document.body.clientHeight ) ) {
  	//IE 4 compatible
  	myWidth = document.body.clientWidth;
  	myHeight = document.body.clientHeight;
  }
document.getElementById('screenwidthpoll').innerHTML = 
		"<img style='visibility:hidden' 
		src='/xxxxx/xxxx.nsf/onepixel.gif?open&screen=" + 
		myWidth  +  "x" +  myHeight  + "'>";


This works with a small "<div>" element with an id of "screenwidthpoll" on the page and causes the browser to download an image using the following relative URL:

"/path/database/fileresource.gif?open&screen=0000x0000"

I can then parse that in the logs and get pretty good statistics. The numbers aren't exact because I'm measuring "useable screen" rather than native, so depending on the width of scrollbars and things it varies. I'm compensating by rounding down (dropping the least significant digits) to the nearest 100 pixels and categorizing on the result.

So what am I seeing? 44% of browsers to my site have a useable screen width on the browser page of about 1000 pixels. 46% of browsers to my site have a useable screen width of about 1200 pixels. More interesting is that if you draw a dividing line at 1000 pixels, exactly 50% of browsers have 1000 or fewer and exactly 50% have more than 1000.

Unfortunately, content made for 1024x768 monitors looks terrible if you just allow it to expand all the way out past a certain point. My laptop natively wants some crazy number like 1920x1280 but I can't even read that on a 15" screen. I've set it to 1440x900. At that width, the page would look terrible. Since the css value for "Max-Width" doesn't work well across browsers, you have to do some nasty javascript hacking to allow an expandable area that stops at a specific limit. You can do it in Domino though (or PHP) by sensing the browser as you're rendering and keeping their width in a cookie. If you know they're using a wide browser and you know their browser version you could change the "width" attribute as you're rendering a page.

Until then, the smart money says you've got just under 1000 pixels of width to design for.

Note: For a good generalized poll of browser widths, take a look at these two links:


There are  - loading -  comments....

Ironically, or was it deliberately?By Rob McDonagh on 10/30/2007 at 09:34 AM EDT
...this post scrolls off my screen to the right. Heh.

Seriously, though, we (internally) still have people at 800x600. Granted,
that's hardly normal. But yeah, know your customers and don't assume
"everybody" has 19" LCDs.

Try running iNotes 7 or 8 at 800x600, by the way. The message subject shrinks
to an unusable length (and doesn't wrap, just cuts off). I've had a
conversation about that with some people at IBM. They were very surprised to
learn that there were people out there without 10x7 as a minimum resolution.
LOL. Yeah, this blog design doesn't get the attention...By Andrew Pollack on 10/30/2007 at 01:11 PM EDT
that the second signal website does.
Google Analytics reports on resolutionsBy Tim Tripcony on 10/30/2007 at 09:47 AM EDT
According to Google Analytics, here's the top five resolutions of visitors to
my site:

1280x1024: 31.31%
1024x768: 22.9%
1280x800: 7.93%
1400x1050: 7.74%
1680x1050: 7.24%

800x600 comes in 12th with 1.35%, and is the smallest resolution with more than
one page view in the last month. The range this month was 640x480 - 2560x1600,
but for the whole year, the range has been from 320x240 to a whopping
6400x5120.
re: Designing your web site for YOUR target browsers - Not just "global" standardsBy Nathan T. Freeman on 10/30/2007 at 10:50 AM EDT
Of course, since you guys are all looking at SCREEN res, rather than actual
client window space, you're designing for a standard browser that's maximized
and has no add-ons that take left/right or top screen real estate.

Which is why your design should always be fluid, preferably shrinking
coherently to 320x240 -- which is the kind of space you get on a Blackberry.


Other Recent Stories...

  1. 05/05/2016Is the growing social-sourced economy the modern back door into socialism?Is the growing social-sourced economy the modern back door into socialism? I read a really insightful post a couple of days ago that suggested the use of social network funding sites like “Go Fund Me” and “Kickstarter” have come about and gained popularity in part because the existing economy in no longer serving its purpose for anyone who isn’t already wealthy. Have the traditional ways to get new ventures funded become closed to all but a few who aren’t already connected to them and so onerous as to make ...... 
  2. 04/20/2016Want to be whitelisted? Here are some sensible rules for web site advertisingAn increasing number of websites are now detecting when users have ad-blocking enabled, and refuse to show content unless you "whitelist" their site (disable your ad-blocking for them). I think that is a fair decision on their part, it's how they pay for the site. However, if you want me (and many others) to white list your site, there are some rules you should follow. If you violate these rules, I won't whitelist your site, I'll just find content elsewhere. 1. The total space taken up by advertisements ...... 
  3. 12/30/2015Fantastic new series on Syfy called “The Expanse” – for people who love traditional science fiction[] “The Expanse” is a new science fiction series being broadcast onthe Syfy channelthis winter. It’s closely based on a series of books by author James S. A. Corey beginning with “Leviathan Wakes”. There are 5 books in the “Expanse” series so far. If you’re a fan of the novels you’ll appreciate how closely the books are followed.TIP: The first five episodes are already available on Syfy.com. If you’re having trouble getting into the characters and plot, use those to get up to speed.The worlds created for ...... 
  4. 10/20/2015My suggestion is to stay away from PayAnywhere(dot)com  
  5. 08/07/2015Here is one for you VMWARE gurus - particularly if you run ESXi without fancy drive arrays 
  6. 08/06/2015The Killer of Orphans (Orphan Documents) 
  7. 06/02/2015Homeopathic Marketing: Traveler on my Android is now calling itself VERSE. Allow me to translate that for the IBM Notes community... 
  8. 03/17/2015A review of British Airways Premium Economy Service – How to destroy customer goodwill all at once 
  9. 02/26/2015There's a bug in how @TextToTime() and @ToTime() process date strings related to international standards and browser settings. 
  10. 01/21/2015Delivering two new presentations at Developer Camp (EntwicklerCamp) 2015 in Germany 
Click here for more articles.....


pen icon Comment Entry
Subject
Your Name
Homepage
*Your Email
* Your email address is required, but not displayed.
 
Your thoughts....
 
Remember Me  

Please wait while your document is saved.