[thelist] Site check please [long]

Maximillian Schwanekamp lists at neptunewebworks.com
Sat Sep 17 02:00:39 CDT 2005


Amy Johnson wrote:
> http://www.rocky-hills.com/sample/mfh/index.shtml

I like the color scheme overall.  Though the masthead photos are 
obviously stock, they work with your site's focus IMHO.  Visual 
implication that couples of all ages could benefit, and may encourage 
family togetherness, etc.  I'm a sucker for blurry background images, so 
I'm liking those too - although the one on the homepage initially looks 
to me like a baby, not a couple.  Maybe it's just *too* soft?

Hate that page background image.  For users with wider viewports (I'm on 
a notebook at 1440x900) those hard lines are visually distracting, and 
when scrolling they behave like op-art.  Maybe tone em down, and use 
anti-aliased lines?

The navigation is schizoid.  You have a horizontal bar of links, and a 
vertical nav.  The sidebar nav gets way more visual weight, not least 
because the font on the horizontal bar is just tiny.  Some users, such 
as the older couple on the left side of your masthead, may get irritated 
with the horizontal nav, since those images cannot be resized easily. 
But the sidebar nav's font, 9pt (!) Verdana and button images quickly 
draw the eye.  Is the sidebar supposed to be off-center?  It looks like 
it was intended to line up with the yellowish background column.

Continuing to pick on the sidebar, what's up with the confusing 
switcheroo it does from page to page?  On the home page, there are 8 
button-links on the sidebar.  On The Clinical Approach, the sidebar has 
only 4.  On Intensive Therapy there are only 2.  Odd.  My user self 
thinks maybe the nav is broken?

Also, the sidebar markup needs some work.  You have a div with a bunch 
of bare links, no structure.  User agents that ignore your visual CSS 
may just ram those together like a nonsensical sentence.  How about 
putting them in an unordered list (ul)?  Standard practice these days 
after all[0].  It would also make some of the CSS a little easier. 
Speaking of, your CSS could be made quite a bit lighter, even without 
changing your markup.  You have 2-3 big declarations for each of those 
button links.  E.g.:
a#button1       {position:absolute;
                 top:165px;
                 left:27px;
                 width:164px;
                 height:24px;
                 background-image:url("images/button.gif");
                 background-repeat:no-repeat;
                 font : bold 9pt verdana, sans-serif;
                 color:rgb(125,60,48);
                 text-align:center;
                 padding-top:2px;
                 text-decoration:none;
                 z-index:10;
                 }
(Then another for hover, and for most of em there's a _hilite version, 
each one with lots of redundancy.  Use a general rule for all of them, 
and then enumerate only the ways each element varies from the general. 
So in your case, you would have something like:
#sidebar a {
   position: absolute;
   left: 27px;
   width: 164px;
   height: 24px;
   background-image: url(images/button.gif);
   background-repeat: no-repeat;
   /* no need to state font-family unless you want to
      vary it from the rule on body */
   font-size: 9pt; /* points are for print. change this! */
   font-weight: bold;
   color: rgb(125,60,48);
   text-align: center;
   padding-top: 2px;
   text-decoration: none;
   z-index: 10; /* what is this for? */
}
#sidebar a:hover {
   color: rgb(253,187,80);
}
a#button1 {
   top: 165px;
}
a#button2 {
   top: 196px;
}
a#button2_hilite,
a#button3_hilite /* and so on, for each button */
{
   color: rgb(253,187,80);
}

The same idea can go for those img#bot... rules.

HTH!

[0] http://css.maxdesign.com.au/listamatic/

-- 
Max Schwanekamp
http://www.neptunewebworks.com/



More information about the thelist mailing list