Website Critique

[WindberTSA]

Hi everybody!

I am very new to this and I am looking to get feedback on the website I built for a club at my school.

The address is [http://windbertsa.com](http://windbertsa.com “”)

I would love to have all of your input as to how I can make the website better!

Thanks!

[Paulie_D]

I think it’s pretty good for a school project.

If I may, just a couple of things.

You really don’t need the group picture on EVERY page…just the front one (home).

Because it takes up so much space, all of your menu links lead to anchor tags xxx#bottom at the bottom of each page. This is very distracting. Users (IMO) want to go to the top of a page and scroll down.

If you remove that image from your other pages, you will have more room to play with on every page and you won’t need to link to the bottom of each page.

A minor point, your menu links all have a 1px right border #ccc. I would look into finding the selector (it exists but I don’t want to spoil it for you) to remove that border from the right-most one on each menu / sub-menu. It’s a little more visually appealing.

Othewrise, keep it up, you’re much further along than I was at that age…of course, when I was that age…there was no internet.

[WindberTSA]

First of all, Thanks for your advice!

The reason I was leaving the image on each page was for consistency(?). I thought that it was unappealing to have the menu bar link to the top of the page because when users were navigating in certain browsers they couldn’t tell if the content changed.

Do You think it will look okay without the image? I was also worried that it would look bland. I am planning to make that a slideshow on the first page as well.

This website is actually for a competition and I’m looking for ways to try to make it more interactive/visually appealing, and useful. I placed first at the Regional Competition and last year I received fifth at states, but that was with a different website (tsa.windberschools.org).

Let me know if you have any other advice! :)

[Paulie_D]

If you want users to know the page has changed then you could put a different image on each page. The only reason you’re having this problem is that it IS the same image.

Alternatively, perhaps look into making the image a slide show. It’s a little bit harder but a great learning experience.

[WindberTSA]

I am going to try to make that a slideshow. And I think I am going to try to take the picture off the rest of the pages. And then I will remove the #bottom element.

What are you’re thoughts on the footer?

Is the site easy to navigate?

[Paulie_D]

I think the footer is fine although I might not wrap the links in a ‘p’ tag as it’s adding a lot of bottom margin and so the footer is quiet large.

Navigation is fine other then the comments I’ve already made.

Hey, CCS-Tricks community…am I being too harsh…let’s hear from you.!

[WindberTSA]

@Paulie_D, I will try to remove those ‘p’ tags and I think the footer will look nicer if i is smaller as well. That’s a good idea.

@Chris, do you mean that I should change the places where I have quotes and things in blue text to a different color? And if I remove the underline, how will people know that they are links?

[WindberTSA]

@Paulie_D, I did already change the nav bar to reflect not having that 1px border. Do you approve now? :)

[Paulie_D]

What I meant was that you should only remove the border from the LAST list item in any particular menu…not all of them…but what you have still works.

[Paulie_D]

If you have time, I would think about making your submenu a vertical menu rather than horizontal.

For instance, what would happen if you had to add another item to your WindorTSA submenu?

[WindberTSA]

@Paulie_D, I removed the border from ‘nav li a’ and it removed it from all of them.. I’m not sure how to accomplish what you meant by removing it from the last item..

On another note. To be honest, any time I have added a submenu I kept adjusting the menu bar to the left a few pixels to even it back out :x. I am not sure how I could incorporate a vertical menu bar into this current layout. I could have time to do it.

@chrisP, I get what you are saying. I think I can edit that in just CSS and it should be an easy adjustment. :) I will do that soon.

OH! and I tried to remove the ‘p’ elements on the footer. It turns out I must have them there to make the menu horizontal? when i tried to remove them it made the menu go vertical.. which is not good. So I do not know how to remove them wiihouut having a good format..

[Paulie_D]

Borders —- try this:

#nav li {
float:left;
border-right:1px solid white;
}

#nav li:last-child {
border-right:none;
}

[Paulie_D]

If you are interested in a vertical submenu you could take a look at this crude example.

http://codepen.io/Paulie-D/pen/f0aad08b416a5a7e87914567a07770f9

[Paulie_D]

For the p elements in the footer try {

#footer p {
margin-bottom:5px; /* Adjust amount as you like*/
}

[WindberTSA]

You are awesome! ..lol.

In the beginning when I was working on the menu I wanted to get rid of that last border but I didn’t know how. I got that fixed successfully!

It seems like a really good idea to create a vertical menu bar, do you think it would matter if that menu covered up the image on the home page? I need to learn some better web development practices.. I always question my changes.

[Author]

Posts