First Website Revision

[Adam.garcia]

Hello Chief Delphi,

Our team (primarily one aspiring sophomore) has taken on the task of creating a website. We are striving to make it as clean, intuitive, and informational as any of the best websites out there.

We are looking for any and all critiques that the Chief Delphi community can think of.

Thanks,
Adam

[cbale2000]

Care to link us the site?

[Adam.garcia]

Oops, I tend to do that.

The link is:

http://www.team4element.com/

[rachelholladay]

I glanced around your site and here are some of my quick thoughts -

I like that your team colors and your logo are prominently displayed through your design. I would advise adding your teams physical location (school name and/or city, state) to the header as that is one of the first things judges look for. While I like your rolling pictures up top, I would probably rearrange your front page content. You would probably want the initial paragraph explaining who you are up front, instead of towards the bottom. So maybe trying switching the location of 'Latest Blog' and 'About our Team' ? I would maybe make the top slideshow smaller because I had to scroll to get the the navigation bar. Also the fact that it is on every page means that when someone goes to a different page the banner is the first thing they see and when i did that at first i thought i hadn't switched pages (just gone back to the top of the one I was on previously). I do like the information in the side and bottom bar.

I will assume that some of the links are broken because the site is still in development. Your about the team section seems to be the exact same as the snippet on the front page, so not much new information is given. Your about our school is very detailed, although it does involve a lot of scrolling. There might be a way to package the information to where it appears in a concise format. You don't have very much under About FIRST, but it does cover whats important. From a navigational stand-point I would probably put 'Awards' and 'Robots' under about you instead of about FIRST because they are your robots and your awards. Based on the nav bar it looks like your guys will have a lot of great content once its filled in.

[Adam.garcia]

Thank you, I have just informed our website developer, and he is going to make those changes. Once finished, I will repost to say that the newest updates have been made.

Thanks for your feedback!

[shawn.schwartz]

Hello,

I am the current web developer for Team 4 ELEMENT. Thank you rachelholladay for your critiques.

Since we have the same about the team on the Home page, should I just do away with the whole about the team page?

Otherwise, what do you guys think of just having a quick glace on the Home page about our team and FIRST, then have separate pages with more information? And, are the shadows on the images too distracting? Would it be better to have a glowing effect instead?

Thanks again for the helpful critiques. Please share any other design tips you have that I can implement to make the website appealing to all of the eyes that view it.

[rachelholladay]

Shawn,
I would say that an "About Our Team" page/section is almost mandatory. Maybe you could name the tab "About Our Team" instead of just "About"? (which is a little unclear). And then replace the "About Our Team" page with one on your teams history (as detailed or basic) as you like. However, I think its important to tell the story of your team because it gives people a sense or who you are and where you have come from.

In case you haven't seen this (although you probably have) the website judging criteria can be found at http://www.usfirst.org/sites/default...20 manual.pdf (pages 2 and 3) While you should never work only to win an award (because that rarely works) the criteria can give a sense of what is important to stress in your website. Plus, its always nice to have some guidelines.

There might be an easy way to reduce the amount of scrolling (and therefore add more content in each screenshot). Your main content container is centered and seems to fill about 60-75% of the screen. Perhaps trying playing around with percentages to make it take up more space? Even if its just a little bit you will retain the bright blue feeling while showing more information in a quick glance.

(oh, and I like the bright blue shadows..)

[shawn.schwartz]

Rachel,

Thanks again for your very helpful critiques. And yes, I have looked at the website award criteria before and tried to use it when designing the multiple versions of our website.

I was messing around with the percentages, and let me thank you so much for that idea, (instead of using pixel widths), because it allows me to have more content on the screen.

Does your website happen to use CSS3 Media Queries for compatibility, because I was thinking that I may have to format our website for that? The reason why is because, with the new percentage widths that I have been testing for the content boxes, I noticed that on a 13-inch MacBook, the content is pushed down and the elements of the webpage are out of place. But, on other displays, everything fits. You can see what I am talking about by going on our Team's website right now and playing around with it by changing the browser's zoom in and out.

Thanks again!

[rachelholladay]

So I'll admit..I was a little intrusive, I looked at your HTML, CSS and a little of the Javascript (i too use dynamic drive and have previously used the Accordion one).

I believe the issue you are having is that the majority of your objects are resizing expect for the ones in the main content container. It seems to me that while the outside box changes with the broswer the about our team and blog posts does not. For example, below is your CSS for the blog posts:

.recentBlogPosts {
padding: 10px;
border: 3px solid #000000;
width: 290px;
}

While you made most of the things percentage based (or rather, comments out the pixel based size and added on the percentage. Which, by the way is exactly what I would have done) you might have forgotten this one. Also, while it is a little easier to figure out pixels (because you can "hard code" them in to get the exact look you want, percentages take a little more, shall we say, experimentation to get just right. For example right now your sidebar is fairly wide. (The CSS is below)

.sidebar {
width: 17%;

Therefore the navbar seems fairly stretched out. Within percentage based, everything plays off one another, so you have to consider elements in relation. I am unfamiliar with CSS3 Media Queries

[Adam.garcia]

Originally Posted by rachelholladay

So I'll admit..I was a little intrusive, I looked at your HTML, CSS and a little of the Javascript (i too use dynamic drive and have previously used the Accordion one).

Although your proposed solution makes no sense to me (since I have a fairly limited exposure to HTML), we at Team 4 encourage criticism as it's the very action that promotes excellence. Thank you for your "digging", and I know Shawn is going to take this criticism graciously.

[gixxy]

Rachel got to nearly everything already.

I do want to add that the Dynamic Drive Accordion effect does not fully function in Chrome.If you click the buttons a few times, like when looking through the links, you will notice the + and - start to move off the tabs. Just a little technical detail, not sure if it is really bad enough to worry about.

I also found the white on the light blue (for the navigation bar and blog posts) somewhat straining to the eye, or at least my eye.

As far as the images: whatever effect is currently on this is great. It gives them a feeling of being floating a bit, but it isn't distracting, just gives it some emphasis.

And also as a nit-picky programmer. The bit of Java code in the blog post has an error:

if (team4.department == "Programming") {

should be

if (team4.department.equals("Programming")) {

But overall it is a great site. Well Designed, flashy, but not overly done. Good Job!