[Web4lib] web page layout in different monitors and browsers

[Knight-Davis, Stacey L.]

Sandy,

Another possible approach is the method our site uses.  We size
everything in ems.  A javascript detects the window size and selects a
style sheet for the window size.  We set the font-size for the body to a
% in each sheet, so as an example, a window size of 800 or less gets 70%
font-size and a window 1600 and up gets 125%.  This works fairly well to
preserve a fixed layout, and the page will fit to a variety of screen
sizes without scrolling.

See the concept in action here (change your window size and reload for
full effect):
http://www.library.eiu.edu/welcome.html

In addition to a smack with a rolled up newspaper, you might also try
throwing a pda or cell phone displaying your page at the director :)

Stacey Knight-Davis
Booth Library

Eastern Illinois University
600 Lincoln Ave.
Charleston, IL  61920

217-581-7549
slknight at eiu.edu 

-----Original Message-----
From: web4lib-bounces at webjunction.org
[mailto:web4lib-bounces at webjunction.org] On Behalf Of Sandra Cahillane
Sent: Tuesday, July 03, 2007 1:29 PM
To: web4lib at webjunction.org
Subject: [Web4lib] web page layout in different monitors and browsers


Hello all,

I am having a difficult time explaining to my director why our home page
looks different in monitors with different resolutions and different
browsers.  From what I've read, the best way to work around this issue
is
by using % vs. set widths and/or styles.  I've changed our page to all
%'s
but there is still a lot of blank space in a 1280x1024 resolution
browser.

I've attached my code and would appreciate it if anyone is willing to
take
a look at it and provide me with feedback.   I need additional backup
information to convince my director that my explanation of what's going
on
is the generally accepted explanation.

(See attached file: homepage_code.txt)

Thanks,
Sandy

Sandy Cahillane
Systems and Reference Librarian
Bay Path College
Hatch Library
588 Longmeadow Street
Longmeadow, MA  01106
(413) 567-4529 or (413) 565-1376
fax-(413) 567-8345