Anyone want to critique my website?

[BTM]

This is a website me and two other people designed for a class
project. It's going to be a website for a local divison of Habitat
For Humanity, a charity that helps build houses for lower income
families. Anyway, I'm in the process of working with HFH to put the
website up on an actual server, and figured I'd do some retooling and
updating before it goes up.

Basically, the site's purpose is to tell people about HFH, how they
can donate or volunteer, or apply for HFH's services. It's meant to
be for anyone, from the computer savy to someone who doesn't use the
internet very often.

If you're curious, I'm the one who came up with teh basic "design" of
the site. Often when I'm thinking about what type of website to
create, I get a mental image or theme to put in, and this one the idea
of wood stuck to me, as Habitat's main mission is buidling houses...
so I figured the whole wood/construction motif would be a good look.

You can check out the link here..

http://mypage.siu.edu/mallan/habitat/

Appreciate any suggestions you might have...

Somethings I'm already thinking of changing...

1. Ditching the frames.

I dunno, thinking maybe the frames just aren't needed.

2. Shrink the menu bar

Thinking the menu bar on the left takes up too much room, thinking of
going for a smaller font and reducing the length of the boxes.

 

[M]

If you're curious, I'm the one who came up with teh basic "design" of
the site.

Often when I'm thinking about what type of website to
create, I get a mental image or theme to put in, and this one the idea
of wood stuck to me, as Habitat's main mission is buidling houses...
so I figured the whole wood/construction motif would be a good look.

Good in concept but overworked on the site IMO. Use SOME texture but maybe
some complementary colours instead of more wood.

Or, consider, contrasting colours -- dark greens perhaps.

I like the menu mouseovers (but see comments below).

You can check out the link here..

http://mypage.siu.edu/mallan/habitat/

Appreciate any suggestions you might have...

Somethings I'm already thinking of changing...

1. Ditching the frames.

Good idea. At smaller window sizes in Firefox, your menu disappears past the
bottom but has no scrollbars.

"Frames" can be done with CSS. Or put the menu in an iframe.

Thinking the menu bar on the left takes up too much room, thinking of
going for a smaller font and reducing the length of the boxes.

Your menu is image files. Using text instead allows users to specify their
own fonts, sizes instead.
Consider using css to provide visual cues of live menu items rather than
javascript.
Lots of people turn javascript off so they would have no visual indicator
that the menu is live.

Otherwise, it looks fine. If you have an artistic side, Google for free
website templates and use one you like as a jumping off point.

M

 

[Travis Newbury]

This is a website me and two other people designed for a class
project...

Ditch the frames, they are not needed here. I would also lose the
background images, it is something I would expect from a class
assignment, but probably not found on a good commercial site.

The menu sucks. I would just have it across the top as links since
there are no sub menus. Get a better quality image for the logo, it
is really bad. And the image for HabitatForHumanity is amateurish, I
would lose that too. Replace it with a better image of the logo, or
just use a normal font. I know what you were trying for, but it
didn't work.

Your contact us uses a mailto: These don't always work. Change it.

In the about us page, change the titles of your table columns to
something better. "Names" should be Name, or in this case maybe
change it to "Member Name" "Jobs" should be something like "Current
Position" or "Community Position"

This page is pretty far from being a professional page, but then it is
not supposed to be. School is for learning, and that's what you
should be doing. All and all, good job.

 

[Bergamot]

"Frames" can be done with CSS. Or put the menu in an iframe.

Why do you think an iframe is any better than regular frames? It isn't.

BTW, CSS "frames" have their own problems, perhaps worse than HTML
frames. Avoid using them.

 

[BTM]

"Frames" can be done with CSS. Or put the menu in an iframe.


Your menu is image files. Using text instead allows users to specify their
own fonts, sizes instead.
Consider using css to provide visual cues of live menu items rather than
javascript.

Er,,, not exactly sure I know how to do that... I THINK I understadn
what you're saying... don't do a lot direct editing of the CSS (only
had a beginner's class in Web Design...)

Lots of people turn javascript off so they would have no visual indicator
that the menu is live.

Otherwise, it looks fine. If you have an artistic side, Google for free
website templates and use one you like as a jumping off point.

Cool!

Thanks.

 

[BTM]

Ditch the frames, they are not needed here. I would also lose the
background images, it is something I would expect from a class
assignment, but probably not found on a good commercial site.

Technically, it's not a commercial site, but yeah, I see what you're
saying...

The menu sucks. I would just have it across the top as links since
there are no sub menus. Get a better quality image for the logo, it
is really bad.

And the image for HabitatForHumanity is amateurish, I
would lose that too. Replace it with a better image of the logo, or
just use a normal font. I know what you were trying for, but it
didn't work.

I'm assuming by this you mean the one in the center of the top
banner... That was kind of a "standby", so yeah, I can see that...

Your contact us uses a mailto: These don't always work. Change it.

To what do you think?

In the about us page, change the titles of your table columns to
something better. "Names" should be Name, or in this case maybe
change it to "Member Name" "Jobs" should be something like "Current
Position" or "Community Position"

This page is pretty far from being a professional page, but then it is
not supposed to be. School is for learning, and that's what you
should be doing. All and all, good job.

Especially considering how little they taught me on web design in the
four years I've been in college... depressing huh? I am about to
graduate and I was wanting to get a job doing this...

But, hey, that's off subject...

 

[M]

Er,,, not exactly sure I know how to do that... I THINK I understadn
what you're saying... don't do a lot direct editing of the CSS (only
had a beginner's class in Web Design...)

Nothing much to it really.

Go to this page, download it and then study the source.

http://www.xs4all.nl/~peterned/examples/cssmenu.html

You'll see the css styles embedded in the head of the file. Look for the
section titled a: hover. Start playing around with the 'attributes'

border-color:gray;
background-color:#bbb7c7;
color:black;

Change them, save the file, observe what happens, etc. You'll get the idea
soon enough.

Can't go into everything about CSS but for simple stuff, it doesn't take
much to master. Start Googling for css tutorials if you want to get into the
real guts of it.


M

 

[andrew]

[...]

Your contact us uses a mailto: These don't always work. Change it.

To what do you think?

You will find that a mailto link is a magnet for spam. There is an
excellent article on this at:

http://nikitathespider.com/articles/IngenReklamTack.html

The lazy man's approach, which I use myself, is at:

http://www.addressmunger.com/

This approach is poor HTML practice but an excellent survival
tactic in the battle to keep spam away from your inbox.

Andrew.

 

[Jonathan N. Little]

Er,,, not exactly sure I know how to do that... I THINK I understadn
what you're saying... don't do a lot direct editing of the CSS (only
had a beginner's class in Web Design...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>No JavaScript</title>

<style type="text/css">
html, body {
margin: 0; padding: 0; font: 100%/1.4 arial, helvetica, sans-serif;
}

ul#navbar {
margin: 0; padding: 0; list-style: none;
/* set width relative to font */
width: 10em; float: left;
}

ul#navbar li {
margin: 0; padding: 0;
}

ul#navbar li A {
/* make into block element to fill space and center text */
display: block; padding: .5em 0; text-align: center;
/* base color */
color: #eb5; background-color: #863;
/* set size relative to base font */
font-size: 1.2em; font-weight: bold; text-decoration: none;
}

ul#navbar li A:hover,
ul#navbar li A:active,
ul#navbar li A:focus {

/* set the hover effect, you could use a background image
to more closely mimic your original page */
color: #fff; background-color: #530;
}

</style>
</head>
<body>
<!--
MSIE has a whitespace bug that added extra spacing, to fix
remove whitespace between closing LI and next opening LI tag
-->
<ul id="navbar">
<li><a href="#">About Us</a></li><li>
<a href="#">What's New</a></li><li>
<a href="#">Prospective Owners</a></li><li>
<a href="#">Volunteers</a></li><li>
<a href="#">Donors</a></li><li>
<a href="#">Links</a></li><li>
<a href="#">Contact Us</a></li>
</ul>

<p>The rest of your page...</p>