BUZZ Robotics 175: New Website

FIRST General Forum
1

It is official. The new BUZZ website has been launched and is up and running.
Please take a look!
BUZZ ROBOTICS

Any comments (be it constructive criticism or compliments) are welcome here.

Thanks to Stu and Maddog for their relentless dedication to this project.

2

I do team 134’s website. I noticed a few things. First, what I don’t like: Your home page is way to busy. The mixture of the yellow and orange is just distracting. Try to lay it out a little better. Also don’t put so many pictures on your home page. The home page is to grab attention and it did the opposite for me. It seemed so long that I almost didn’t want to continue reading. Try to break the website up into multiple pages all of which has it’s own unique content. Now, what I like: I like the page header. I like how it is set to the left with a linkbar to the right. I thought it was creative. Not too complicated but not too simple. One thing is, under that section with the buzz smiley and team name and the link bar, put a horizontal rule.:slight_smile:

3

I do Team 1124’s website

I think that the main page is a little too cluttered and that the information would be better spread out across multiple pages, like FIRSTtm134 said. It seems that the home page is a little too long, and many users won’t make it all the way to the bottom. I also think that the second level menu items (specifically on the 2011 season page) should be on one line, as it’s too much visually to be on multiple lines. Other than that, I like it, especially the whole header. It’s simple and visually appealing.

4

Your insight is much appreciated guys. The site has now been updated; ridding ourselves of the orange horizontal titles though we have kept the orange as the links’ colors. The new color (actually the original color we had, but then switched out with the orange after launch) is a darkened yellow #999900.

We are still experimenting with layout and I agree that the homepage is a bit crowded. Separation into individual unique pages would be the best solution to this. Simplicity was our key plan to a successful website that would enable us to update it with ease.

The addition of a horizontal rule makes sense along with making the secondary level menu items all on the same line.

Thank you FIRSTtm134 and plnyyanks. :slight_smile:

The website is in my signature.

5

My main comment is reading the words makes me very angry aha. The web judges/web site visitors might not be too happy to keep reading 12pt Times New Roman yellow font. Also, try to use other fonts (examples: http://www.inspirationbit.com/16-best-loved-font-bits-in-web-design/)
Also, the menu at the top of your about us should be included in your side somewhere… it makes me confused when I navigate
Also, I’m not positive on this one, but how friendly is your site to people that are color blind? Im not sure how much of an effect your scheme would have but its just something to think about

Things I like:
Favicon - :smiley:
Page speed - Each page loads nice and fast. Doubleplus good!
img alt tags - Makes me happy to see em

6

dqmot17,

Please don’t get too angry. :wink:

The website is still in development, and the font is something we are working to address. Though I don’t necessarily see a huge issue with reading the 12pt Time New Roman font. It may be monotonous; yes, but it is at the very least uniform and easy to read.

Anyone else get confused while using the sub-navigation on the horizontal? This may be an issue. Incorporation into the side would be possible but would change the site’s appearance noticeably. Would a different color scheme to outline the nav supply for a well enough resolve to prevent moving the sub-nav to the side?

“Visitor friendliness” is a key component to having a successful website. From what I understand, the site is not an issue for my brother: who is colorblind. However I do understand that there are different variants of colorblindness, and some may see in other shades. An optional style sheet/color scheme would be a nice addition.

As a final note: The purpose of this thread is to reach out to our fellow CD community members and pick their minds for insight. I’m glad that each and every one of you has addressed a different issue or complimented on a specific item. The launch of this website (or resurrection) was not intended to be prepared to be submitted for the website contest, but to tell the net what BUZZ is all about. It would be nice to have a ready submission by February but that is of secondary priority.

Appreciated.

7

I help my team’s webmaster run our site and have created websites for school clubs (online stores mostly).

I personally like the site but there are a few things I would recommend that you change.

As the others have said your home page is a little busy and you probably could get away with the pictures to a separate section, but the home page is still good even with the pictures.

I second that you should try to change the font. The problem with Times New Roman is that it just does not look good some times and makes the site seem much more busy than it is (the font itself looks more complicated than something like ariel or tahoma). I would recommend going for a simpler font.

I am red-green colorblind and the site color scheme does not cause any problems.

The navigation blends in a little bit. I would recommend trying to do something to make the horizontal navigation stand out. I do not know how you would do it with the color scheme but it did take me a minute to realize that there was a horizontal menu/navigation bar. My honest recomendation would be to use a side bar for navigation rather than a horizontal one, the main reason for this being that side bars allow for access to more of the menu items while viewing different parts of the page (basically the navigation bar on top dissappears when you scroll even a little bit down).

This is just a personal preference but I do not like web pages where the text takes up the entire width of the screen. I would suggest making it take up a smaller percentage of the screen, but this is just my opinion. To me this would probably make the biggest difference toward making your site easies to read.

It looks like the primary purpose of your site is to inform people about your team (almost the opposite of my team’s site which is primarily a forum) and personally I think your site serves that purpose quite well.

Overall your site just needs a little reformatting and it will be great.

Also how are you making your site?

8

I would like to point out that most agree that your content is not something of issue, rather your layout/style options are a bit of an issue.
As to elaborate as to what Garret was saying - Most web layouts dont do 100% width of a screen. The main reason for this is readability while it makes it so different screen sizes don’t cause a change in the look of the website. This forum, for example, uses a ‘scaled’ look so to speak (I have no idea what the technical term is hehe)

Also as a rule of thumb, MOST keep all navigation in at least one place (most people seem to put it into two ‘panes’ - One left for nav, one center (or right) for content. Keep in mind, there is no rules (besides never EVER make a geocities looking site with flash intros and dancing gifs :D) to web design, and first in their rubrics mainly grade for content rather than look and ‘cool factor’ (it can help though)

Also I missed something: on your history page, I like the robot pics but they lack alt tags, and the aliasing on the bots its a little crude, but its my personal opinion.

But im glad you guys decided to resurrect it. Learning web design in this era can be very beneficial.

9

A few things to consider:

  • Change the font as mentioned earlier. A sans-serif font is easier on the eyes.
  • Consider changing the color scheme - keep your yellow-on-black for the headers, footers, navigation areas maybe. But it’s very hard to read yellow font on black, and without a CSS print style, it chews up a lot of ink if someone tries to print one of your pages.
  • Consider learning CSS stylesheets for the structure of the page and get away from using tables. It’s something I’m trying to do with my websites also.
  • It might be better to use include files for your header, footer and navigation areas so if you need to make a change, it can be done in that file - and you don’t have to fix each page. It will save you a lot of work in the long run.
  • Use HTML special character codes - © instead of © for the copyright symbol.
  • Your masthead is good and reflective of the team’s identity, but it takes up a lot of page real estate. You might wish to make it smaller. And less content per page - strive to put the most important information “above the fold” so a viewer doesn’t need to scroll to dig for it.

It’s a good start towards the revised website - good luck with it! :slight_smile: (Sorry, I couldn’t resist adding the smiley face!)

10

Garret, dqmot17, and KathieK,

Thank you all for your well thought input.

My list of things to do includes everything in KathieK’s list or recommendations; along with the consideration of using a scale factor rather than a rigid px value. Outlining of the horizontal navbar will be addressed, or the change of location of the navigation. Alt tags will be added; however the aliases of the robots cannot be changed. Those are their names :wink: BUZZ is named by numerics because of our foundation on the space era (sponsored by Hamilton Sundstrand, and hence the name “BUZZ” after Buzz Aldrin). Think of it like Apollo 1 . . . Apollo 2 . . . Buzz 3 . . . and so on.

Resurrect and revise revise revise. The website is made entirely from scratch. With the use of our handy dandy notepad.

Work in progress…

Much Appreciated

11

Aliasing in this case does not refer to an alternate name, it refers to the Digital Signal Processing definition of aliasing:
http://en.wikipedia.org/wiki/Aliasing

Specifically the white jagged edges visible around some of the robot pictures. The 2007 and 2008 robots show this effect very noticeably.

12

Oops. :o

Thanks Vikesrock. It’ll take some photoshop-ing but this issue is not a priority compared to the other deeds that must be accomplished. Added to the list however.

13

I agree with KathieK on ditching the tables, though that might take quite a bit of time. It’s worth it, though.

14

Just some other maintenance things that you should consider (this were our focuses when we rebuilt out site last summer)

  • Modular - If a website is built out of building blocks (called modules) that make up every page, it will be easier to fix bugs, keep compliance, keep uniformity, prevent errors, make editing easier, make coding simpler, and enhance the browsing experience.
  • Integrated - This term has two meanings. First, we plan on integrating the main website with the forums. There will be one set of usernames and passwords, and events on the calendar can link to forum threads. (Like meetings will link to posts containing minutes from said meetings). Second, the team website will be integrated with other websites and technologies such as YouTube, Twitter, Facebook, RSS, iCal and more to help people stay connected with the team and help spread popularity through social networking.
  • Compliant - With help from modularity and the site model below, our website should be compliant with W3C standards. In addition, it must be compatible with all major browsers (even IE) and files like RSS and iCal must be compliant to their respective RFCs. (If you didn’t understand the last sentence, try googling it.)
  • Handicap Accesible - At this point, you may be confused. It is now a major focus of Web 2.0, the W3C, and FIRST website judges that websites are accessible to the blind, vision-impaired, and deaf. This means using alternative text for images, minimizing the use of text in images, giving the option to increase text size, providing a simpler skin, provide contrast in colors, and putting captions below video (this will take time and effort).
  • Transparent - It should be easy for people to navigate and know where they are in a site, and how to get somewhere else. This will be available as a result of modularity, a site map, and predictable urls and navigation.
  • Sexy - We’re only going to win if we can create the sexiest site anyone’s ever seen. Through the model below, we can build a website, then make it sexy by building a new skin.

(^ list is from http://www.uberbots.org/forums/viewtopic.php?f=15&t=555, that specific info is near the bottom of page 5)

Keep in mind that these may not all apply to you (especially modular, since we made our site in a ‘special’ way), but all of these are good to keep in mind. Also, make sure you have a good CMS, or at least an easy way of updating information on the site, even for people who don’t know HTML well.

15

Something to keep in mind is that there’s no requirement or reward (other than learning) for coding a website by hand. It’s a great learning experience, but you can oftentimes get better results and a more useful, team-editable website by using CMSes like Drupal or even software packages like iWeb.

Shaker made a website out of iWeb that was tweaked and optimized to be XHTML compliant and to have a more unique image than the templates provided, and we won a Website Award for it. Check it out at http://www.team2791.com

As for your specific website, it seems like it’s wasting a lot of space and uses tables to get the job done, which unfortunately makes it look quite out of date and not very interesting or accessible.