[Javascript] How to create a web page that fits screens ofallsizes via all

[Roger Roelofs]

Troy (and list),

On Mar 4, 2006, at 8:22 PM, Troy III Ajnej wrote:

> I guess that the point you were missing was the casse where all 
> elements of the page created to be viewed on f.i. 1600x1200px monitor 
> should perfectly fit in other lower/higher resolution monitors as 
> well. All the gaphics paragraphs etc. At 1920x1440 or higher, the text 
> size might become to small for reading and other elemends will tend to 
> sllip in to fill empty space where not desired, etc., so the wholle 
> layout will suffer. ...

The first question is really what does 'all' mean.  what about cell 
phones?  What about browsers with css or javascript, or images turned 
off?  Anytime we do site design, we have to find out what our users 
browse with and take that into account.  There has never been, and 
never will be a 'one size fits all' solution.  The best we can do is 
build in flexibility.

If you have a css standards compliant browser you can do all this with 
no javascript.  Even in ie/win you can get 90% of the way there.  I 
particularly like the percentage solution because it already takes the 
window width and height into consideration.  If you are worried about 
window size vs font size, you can set min and max widths in ems to 
constrain line lengths.  Keep in mind that in css you can size anything 
(image, paragraph, flash object, etc) in percentages to get size 
relative to the parent (and eventually the window), or in ems to keep 
the elements size constant relative to the users' chosen font size.

I realize that different screens have different dpi settings.  But if I 
size all my text relative to the browsers default font-size setting, 
the font should be a comfortable size no matter what dpi the user has.  
Since, there is no correlation between screen size, dpi, and browser 
window width/height, I can't reliably set the font size for the user 
based on any data available in javascript.  When you throw in users 
with multiple, different sized, monitors and those 'pivotable' ones, 
things get even wierder.

I can easily imagine using javascript to switch to higher-rez graphics 
on larger window sizes so the graphic elements will look better.  The 
size of the graphic can still be set in css, but you would need a bit 
of javascript to change the image src, or add a class to an element so 
it pulls in the higher resolution image file.  Even this is problematic 
because there isn't a correlation between screen/window size and 
available bandwidth.  Everything's a trade-off I guess.

Digression:  If you want different layouts based on user window width, 
you can easily do that by having javascript set a class on the body 
element after sniffing the window width/height.  Media queries would 
also work when support for them gets built in to more browsers.  Also, 
since I'm in future watch mode, CSS3 allows for scaling background 
images.  If you are interested in what can be done with css, and can 
stand yet another mailing list, wander over to css-discuss.org and 
check out the archives, or join the list.

As you've probably guessed by now, my standard operating procedure is 
to use css for presentational stuff as much as possible with some 
javascript to provide a helping hand where necessary.  That gives 
javascript disabled users a good experience, and javascript enabled 
ones an even better one.

-- 
Roger Roelofs
Datacomp Appraisal Services