[Web4lib] web page layout in different monitors and browsers

[Marc Bertone]

Sandra,

What we do on our site is kind of a mix of the two...our header is set to
always using 100% of the page and then the content is centered in the middle
with a fixed width (860px).  This way people with wide screens still have a
nice header that spans the top of the page, but they aren't stuck panning
left-to-right across a huge amount of text.

Here is a page on our site that kind of shows this example:
http://springshare.com/libguides.  FYI, most of the code to handle the
layout is included in our CSS file which is located at
http://springshare.com/springstyle.css.  My personal approach now is to code
for people using browsers set at 1024 pixels wide.  1024px is right in the
middle of what people are using (800px low end, 1280/1600 high end) so I
think it's a pretty safe bet.

So in your case, it looks like you are going to most likely have just the
"content" section with no banner that needs to span all the way across the
page.  My recommendation to you would be to get away from the table layout
if possible, and look to setup the same layout in DIVs and CSS.  That way if
you do find down the line that a certain browser is really having problems,
you can adjust one CSS include and your entire site will be updated.  Also,
using CSS you can actually adjust the design depending on the browser being
used so that minor layout problems can be addressed in just the one CSS
file.

Based on the HTML you provided, I think a set-width center-aligned DIV would
be the best approach.  The second best approach would be a set-width
center-aligned table, and in that case you could also use CSS to make the
table more "updatable" in the future.

Let me know if you have any questions or need any other assistance!

-Marc


-----Original Message-----
From: web4lib-bounces at webjunction.org
[mailto:web4lib-bounces at webjunction.org] On Behalf Of Thomas Dowling
Sent: Tuesday, July 03, 2007 12:52 PM
To: web4lib at webjunction.org
Subject: Re: [Web4lib] web page layout in different monitors and browsers

On 7/3/2007 3:22 PM, Thomas Dowling wrote:

> 
> On 7/3/2007 2:28 PM, Sandra Cahillane wrote:
> 
>> ...there is still a lot of blank space in a 1280x1024 resolution browser.
> 
> You should see it at 1920x1440.  :-)
> 

Since this is something the list churns through every so often, I thought
I'd throw out what little hard data I have about our users'
current display environments.  From a current snapshot of hits on our main
web site (basically, the last two days):

Number of different screen resolutions reported: 35 (including unusual
things like 992x695, 1088x612, etc., ranging all the way up to 2560x1024.
Can I have that monitor please?)

Most common screen widths:

  800 (almost all 800x600): 12% of the total hits
  1024 (almost all 1024x768): 56%
  1280 (mostly 1280x1024, but also non-negligible hits
    on 1280x800 and 1280x768): 21%

  [Larger than 1280: 5%]


While 56% of the *screens* are 1024px wide, only 41% of the *windows* are
between 975px and 1024px, so a substantial number of those users are not
running their browsers fullscreen.  Likewise, 21% of the screen are
1280px-wide, but only 14% of the windows are in that range.


[Triviata: All of this comes from log hits with a Javascript-set cookie that
reports screen and window dimensions.  Standard caveats apply about
Javascript-disabled browsers, impish hacking to report false values, the
likelihood that our users are just like your users, etc.  In the end, the
moral of the story is that the display environment is too diverse for page
designs to make assumptions about the dimensions they're playing with.]


--
Thomas Dowling
tdowling at ohiolink.edu




_______________________________________________
Web4lib mailing list
Web4lib at webjunction.org
http://lists.webjunction.org/web4lib/