Team 955
 

Here is our team website. Myself and our teams head programmer built the site. A CSS based layout, we hoped to achieve a more design inspired layout, rather than a content based. Hopefully it's easily navigated. There is an easter egg in our CSS code, and the first person to find it wins a cookie (virtual cookie). Any feedback would be appreciated.

Re: Team 955
 

In terms of aesthetics, I'd say this website is extremely well laid out with awesome contrast between different elements in the site. However, although you mention a "more design inspired layout" content also makes up a large proprotion of the website's impact. If you add more content you will definitely be a better contender for the web award.

A tip: Your header image is really well taken. Wouldn't it be better if it changed for a different link within the website?
Also your FIRST logo seems a bit pixelated.

Other than that I say you've done yourself proud :D

BTW: I cant seem to find anything "unusual" about your style.css coding. Is it a syntax easter egg or are there specific words that I should be looking for?

Re: Team 955
 

Congratulations on a job extremely well done.
Very clean and easy to navigate, I think you've accomplished your goals very well.

Adding content is important though.. and should be your next project.

Re: Team 955
 

I really appreciate the feedback. I'm the designer, so I'm not too concerned about content :P But there will be more added eventually. I took the picture for the banner, and it seems to be the thing every notices first, probably because it's huge.
Look at some of the values in the CSS. That's the only hint you get.

Re: Team 955
 

I really like the design; clean and eye-catching. As my team's webmaster, I struggle at making things look good, even though I am fine at the coding. Excellent job.

As for the easter egg, you used your team's number, #955, for the color of your links on hover. Good thing that color looks good, or else you would have had to re-register your team!

Re: Team 955
 

well here's some abnormalities in the CSS code i've found, but haven't actually found the 'egg' yet.

(text indended -9000px, thus rendering it out of screen? I've turned off CSS Style sheets on firefox, found no secret text though.)
#first a {
text-indent: -9000px;
background: url("/first.gif") no-repeat top left;
display: block;
height: 216px;
width: 250px;
}

(The content linked to this class might contain something, and since display is set to none, it will only be visible in the code, however i haven't found anything linked to this class)
.access {
display: none;
}

Re: Team 955
 

Kirish found the egg. So a cookie to him. :)

The weird CSS is intentional and is used to hide elements from graphical browsers. The text indent method is known as Rundle's image replacement technique. The other method is the Fahrner image replacement technique (though I'm not replacing an image).

The reason I used the first is because I dislike images in the design that serve no purpose in the content. So the FIRST logo is inside a text link that is hidden unless you are using a screen reading program or text browser.

The FIR is used to put a "Skip Navigation" option in a top menu. I ended up not using a top menu (the sidebar markup is all at the bottom of the html document), but the class got left in the CSS. The skip navigation link is only used for text browsers where a long menu at the beginning of a document can be annoying.

There is a problem with FIR where some screenreaders will actually interpret "display:none;". However, that's not really a problem with just a skip navigation link.

Here's a related article that might be helpful: http://www.stopdesign.com/articles/replace_text/

Re: Team 955
 

Good job on the website. Nice clean worpress layout. There are many WP pluigs available now. I am working on couple, like an image gallery supported by tags. Something like flickr.