Website critiques?

[gracie.]

A couple other girls on my team and I have been working on this website for a while, and I'm looking for a fresh pair of eyes to critique our layout, and the website in general. There are a few things that I already know need to be fleshed out or revamped. Any feedback at all is awesome!

Thanks

www.team2399.org

[shawn.schwartz]

Hi, I am the head of Team 4's website.

I like the color scheme of your website. I have a few suggestions. First, I would center align you menu bar, because it looks a little shifted to the right. I think that it would look cleaner in the center. Also, you should always make your header images "non-draggable."

Since your image is not placed as a CSS background, add the following code to the end of your img tag for the header image:

onContextMenu="return false" onDragStart="return false"

Example:

<img style="border-radius: 0px; box-shadow: 0px 0px 0px #000000; border: 0px; float: right; padding: 5px; width: 250px; height: 195px;" src="assets/images/FRCicon_Reverse.gif" alt="FIRST Robotics Competition Logo" title="FIRST Robotics Competition Logo" onContextMenu="return false" onDragStart="return false" />

I would also recommend that you format your HTML and CSS code.
For HTML, use: freeformatter.com/html-formatter.html
for CSS, you can look at our website's code: team4element.com/assets/css/style.css

All of your CSS should be in external documents and then you would reference them into your HTML Documents.

I would recommend that you make your website's HTML and CSS code W3 Validated. You can check it using the following links:

HTML: validator.w3.org
CSS: jigsaw.w3.org/css-validator/

If you want, I can review and grade your website according to the FRC Website Award Criteria. I would just take a little while. If you are going to make major changes from the state that it is in now, I would like to grade it before and after, to see the differences.

If you have any other questions, please feel free to contact me. I am here to help anyone that needs it!

Otherwise, I like the overall design of your website and it is very attractive. I would just make a few changes and your team should have an awesome website.

[Akash Rastogi]

Solid and clean design.

Needs more embarrassing pictures of Ed V. though.

Nice 2012 robot by the way!

[quinxorin]

First impression: GREAT! The website definitely has the right style for an all-girls team.

To discuss styling more specifically: the page looks a little empty. The header "Welcome to the Fighting Unicorn's Website" also sounds a tad cliche, like it's a website made back in the days before CSS.

The large team picture drives home the all-girl nature of the team, a unique thing. It must stay.

Be sure to read the website award criteria and Logo standards and follow the random little things in them (i.e. the FIRST logo is a little bit too small on your page). Furthermore, the word FIRST should be italicized.

Under the "sponsors" dropdown, you should have a page that lists all your sponsors, from most to least.

[gracie.]

Originally Posted by shawn.schwartz

I like the color scheme of your website. I have a few suggestions. First, I would center align you menu bar, because it looks a little shifted to the right. I think that it would look cleaner in the center. Also, you should always make your header images "non-draggable."

I'll try and see what's going on with that menu bar, thanks for reminding me. And thanks for the code for the non-draggable header. I'm at something of a disadvantage because I'm just learning html and css, so I have trouble fixing the more specific things.

Originally Posted by shawn.schwartz

I would recommend that you make your website's HTML and CSS code W3 Validated.

I've been trying that out on a couple pages and it looks like it's going to be a decent amount of work. Do you have to screen every single page individually?

Originally Posted by shawn.schwartz

If you want, I can review and grade your website according to the FRC Website Award Criteria. I would just take a little while. If you are going to make major changes from the state that it is in now, I would like to grade it before and after, to see the differences.

That would be really nice, but I'm not sure we're going to be making major changes during the summer. Looking at the criteria, I can already see some issues, but it would be nice to see where we're starting from score-wise.

Originally Posted by Akash Rastogi

Needs more embarrassing pictures of Ed V. though.

It's surprisingly difficult to put hats on Ed... I think the only one we have is on there!

Originally Posted by quinxorin

Be sure to read the website award criteria and Logo standards and follow the random little things in them (i.e. the FIRST logo is a little bit too small on your page). Furthermore, the word FIRST should be italicized.

Ah... it needs to be at least .5" tall. I'll see what I can do there, and go around italicizing things. Is it necessary to include the "®"?

Originally Posted by quinxorin

Under the "sponsors" dropdown, you should have a page that lists all your sponsors, from most to least.

If you click on "Sponsors", it will show you our list of sponsors and their logos.

[quinxorin]

Originally Posted by gracie.

Ah... it needs to be at least .5" tall. I'll see what I can do there, and go around italicizing things. Is it necessary to include the "®"?

If you click on "Sponsors", it will show you our list of sponsors and their logos.

No, do not include the ®. There is already a mark in the FIRST logo, and per the standards, only one is required.

You might want to add an explicit button to the dropdowns that does the same thing as clicking on the item - I didn't notice it, and chances are, neither will the website evaluators.

[shawn.schwartz]

Originally Posted by gracie.

I've been trying that out on a couple pages and it looks like it's going to be a decent amount of work. Do you have to screen every single page individually?

No, I just do it on our main page, because I use a system called Jekyll where I create a template page from scratch, and then insert content on all of the pages. I am careful though, that my content is HTML valid. (Making sure that all images have an alt and a title). I just make sure that our template is free of any errors.

Originally Posted by gracie.

I'll try and see what's going on with that menu bar, thanks for reminding me. And thanks for the code for the non-draggable header. I'm at something of a disadvantage because I'm just learning html and css, so I have trouble fixing the more specific things.

Again, if you need any help, I am here to help you. If you don't understand a tag or how to do something, I will be able to answer your question or provide you with an example.

Originally Posted by gracie.

That would be really nice, but I'm not sure we're going to be making major changes during the summer. Looking at the criteria, I can already see some issues, but it would be nice to see where we're starting from score-wise.

I will definitely start working on your website grading sheet. I learned though, that you do not want to be making your website just to win the award, you want to have an information database for your team, as well as brand who you really are. But, you can still do it for the award, to prove that you accomplished everything.

[rachelholladay]

Some generalized thoughts..

You definitely show the style of your team through the color of your website. Im assuming you main colors are black, pink and blue? I like that your header gives the basics of your team, that is not only very helpful to the user but is also the first thing website judges look for. Some one already mentioned about the FIRST logo and I agree that you might want to make it a little larger. Perhaps use the official logo with the word 'FIRST' below the 3 shapes and make it about the size of the unicorn on the other side? That might bring a nice level of balance. I like your social media links but I would move them a little farther from the FIRST logo, those two sets look a little too close. Your footer also brings your team's style together very well.

Your about FIRST and home pages are solid, me gusta. Most people I see have 'Contact Us' as a separate tab so it is quick to get to, but that is purely a personal choice. You history section is very standardized which gives the user continuity. This maybe a typo but on the 2012 one the font seems to alternate colors. I would stick to one font color for the whole website because that makes things easier to read.

For your student bios I would either make a person's information all on one line or indent the details. That way its a little easier to process. By the way for your mentors page instead of the picture my browser printed [flagallery gid=1 name="Mentors"]. I like the way you structured your alumni page but the past mentors sliding piece doesn't seem to match the rest of the page. If the alumni and past mentors are on the same page, I'd do them in the same style. But just thought.

Its a little confusing that the tabs are links but then there are subtabs under them. I thought that 'News' was just the heading for the photos tab and only by accident did I realize that there was also a news page. I do really like the way you have structured your image gallery, one of the best I've seen in a while. I liked resources, news, this years game and becoming a sponsor pages. Most teams use Google Calendar but you have found an alternative that works just as good, so coolio.

While I wasnt sure on the 'past mentors' set-up I really liked it for the sponsors. My only suggestion would be to make each image for the sponsor also be a link to their homepage. That way you can click the image for Rockwell Automation and go to their site. Right now you have the titles for your webpages structured as "FIRST Team 2399:The Fighting Unicorns >> Name of Page". I was looking through your website and had several tabs open and based on the small tab name I couldn't tell which page was which quickly because the from the tab I could only read "FIRST Team 2399:The Figh" . The way to get around this would be to name the pages: 'Name of Page >> FIRST Team 2399:The Fighting Unicorns". Then again that's just personal habit of mine.

[gracie.]

Originally Posted by rachelholladay

Its a little confusing that the tabs are links but then there are subtabs under them. I thought that 'News' was just the heading for the photos tab and only by accident did I realize that there was also a news page. I do really like the way you have structured your image gallery, one of the best I've seen in a while.

Yeah, I was concerned about that, but I'm not sure what's a good solution. I can't take credit for the gallery- it's a really good plugin that connects to flickr. One thing I forgot to mention is that we're using wordpress.

Originally Posted by rachelholladay

Right now you have the titles for your webpages structured as "FIRST Team 2399:The Fighting Unicorns >> Name of Page".....The way to get around this would be to name the pages: 'Name of Page >> FIRST Team 2399:The Fighting Unicorns". Then again that's just personal habit of mine.

I can't figure out how to change this one. The titles of the pages are just "News" "Home", etc, but the tab titles won't change.

These are all really good suggestions and reminders for me... thanks!!

[Kristian Calhoun]

Originally Posted by gracie.

I can't figure out how to change this one. The titles of the pages are just "News" "Home", etc, but the tab titles won't change.

These are all really good suggestions and reminders for me... thanks!!

You may have to modify your WordPress template to switch the order of your site's name and the page titles within the title tag. See the wp_title reference for an example.

[rachelholladay]

Another quick note - on your slideshow (which I also like) the opening picture is of the Girls of Steel. For a second, since it was the first photo shown, I was a little confused and thought this was the Girls of Steel website. I would suggest making the first picture of your team, because it is your website. Then the second one could be Girls of Steel (because after all, they are awesome).

[gracie.]

Originally Posted by rachelholladay

Another quick note - on your slideshow (which I also like) the opening picture is of the Girls of Steel. For a second, since it was the first photo shown, I was a little confused and thought this was the Girls of Steel website. I would suggest making the first picture of your team, because it is your website. Then the second one could be Girls of Steel (because after all, they are awesome).

You have no idea how much I love girls of steel, they're so awesome! Repping the all girls teams. But yeah, that's a good point. We're in there, too, but most of us got cut off. I fixed it up!! Thanks!

[shawn.schwartz]

Your Team's Website--Graded Rubric:

CONTENT:
Y/N - can a new user easily located and identify No Yes
Team name 0 2
Team number 0 2
Physical location of the team 0 2
A link to the FIRST website 0 2
The FIRST logo 0 2 - Make it larger so that it is more noticeable.

How well does the website explain FIRST and promote its vision to people 
not familiar with the organization? 0 1 2 3 4
How current is the website content? 0 1 2 3 4
How well does the website convey the team story? 0 1 2 3 4
How well does the website recognize the team sponsors, mentors and volunteers? 0 1 2 3 4 - Make sure that you fill in your "Team Bios" section. Nice "Sponsors" page.
To what extent does the website support other FIRST teams? 0 1 2 3 4 - A "4" when you have your own resources.
How well is the website content written? 0 1 2 3 4

FUNCTIONALITY:
How well does this site function? 0 2 3 4 - Pages load very slow.
How extensive is the website's use of multimedia? 0 1 2 3 4 - Slideshow, About FIRST Video, Interactive Sponsors Page...(Maybe add a live Twitter Feed and/or a Facebook Like button right on the page. You could also add a Google Calendar Agenda Embed on every page.)
How cross-browser compatible is the website? 0 1 2 3 4
How much of the website design is original to the team? 0 1 2 3 4
How much care was taken when designing the website with regards to web standards such as valid HTML and CSS? 0 1 2 3 4

DESIGN:
How does the website look overall? Does it give a positive first impression? 0 1 2 3 4 - Content could be better organized to give off a cleaner feel.
How inviting is the site to potential visitors? 0 1 2 3 4 - Assuming you fill in all of the pages that are currently blank.
How easily can a new user navigate the website?0 1 2 3 4 - Needs better categorical page management.
How reader friendly is the website? 0 1 2 3 4
How engaging is the website? 0 1 2 3 4 - A "4" when the content is better organized and when page and text formatting is cleaner.
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? 0 1 2 3 4 - Google Calendar...(Have you thought about having a private section for Team Members, Mentors, and Parents?)

EXTRA CREDIT: No Yes Emphatically Yes
Did the team include anything in their website that would merit extra credit? 0 2 4
Is the website handicap accessible? 0 2 4 - Just add Meta elements: (description, keywords, & language), to <head> of page.
Then add "Cynthia Says Badge" to site. Checked with: "WCAG - Priority 1, 2, 3

PENALTIES:
NO PENALTIES

TOTAL SCORE:
68/82

If you have any questions, please feel free to ask.
You have a great website and are on the road to having an AWESOME website! When you are ready to be graded again, please let me know. I would also have someone else grade it right now, as well as after you fix it up.

[gracie.]

Originally Posted by shawn.schwartz

Again, if you need any help, I am here to help you. If you don't understand a tag or how to do something, I will be able to answer your question or provide you with an example.

Thank you! I don't really have anyone to ask about things except Google and the aforementioned Ed. He has to fix the website when I break it... >.>

Originally Posted by shawn.schwartz

I will definitely start working on your website grading sheet. I learned though, that you do not want to be making your website just to win the award, you want to have an information database for your team, as well as brand who you really are. But, you can still do it for the award, to prove that you accomplished everything.

I think it's going to be most important as a record of team history- we forget more of it every year- and as a website we can show potential sponsors and people who are new to FIRST.

[imackey]

Hi All,

It has been about 8 months since our site launched (www.lahsrobotics.org).

With school starting soon, we wanted to update our site in any way, shape or form.

I wanted to ask you if you have any comments, suggestions, or concerns about our site.

www.lahsrobotics.org - SITE

Thanks,
LAHS Robotics Team 114
EagleStrike