Team 461's 2007 Website

[Ninjitsu Banana]

Team 461 would like to show you all our 2007 website at http://www.boilerinvasion.org/

We'd like to know what you all think of our website, especially what you don't like about it.

Negative feedback is very much appreciated.

Thank you!

[Ctrl Alt Delete]

Everything is pretty nice. The only thing I don't like is the dots in the background. It feels like they're poking out my eyes. I suggest making the individual dots lighter instead of making the background darker.

[Emil]

Thanks! We'll definately fix that.

[Compnerd]

I think you have a great design. The navigation is very well structured. Key to a great site

[mohitii]

Team 461 has been working on a new look for the past few weeks. It went live last night. There are still (a lot) of rough edges--we need to finish adding content to round out the new design. The basis of the website is done, however. How would you guys rate it compared to previous iterations? What would you like to see fixed?

[Gigaman2003]

from a judge's standpoint, i like it, it looks good, the only thing that dosen't fit in is the funky tabs, they don't really match the rest of your site which is sharp and angular. there is a lot of content which is the most important of course, and the whole site has a nice warm feeling to it.

from a web developer's standpoint, it's almost totally valid - you neglected to use <label> tags around your search input box. it's really well organized, but uses tables for layout?!?!?!?!??! it's 2007, not 1995.

the biggest thing is that it definately fails web accesibility testing, here is what a screenreader output when trying to read your page.

Page has six headings and thirty-five linksWBI dash West Side Boiler Invasion, Team four hundred sixty-one dash Internet ExplorerTable with three columns and thirty-five rowsTable with one column and thirty-four rowsTable with six columns and one rowLinkGraphicHomeLinkGraphicGeneral InformationLinkGraphicFind out more about WBILinkGraphicSee what we doLinkGraphicView multimediaEdit SearchbuttonTable endTable with one column and three rowsTable with one column and two rowsLinkGraphicFIRSTLinkGraphicSponsorsTable endTable endTable with one column and twenty-six rowsTable with one column and twenty-four rowsTable with one column and seven rows OverviewTable with three columns and five rowsTable with one column and four rowsThis page linkGraphic slash GeneralSectionPreviewImage dash Hover.jpgThis page linkGraphic slash OurTeamSectionPreviewImage.jpgThis page linkGraphic slash WhatWeDoSectionPreviewImage.jpgThis page linkGraphic slash MultimediaSectionPreviewImage.jpgTable endGraphicSection Preview Image

Here is a website i've recently built with web accesibility in mind, and here is how it is output.

Page has fifteen headings and seventeen linksPQL dash Portable Query Language dash Internet ExplorerGraphicPQL LogoHeading level one Portable Query LanguageHeading level four What is PQL The next generation flat dash file DBMS. Packed with features unrivaled by its competitors, it is well ahead of the competition. And with a comprehensive online manual, there's no reason why you can't learn PQL in an hour. Heading level four Why PQL If you need to build a small scale site, but require a better way to store large amounts of data than a makeshift system, you might not be too keen on such a complicated software like mySQL. This is where PQL comes in. PQL does not need any installation, and can be used even on low dash cost hosting that does not offer a database system. PQL's hybrid filetype system greatly reduces processing time and memory usage because it will only read what it needs dash not a byte more. The advanced query capability allows you to refine your queries using infinitely complex clauses that use the familiar paranthesis system. There is full support for the AND, OR and XOR logical operators, as well as ten relational operators that evaluate conditions to true slash false.

notice how your's spends over two minutes rambling on about your table structure and images (and it's not done yet!) while mine reads the page title, then one image, and it's gone straight into the content in less than 10 seconds... I used to ignore things like this thinking 'blind people don't use computers' but you know, they do. And not only blind people use screenreaders, old people who can't see clearly do, as well as people with perfect eyesight like me but use a screenreader so we can work on something else while browsing the web with voice commands and receiving information with sound.

The other big thing is that since you are using tables, the layout is basically never going to be viewable on a mobile device (unless it has Opera and the person knows how to change the display mode to desktop). Even with css turned off, it won't degrade into a neat, one column mode that is completely usable and not confusing (try it on my site).

The first thing to do would be start using an ordered list for your links, which really are just that. Replace the images and use the sliding-doors technique which are excellent for tabs like those you are trying to pull off.

The second thing to do would be to organize your markup not by the order they appear on they page, but the order you want your user to read it. Content should always come before navigation! After you do this, then move them to the correct positions using css. The reason why we do this is so that screenreaders start reading the content first, instead of repeating your navigation first every time a page is loaded.

The last thing that the site is very slow to load, but I can't blame you cause it's only in development and your hosting could just be having a bad day. Might be worth looking into though, some pages don't even load.

Overall i would give it a 4/5 at this point, great job! Im sure it'll be amazing once you're done.

[Emil]

Ben,

Thank you for spending the time to evaluate our website.

You make some good points, especially with the accessibility summary. We designed our website with some accessibility criteria in mind such as alt tags for images, XHTML standards compliance so accessibility parsers can actually understand the website, and a few other things. We will look into possibly rearranging the XHTML so that the content shows first.

As for tables verses css, there is a lot of debate around that. The reason we use tables is because

(1) we have very specific sizing requires for our website (a minimum width, a maximum width, some columns are fixed width while others are variable width, etc) which might actually be harder to implement with css so that all browsers (mainly IE6, IE7, and firefox) behave the same way.

(2) We have a lot of people working on the website and most of the new students are just learning how to write XHTML and it will be a while until they also understand CSS.

We appreciate your feedback and we will definitely make some changes based on it.

[Mr.D]

What program did you use to create the website? Dreamweaver? Frontpage? Other?

[Emil]

Everyone uses whatever they like most. I personally like to use Macromedia Dreamweaver because it supports both HTML and PHP. I occasionally use Microsoft Visual Studio and Microsoft Frontpage 2003 (don't use earlier versions because they are horrible). Often times, i just edit the website in notepad or through an online file manager.

Whatever program I am using, I don't rely much on its WYSIWYG (What You See Is What You Get) view because those are usually very misleading. Your best bet is to learn the XHTML and CSS standards well and try out many things to gain experience.

[Gigaman2003]

Originally Posted by Emil

(1) we have very specific sizing requires for our website (a minimum width, a maximum width, some columns are fixed width while others are variable width, etc) which might actually be harder to implement with css so that all browsers (mainly IE6, IE7, and firefox) behave the same way.

Use the css properties min-width, max-width, and as for the fixed width/variable width, those are easy. simply set fixed widths to how many pixels you want, and variable widths to a percentage, or just don't define it!
Its a little tricky but it works.

Originally Posted by Emil

(2) We have a lot of people working on the website and most of the new students are just learning how to write XHTML and it will be a while until they also understand CSS.

I remember when i learned xhtml
There was a lot of sugar and chocolate involved.

Originally Posted by Emil

Everyone uses whatever they like most. I personally like to use Macromedia Dreamweaver because it supports both HTML and PHP. I occasionally use Microsoft Visual Studio and Microsoft Frontpage 2003 (don't use earlier versions because they are horrible). Often times, i just edit the website in notepad or through an online file manager.

I use dreamweaver as well, it really speeds up development. With it you can script without worrying about syntax errors or looking up function syntax... Just concentrate on finding a solution to the problem, and making sure the code works. Now if windows didn't crash every other day...

Originally Posted by Emil

Whatever program I am using, I don't rely much on its WYSIWYG (What You See Is What You Get) view because those are usually very misleading. Your best bet is to learn the XHTML and CSS standards well and try out many things to gain experience.

What he said . It's painful to switch from WYSIWYG if that's all you have used before, but its like opening a fourth dimension to play with.