Tips for making better websites

[Q. Sheets]

Before teams really start getting amped for the next FRC season, there is something that needs to be said. Teams' websites can really use some tender love and care. There are plenty of excellent teams that have websites that either are stuck in 2000 or don't relay the message the team is trying to send. Not to be mean but, there is a reason Yahoo! rid itself of Geocities. Trust me; it is for the better, that we try not to repeat the mistakes in those sites in our sites. Yes, I do recognize that some teams' members in charge of the websites never took a course in web design; that is why I'm creating this thread — to help FIRST teams have a higher standard in designing websites, writing/formatting copy for websites, etc.

Voice overs
Yes, don't laugh, I have seen this done on a couple team sites… Say you're on a team 0000's homepage; you hover over a link that reads "Team 0000", and immediately, an audio clip plays and says, "Learn more about team 0000, it's members…". Maybe the link should read "About Team 0000" or "About Us."
If you feel you have to present the user with an audio clip when they visit a page or hover over a link, you're not giving the user enough context on the page itself.

Paragraph alignment
Paragraphs of copy (not including asides and pull-out quotes) should never be center aligned. The copy should always be aligned to the left or right (depending on standard formatting or language). Centering multiple lines of text, causes the level of readability to fall.

Typography/Font usage
This is a general note. Font's have personalities and meanings. They can be traditional, modern, playful, serious, etc. (Example: Comic Sans is playful and is okay if your intended target is little kids) You need to choose the right one.
This presentation from earlier this year may help.

While we are still all in maintenance mode, let's help them help themselves to produce better products. If you have any tips, or have found something interesting in an article, please share.

Note: Be polite when providing tips in a general thread, don't call out specific teams that are going about something the wrong way. Instead, show them examples of how to correct their mistake.

[KeatonM]

Something else that isn't good - text walls!

It's easy to write a huge paragraph of words, put it on the site and be done. But it will turn the viewer away, and it's unlikely that they'll actually read the whole thing! Instead, space it out with some pictures, pull-out quotes, etc.

I do have a question for you, people of CD - our team has a font that we use in almost all of our publications as headings, it's our logo font, etc. The font is called Marker Felt, and it feels very playful, much like Comic Sans. I spent most of the summer working on a redesign of our very old website, and ran into a snag with the typography... Because we use Marker Felt in everything, it's been requested of me to use Marker Felt as the headings on the website.

Personally, I don't think it's too bad, but I'd like to see a general consensus from CD on this... Here's 2 screenshots of how it looks (attached).

[Q. Sheets]

Originally Posted by KeatonM

I do have a question for you, people of CD - our team has a font that we use in almost all of our publications as headings, it's our logo font, etc. The font is called Marker Felt, and it feels very playful, much like Comic Sans. I spent most of the summer working on a redesign of our very old website, and ran into a snag with the typography... Because we use Marker Felt in everything, it's been requested of me to use Marker Felt as the headings on the website.

The presentation I linked to in my earlier post references a site called Typedia that can help you determine the typeface's personality and whether to not to use it for what you are doing. In the case of Marker Felt, the typeface is casual and intended for typical use in multimedia presentation slideshows (Keynote, PowerPoint, etc); whereas Comic Sans MS was/is intended for comics and character quotes. I think it would be okay to use Marker Felt as a header.

Edit: So I tweeted to someone who does this stuff for a living (he really likes these types of questions), and he replied "[It's okay to use a font similar to the logo if] they are a very playful, fly-by-night robotics team… But no, don't use a font similar to the logo, unless it's the same." Thus I retract my original view as I am not convinced it is your true logo font – by looking at the team's twitter profile image, and the image on the website, the true logo font seems to be the brush script that says "Team 27 RUSH".