I took a look at the winning design at http://domm.zsi.at/modperl-site-domm/ and I see a significant problem for people in 800x600 resolution (which is pretty common still, and I use it):
A horizontal scrollbar appears at the bottom of the screen. Can't this be fixed? Also, the left sidebar seems to be wider than it needs to be. The logo is 150 pixels, so I think it only has to be that wide. I have attached a screenshot from 800x600 resolution in Opera 6. (The same thing happens in Internet Explorer 5.5.) I took a look at the style sheet (http://domm.zsi.at/modperl-site-domm/style.css) and changed a few numbers such that the left sidebar takes up less space, and made it so that the page is allowed to compress smaller such that it'll even fit in 640x480 (about 10% of internet users have that resolution last I checked, although this proportion may be smaller for programmers). I attached the changed style sheet; I think it's better this way. You can see how it looks online at http://sg1.indexthis.net/~pmak/modperl.html. Under smaller resolutions the horizontal scrollbar is gone, but it'll look pretty much the same on 1024x768. BTW, kudos to the designer on making that page without using <TABLE> tags (which prevent incremental rendering)! I've tried to figure out how to do that myself before but didn't manage to do so for pages this complicated. (If the person viewing the page doesn't have stylesheet support though, the sidebar will show up at the bottom of the page... Do we have any statistics on what percentage of people viewing the mod_perl website have user agents that don't do stylesheets, or Netscape with JavaScript off?)
modperl.gif
Description: Screenshot from 800x600
body { font-family: helvetica, verdana, sans-serif; font-size:small; color: #000000; background-color: #ffffff; } h1 { padding:2px; background-color: #828DA6; color:#ffffff; } a:link { color:#0000ff; font-family: helvetica, verdana, sans-serif;} a:visited {color:#0000ff; font-family: helvetica, verdana, sans-serif; } a:active {color:#0000ff; font-family: helvetica, verdana, sans-serif; } a:hover {color:#0000ff; font-family: helvetica, verdana, sans-serif;} pre { font-family: courier new, courier, monospace; color: #000000; } code { font-family: courier new, courier, monospace; } div.navbar a {text-decoration: none; color:#0000ff;} div.activenav a {text-decoration: none; color:#ffffff;} div.navbarglobal a {text-decoration: none; color:#ffffff;} div.notactivenav a {text-decoration: none; color:#525D76;} div.toc a {text-decoration: none;color:#0000ff;} div.leftcont { position:absolute; top:5px; left:5px; width:160px; } div.content { position:absolute; top:5px; left:175px; margin-right:10px; padding:5px; border:1px; border-style:solid; border-color:#525D76; background-color: #ffffff; } div.logo { padding:5px; border:1px; border-style:solid; border-color:#525D76; background-color: #ffffff; text-align:center; } div.navbar { padding:2px; border:0px; border-style:solid; border-color:#525D76; background-color: #ffffff; } div.activenav { font-weight:bold; padding:2px; background-color: #525D76; } div.notactivenav { padding:2px; font-weight:bold; border:1px; border-style:solid; border-color:#525D76; margin-top:-1px; } div.navbarglobal { padding:2px; background-color: #525D76; color:#ffffff; } div.navbarlocal { padding:2px; text-align:center; } div.tail { padding-top:10px; padding:5px; border:1px; border-style:solid; border-color:#525D76; background-color: #ffffff; } div.ad { border:1px; padding:5px; border-style:solid; border-color:#525D76; background-color: #ffffff; }