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

[Mike Dougherty]

I was going to suggest Liquid Layout using CSS. (measure everything in em or %)  Also it might be 
more realistic to abandon the notion of pixel-perfect display of your content.  The move to 
"web2.0" is towards content separated from presentation so it can be easily repurposed.  (ex: your 
content stream goes to an RSS aggregator, a cell phone/PDA, a printer or possibly even a web 
browser - the layout of your markup is dependant on the target application)

If you're going to spend hours on the tedium of making either tactic work, the CSS design is more 
future oriented (can't call anything future 'proof')  Once you suffer the pain of making a 
cross-browser CSS design, you can be relatively sure that it will survive for a while.  If you 
have a complex javascript maintaining your page, there is a good chance that the first developer 
after you will be confused enough to just rip it out and do their own thing.  (well, at least 
that's what I'd do)  And for your own purpose, using CSS for layout/presentation will make future 
javascript more clean by keeping the presentation controls in CSS and the behavior in javascript. 
 ex:  rather than setting a dozen obj.style.property in your code, you can set obj.classname += 
'newclass' and manage the definition of newclass in the style sheet.  This also lets future 
updates to the look of the site be done by someone with no knowledge of javascript, and perhaps 
only basic knowledge of css.  (keeping them away from your javascript means there is less chance 
they can break working code)

If you are the only one doing the work from end to end, it might not seem important - but when you 
are working with others on a project it improves efficiency (to delivery date, and in debugging) 
to isolate responsibility to well encapsulated modules whenever possible.  (my $0.02)

On Sun, 5 Mar 2006 01:02:13 -0500
  Roger Roelofs <rer at datacompusa.com> wrote:
> 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
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> 
> 
> __________________________________________________________
> This message was scanned by ATX
> 1:03:16 AM ET - 3/5/2006