> -----Original Message-----
> From: Matthew Friedman [mailto:[EMAIL PROTECTED]
> Sent: Wednesday, April 30, 2008 4:28 PM
> To: CF-Talk
> Subject: OT - Size of a chromed out window
>
> Quick question.
>
> With LCD, CRT and laptops what would a safe maximum pixel width size of
> a chromed window for it to be viewed with out a horizontal scrolling
> bar.
Basically there is really no "safe" value - when you lock your design
SOMEBODY will get sub-optimal results (either too-wide for their tastes or
too thin).
The old rule of thumb was that browser/OS chrome was 22px wide and up to
170px tall. But this is nothing more than (semi) educated guess almost
completely based on IE on XP conventions.
Other browsers and other OSes will result in totally different numbers. It
also makes the (very wrong) assumption that people always browse with the
browser-window maximized (larger screen users rarely do).
There are other issues as well:
+) Browser themselves are chewing up more and more space: Explorer bars,
side bars and other "helpers" are present in every major browser.
+) OSes are chewing up more and more space. The 3D chrome in Vista and OSX
is pretty, but larger than the flat chrome of previous versions. Gadgets,
sidebars and more advanced taskbar/dockers are bigger.
+) Malware is rampant and eats up even more. Crappy toolbars (many
installed by ISPs themselves) and browser extensions are nearly useless at
everything but eating up screen space. But what it really means is that you
get different sizes from "IE" than you do from "AT&T Roadrunner IE".
With all that said the best you can do is guess well and watch.
>From almost all the evidence out there you can be "pretty safe" (perhaps 80%
of visitors will be "happy") with something like 1000px wide or less. I'd
say 960px because it provides good grid options (it's divisible by
2,3,4,5,6,8,10 and 12) and, for most people, offers a little white space and
some room for off situations ("large widget" themes and so on). But that's
only a blind shot in the dark.
You can greatly improve this by:
1) NOT creating a fixed layout. Yes it's harder, no it's not perfect and
yes you'll need to compromise. But in the end you'll have a page that works
on nearly every system (there will always be a practical minimum to most
designs) and work REALLY WELL on a RANGE of systems. It's not that hard to
make a liquid site that looks great on 98% of practical resolutions.
2) Make metrics and audience understanding a priority. Even if you go with
a fixed layout make sure to track, with as much detail as possible, what
you're users are actually doing. Even better (if possible) do surveys
before designing. But keep track of the data and plan changes accordingly.
Perhaps your site is more technical in nature and your visitors generally
have bigger screens? Perhaps your site is aimed at seniors and you have to
deal with the combined killers of small screens and increased font sizes?
Maybe your site is popular amongst mobile users and you have to deal with a
more than average number of tiny screens?
My "PanelManager" can be used to obtain Window and Canvas sizes but it's
overkill for just that. The two functions of use are (these have been
tested in IE, Firefox and Opera and I've been told that they work in
Safari):
// Gets the current browser size (the size of the viewable window)
getWindowSize = function() {
var WindowHeight, WindowWidth;
var doc = document;
if ( typeof window.innerWidth != 'undefined' ) {
WindowHeight = window.innerHeight;
WindowWidth = window.innerWidth;
} else {
if ( doc.documentElement && typeof
doc.documentElement.clientWidth != 'undefined' &&
doc.documentElement.clientWidth != 0 ) {
WindowHeight = doc.documentElement.clientHeight;
WindowWidth = doc.documentElement.clientWidth;
} else {
if ( doc.body && typeof doc.body.clientWidth !=
'undefined' ) {
WindowHeight = doc.body.clientHeight
WindowWidth = doc.body.clientWidth
};
};
};
// Return a Height, Width array
return [WindowHeight, WindowWidth]
};
// Gets the current canvas size
getCanvasSize = function() {
var CanvasHeight, CanvasWidth;
var doc = document;
var WindowSize = this.getWindowSize();
CanvasHeight = doc.documentElement.scrollHeight
CanvasWidth = doc.documentElement.scrollWidth -
(doc.documentElement.scrollWidth - WindowSize[1]);
// Adjust Height in IE to match Opera and Firefox
if ( doc.documentElement.scrollHeight < WindowSize[0] ) {
CanvasHeight = WindowSize[0];
};
// Return a Height, Width array
return [CanvasHeight, CanvasWidth]
};
You can collect this information and track it. I've got old code (that still
works) that tracks basic resolution data (SOMEDAY I'll update it):
http://www.depressedpress.com/Content/Development/ColdFusion/Articles/GetRes
/Index.cfm
Adding the above functions to it should give you some useful information to
work with. I suggest storing it in a database (or parseable log file) and
tagging it with a date. I actually link this data to complete click streams
(pages viewed), browser information and other data... now if only I had a
website that got enough traffic to do something useful with it. ;^)
Jim Davis
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:304558
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
