Chief Delphi - First Website Revision

Chief Delphi (http://www.chiefdelphi.com/forums/index.php)

- Website Design/Showcase (http://www.chiefdelphi.com/forums/forumdisplay.php?f=64)

- - First Website Revision (http://www.chiefdelphi.com/forums/showthread.php?t=106959)

First Website Revision

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

Re: First Website Revision

Care to link us the site? ;)

Re: First Website Revision

Oops, I tend to do that.

The link is:

http://www.team4element.com/

Re: First Website Revision

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.

Re: First Website Revision

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!

Re: First Website Revision

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. :)

Re: First Website Revision

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..)

Re: First Website Revision

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! :]

Re: First Website Revision

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

Re: First Website Revision

Quote:

Originally Posted by rachelholladay (Post 1174747)

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.

Re: First Website Revision

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:

Code:

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

should be

Code:

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

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

Re: First Website Revision

Quote:

Originally Posted by gixxy (Post 1176572)

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

Code:

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

should be

Code:

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

It's not necessary to do that in Javascript, in fact, I don't even know if String.equals is valid. Also, you could change the body background from

Code:

background:url(/assets/images/bg.png) no-repeat #212121

Code:

background:url(/assets/images/bg.png) no-repeat #212121 fixed

it makes it so the background doesn't scroll, and IMO, it looks better.
EDIT: forgot to tell you that the rest of the CSS is awesome
EDIT 2: never mind about the java stuff, I thought you had mistaken the Javascript for Java, i didn't see the actual Java code.

Re: First Website Revision

I would like to thank everyone for all of the wonderful help. Over the past few weeks, we have made a lot of progress with the website. If anyone would be willing to, can someone please judge our website using the FIRST Website Award Guidelines? I want to see how we do, to make sure our website has all the correct content, and to see what other people think about it.

Thank you very much. :)

Re: First Website Revision

Code:

Y/N – can a new user easily locate and identify No Yes

Team name 0 2

Team number 0 2

Physical location of the team 0 2 -Just state your location after your highschool is listed on your home page

A link to the FIRST website 0 2

The FIRST logo 0 2

How well does the website explain FIRST and promote its vision

to people not familiar with the organization?

0 1 2 3 4 - You may want to add something about students + professionals teamwork

How current is the website content? ( i.e. Does the website include

information on this year’s game? Is information on team activity up to date?

Does the website appear to have been updated recently?)

0 1 2 3 4

How well does the website convey the team story? (i.e. What makes

this team unique? ) 0 1 2 3 4 - Looks updated reason for "3" is old blog posts

How well does the website recognize the team sponsors, mentors

and volunteers?

0 1 2 3 4 - Recognize your mentors specialties. (only two mentors?) There is a small typo on the sponsors page - "thankyou mentors"

To what extent does the website support other FIRST teams? (i.e.

Are there links to other resources? Does the team share resources they

developed themselves?)

0 1 2 3 4 - Find something your team would be willing to share possibly? Website creation tips?

How well is the website content written? (i.e. Is information presented

in a clear, readable manner? Does it contain very few (preferably zero)

grammar, punctuation or spelling errors? )

0 1 2 3 4

FUNCTIONALITY

How well does the site function? (i.e. Do pages load quickly and

completely? Do all links work?) 0 1 2 3 4 - Assuming all of your features will be running by your regional

How extensive is the website’s use of multimedia? ( i.e. Does the

website contain music, sound, animation, or video relevant to FIRST? Does

the website use newer web technologies in a beneficial way?)

0 1 2 3 4 - google calendar, team portal

How cross-browser compatible is the website? (i.e. Do all the

features work in all the major browsers (Internet Explorer, Firefox, Safari)? Is

the site useable with a mobile device? Can the website be viewed with a

1024x768 screen?)

0 1 2 3 4 - Tested IE, Chrome, Safari, Ipad - old IE doesnt work, current IE flawless

How much of the website design is original to the team? (i.e. Did

the team do any custom coding?) 0 1 2 3 4 - There is even a video!

How much care was taken when designing the website with

regards to web standards such as valid HTML and CSS? ( i.e. Does

the site pass the W3Cmarkup validation service http://validator.w3.org/ )

0 1 2 3 4 - passed



DESIGN

How does the website look overall? Does it give a positive first

impression?

0 1 2 3 4 - very clean

How inviting is the site to potential visitors? (i.e. Does the site speak

to all of its audiences -students, parents, mentors, sponsors, volunteers, plus

people who have never heard of FIRST?)

0 1 2 3 4

How easily can a new user navigate the website? (i.e. Is there a

clear method of navigation? Are menu items clear? Are there too many menu

items? )

0 1 2 3 4 tabs + sitemap good

How reader friendly is the website? ( i.e.  Does the font size and format

make the site easy to read? Is consistent formatting used throughout the

site?)

0 1 2 3 4

How engaging is the website? (i.e. Does it encourage exploration?

Does it make you want to return or recommend it to a friend?) 0 1 2 3 4

How well does the website give a sense of team identity? 0 1 2 3 4

How does the website handle distribution of information to team

members? (i.e. Are meeting times and locations visible to all visitors or is

there a private section? Does the public section of the website include

personal posts to or from team members?)

0 1 2 3 4 - just get your team portal working!

EXTRA CREDIT No Yes Emphatic

ally Yes

Did the team include anything in their website that would merit

extra credit?

0 2 4 - Team blog + upcoming team portal

Is the website handicap accessible? (i.e. Can a blind user with a

screen reader get information from the website? Will a deaf user miss

important information? http://www.cynthiasays.com)

0 2 4  - Not sure

PENALTIES - (No Penalties)

This website is one of the best I've seen from a FIRST team. Once more content is uploaded and your team portal is implemented your site will be even more amazing. The only problem - the google calendar doesnt seem to scale properly on mobile devices, but it doesnt end up covering any content.

Re: First Website Revision

Overall a great website! Awesome layout and design. I enjoyed the videos on the website creation and all of that :D.