Small town school alumni web site review

[sphillalumni]

Redesigned High School Alumni Association site for CMS using Postnuke.

Would appreciate some comments on this new layout.

This site is intended to provide information about the local high school and its alumni members.

Your help and comments would be most welcome.

http://springhillalumni.org/web/html/index.php

The old layout is located here: http://www.springhillalumni.org

Thanks in advance.

[oatesj77]

looks good, i see that you kept some of the components of the previous site which is nice, the colors are work well together, are they the school colors though, yellow & gray?

you might want to look into a different or better quality lumber jack image, it seems blurred and doesn't fit well into the rest of the site as far as the look and feel.

i looked at the site with mozilla and ie, different. with ie the info bar on the right is pushed out of view, with mozilla it is in view and i run at 1028x764, lesser resolutions will need to scroll to see info to the right, not a good thing. and there were a few issues with borders in mozilla, but not enought to dreaw away from the site, just not quite professional either.

[sphillalumni]

Thanks oatesj77 for your comments.

The school colors are black and gold. The gold they use usually looks similar to the yellow on the site. The gray on the site is used to lighten up the site, so it is not so dark.

I found the lumberjack image several years ago, and have used it on the site since then. It has been resized and resampled a few times because I cannot seem to find the original image again.

I do need to reduce the width of the header image. Do I need to reduce the width of the overall table to fit within the 764 screen width?

I was trying some css for the borders, which do not necessarily need to be made with css. I had used an image to make the borders on the old site, and could use again.

As you can tell, this site is not created by a professional. I have learned all the visual layout for the site on my own, no professional courses. Again, thank you for your comments, and I will look into incorporating those into the site.

[YvetteKuhns]

I agree with the other comments. No one should have this much horizontal scrolling at a higher resolution. Reading yellow text on a white/light background is difficult for some of us, especially when the text is small.

Try creating a solid yellow background for the header and use a transparent gif for the website name. You can create a solid yellow image for the left and the right side to make a shape instead of a rectangle. The center can be a solid yellow background color or an image that can be stretched to fill the screen for any screen resolution. Use a relative width in pixels, but you can still specify a fixed height in pixels.

[sphillalumni]

Thank you YvetteKuhns for your comments.

I have changed the color of the yellow links to black.

I can't use mozilla at the office, but will install it at home to see the layout.

I am confused regarding the solid yellow background. The header image uses a two colored stripe for the background to lighten the yellow a bit. I also want the drop shadow for the bottom and right sides of the header.

How would I make a solid yellow or black image and still be able to do the drop shadow?

My main table uses a percentage of the screen (was 100% when you viewed it originally). I have since reduced the width of the header image and changed the percentage to 80% to reduce the horizontal scrolling.

Again, thank you for your comments.

[YvetteKuhns]

How would I make a solid yellow or black image and still be able to do the drop shadow?

You created a shape with the drop shadow. You can image slice to have the left, middle and right parts of the image. The middle can be rectangular and stretched to fill any size. So there are three TDs in your header TABLE. The first TD background is left.jpg or left.gif, the second is middle.jpg or middle.gif, and the third is left.jpg or left.gif. The actual contents of the second TD would be your transparent gif logo.

The widths of each TD can be relative. So the first can be TD width="10%" align="right" background="left.jpg". The second TD width="80%" align="center" background="middle.jpg". The third TD width="10%" align="left" background="right.jpg".

[sphillalumni]

Thanks YvetteKuhns for the information. I will look into making those changes. Can't promise anything :)

[Batchman]

Took a look at this, and the first two thoughts that came to mind have already been mentioned before ... lumberjack needs updating, and the scroll to see the column on the right is a little unpleasant.

Other than that, what came to mind was the main section seemed a bit too gray ... but that may only be to me.

In general, looks pretty darn nice.