Team 3322's website

[johnmaguire2013]

Hey guys,

Myself and a fellow member on the team, Matt Conto, have had no free time in the past week or so, as we've spent all of it perfecting our site. Let us know what you think, and if you have any suggestions, or find any bugs.

The one bug we currently know of is that the drop-out menus don't align perfectly on Firefox for Mac (but is fine on Firefox for Windows or any other browser for Mac.) If anyone has an idea on how to fix this, that would also be awesome.

Click here for our site: Team 3322, Eagle Imperium.

Furthermore, I hope to, at the end of this season, release our theme (for WordPress) under the MIT license, with some modifications to make changing the logo and social media icons easy. Have any other teams released some of their web content as open source? I'm a big supporter of free software (as in speech,) and with all the work I put in to the site, and getting it to work with WordPress, which wasn't a CMS I'm familiar with, I'd like to put it out there for other teams to use as a starting point of some sort if possible.

Anyway, enjoy the site.

[ChristopherSD]

From first glance, I would reduce the size of the Twitter feed, to avoid having an abundance of blank space at the bottom.

Other than that, I like the simplicity.

[johnmaguire2013]

Originally Posted by ChristopherSD

From first glance, I would reduce the size of the Twitter feed, to avoid having an abundance of blank space at the bottom.

Other than that, I like the simplicity.

Thanks. Originally it was even grosser before I could get a faux column thing going on, as the sidebar would extend down and the article container did not. I'll play around with the size of the Twitter feed and see what I can come up with.

[JoshSmith]

Wow, that is quite nice. A couple things I would look at. First, I completely agree with what ChristopherSD said. Second, maybe try to blend the left side background, the upper bar background (the bar with the FIRST logo on it), and the top-most bar on the site. That kinda stood out to me. You could also add a little more complexity behind the text (a very slight gradient?) to help keep it simple but also visually interesting. Third, at the bottom, I would also recommend blending the border between the footer and the navigation links a little more.

Otherwise, I really do like the site. It is very clean, not overwhelming, and quite professional.

[johnmaguire2013]

Originally Posted by JoshSmith

Wow, that is quite nice. A couple things I would look at. First, I completely agree with what ChristopherSD said. Second, maybe try to blend the left side background, the upper bar background (the bar with the FIRST logo on it), and the top-most bar on the site. That kinda stood out to me. You could also add a little more complexity behind the text (a very slight gradient?) to help keep it simple but also visually interesting. Third, at the bottom, I would also recommend blending the border between the footer and the navigation links a little more.

Otherwise, I really do like the site. It is very clean, not overwhelming, and quite professional.

Thank you for all of your comments. We'll definitely take them into consideration and play with things a bit.

[ace94x]

Its a nice site & very detailed. except with all that detail comes alot of reading and it starts to become jumbled. there is way to much stuff going on, on each page.

[johnmaguire2013]

Originally Posted by ace94x

Its a nice site & very detailed. except with all that detail comes alot of reading and it starts to become jumbled. there is way to much stuff going on, on each page.

Thanks for the comment. Any chance you could elaborate (e.g. which details do you think are superfluous and could be removed?) Thanks.

[johnmaguire2013]

I just wanted to thank everyone again who commented with suggestions. We won the Kettering Website Award, and our website will be moving on to States.

[JoeWithTheSpecs]

Hello,

Menu problem in Opera 11.61. Looks fine in Chrome, Firefox and IE.



Cursor is over the History tab when I took the screen but it happens on all of the menu tabs except Home, FIRST, and Contact.

Congratulations on the website award at Kettering by the way!

[johnmaguire2013]

Originally Posted by JoeWithTheSpecs

Hello,

Menu problem in Opera 11.61. Looks fine in Chrome, Firefox and IE.



Cursor is over the History tab when I took the screen but it happens on all of the menu tabs except Home, FIRST, and Contact.

Congratulations on the website award at Kettering by the way!

Well that is certainly not the intended way that should look. I am missing Opera on the computer I am using currently, and will check it as soon as I can install Opera. It may have to do with some changes I was making to the menus on the day that you viewed the website, and might have been fixed already. (I know, I should be editing locally, but my laptop recently broke and I don't have a good dev. setup at the moment.)

And thank you very much!

EDIT - Hmm, definitely still an issue. Thank you very much for letting me know. I'll fix it as soon as possible.

[subrc]

Your website looks amazing, and nice job using HTML5 too!

That said, you might want to see how your HTML outline looks from time to time. Here's what your outline looks like right now:

http://gsnedders.html5.org/outliner/...nerobotics.org

There are a lot of untitled sections in your document. You can easily title any section in HTML5 by giving it an h1 element. The outermost section is the body element. It would make sense to make the title of the body the same as the title of the website as a whole ("Eagle Imperium"). And of course, you can just set all these h1 elements to not display using CSS.

I had a couple really picky issues with spacing, too. h1 elements don't have margins, and you sometimes have empty p elements between paragraphs. I also really wish the margin on paragraphs was 1em and not .5.

Of course, I'm only making such meticulous comments because you guys did a great job overall. It's nice to see a team taking its website seriously.

[johnmaguire2013]

Andddd fixed. Still got it overlapping a bit on a menu, do to some margin-left not working quite as I'd like, but I'll fix that in a bit. Again, thank you for bringing the issue to my attention.

[johnmaguire2013]

Originally Posted by subrc

Your website looks amazing, and nice job using HTML5 too!

That said, you might want to see how your HTML outline looks from time to time. Here's what your outline looks like right now:

http://gsnedders.html5.org/outliner/...nerobotics.org

There are a lot of untitled sections in your document. You can easily title any section in HTML5 by giving it an h1 element. The outermost section is the body element. It would make sense to make the title of the body the same as the title of the website as a whole ("Eagle Imperium"). And of course, you can just set all these h1 elements to not display using CSS.

I had a couple really picky issues with spacing, too. h1 elements don't have margins, and you sometimes have empty p elements between paragraphs. I also really wish the margin on paragraphs was 1em and not .5.

Of course, I'm only making such meticulous comments because you guys did a great job overall. It's nice to see a team taking its website seriously.

Thank you for the comments.

Ah yes, a friend of mine, another student on the team, did the initial design and implemented it into HTML initially, with some bugs and not all the features done, and I then implemented it into WordPress, and him and I have continued to add slight features. I wasn't around when the initial bit got done and hence all the headers I haven't noticed.

I appreciate the link with the outline, and I will fix that too. However, I am slightly confused by your thought of using <h1> to title things and then setting it to display as none. While I do like to be semantically correct, this seems like a weird little hack to me. I've also heard that you should only use one <h1> per page. I will do some more investigating and Googling and then modify it as such. Thank you for the comment.

EDIT - And on the topic of being symantically correct, it makes most sense (I thought) to do this with headers.

1. Eagle Imperium - FIRST 3322 (or similar)
2. News
3. News Title
4. Titles within news post
3. News Title #2
3. News Title #3

I don't think we are doing that as it currently stands, and I should probably at least fix that, but that's how I've always seen the whole semantics thing.

As for the spacing, that's all the other kid as he did the actual design bit, I mostly just do the JS, styling it some, implementing it into WordPress, etc. I will definitely check out how it looks with the margins you suggested and talk to him. We are very open to suggestions like this and I really appreciate it.

The empty <p> elements are due either to one of two things: WordPress being funky with the way it handles paragraphs, or the fact that before I was on the website team, a lot of Google Sites content was converted over to WordPress. I've been trying to systematically go through and edit the Google Sites pages as they have a lot of oddities, such as random divs (sometimes unclosed), empty headings, paragraphs, etc. If there are a few pages you noticed this on specifically that you could give me a link or page title to? I'd really appreciate it.

Thank you again for all your comments.

[subrc]

Using multiple h1s is totally fine in an HTML5 page, and they are used to generate the document outline. Though, I'm not sure if anyone has written anything about using display:none to hide them.

That was just a judgment call on my part. I figure as long as the design of the website indicates what a section is (a primary navigation, for example), there's no reason to have the title show up. Then again, there isn't a whole lot of benefit to titling sections either, but I guess it's something to consider.

Once again, great job with the new website. Hope you guys do well this season.

[Dusk Star]

The menus are behind the text, or behind the picture. Chrome 19.0.1067.0
Other than that bug, great site! Wish ours was that good...