Code Orange 3476's New Website!
 

Hello everyone!

Code Orange has a new website!

teamcodeorange.com


I would love some constructive criticism and help debugging.

I am not sure what to do about the homepage, it just doesn't feel quite balanced.

I spent a bit of time making sure it works on screens of all resolutions but if you have problems please tell me. I know the menus do not work on touchscreens. I am working on that.

Thanks for looking! :D

Re: Code Orange 3476's New Website!
 

For a team about orange you've got a whole lotta blue....

Re: Code Orange 3476's New Website!
 

On my iPad, I see the header, then have to scroll way down o see any content

Re: Code Orange 3476's New Website!
 

Hi!
It looks really nice. Is the background just one big photo? It looks really nice but typically loading images that large slows the site down. It didn't seem too laggy but just if you ever encounter problems with it loading slow it might be due to the image.

I really like your use of pngs :) It's very streamlined. Nice overall. I did notice that the menu goes behind the embedded google calendar on the calendar page.

Colors look really nice. The homepage seems a bit off to me as well. I would make it so that the embedded video on the right side lines up with the header. I think that will make it look more cohesive.

Great job on the site!

-Anna

Re: Code Orange 3476's New Website!
 

Some of my thoughts -

You have all the right important content on the front page and a very solid header. I do agree with an above statement about how there is more blue than orange. While I like the anchoring effect the background has on the look of the page I think the fact that it is a blue wave forming detracts and distracts from your teams theme (unless, of course, your theme relates to waves). The page currents gives the impression that blue is the dominant color and orange is the accent color. The introductory paragraph is well done in the fact that it gives the quick facts about your team. You have a little section on FIRST (mainly just the logo and a link) but you may want to consider expanding it somewhat or tailoring so it matches the intro section about your team (and thus giving continuity). I do like the premium real estate you give to your sponsors and I'm sure they appreciate that as well. You video and slideshow on the front page are also both nice touches. I'm on a laptop right now and cannot comment on the touch screen-y-ness but with a resolution of 1366 x 768 the whole site looks good.

You grouped everything in the navbar into basically two categories and while the submenus are long the overall navbar is clean and neat. I would suggest that on the home page keeping the "Welcome" tab a link. Even if it links to itself or the link is simply <a href="#"></a> the link would give consistency. But this is a minor point.

On many of the other subpages the large orange text box gives a much more orange feel and using the same style of text unifies the site. Your about section is very much to the point, which can be effective. You display for sponsors well, although you might consider giving more information about each one (this is required although it seems to be a very popular practice among FIRST teams). I liked the amount of detail provided for the robots, most particularly the 2012 one (which has much more than the other two combined). For the award section, showing the award with an orange backdrop is a nice touch that brings in your team theme. Am I correct in viewing that there is only one video in the video section? I would consider adding more. Using Photobucket seems to be a fairly effective way to display your media and the headshots of the students and mentors are a nice personalization touch.

I too enjoy Google insets and liked the Calendar (which many if not most use) and particularly your team finder page. The team finder is something most don't have but is a really neat tool and not all that difficult with the Google Maps API (although judging by your source code, which I peaked at, you inserted a specialty map which was probably even easier than generating a map with markers.) Your resources section is off to a good start and I'm sure many more helpful videos or documents are coming.

Rad site.

Re: Code Orange 3476's New Website!
 

Code Orange is definitely one of our great coastal California teams, being from Dana Point and just a couple miles from the ocean.

You might consider the turquoise color from the pants your team wears might make for a better background. Or how about an Orange background with turquoise font?

Re: Code Orange 3476's New Website!
 

Thanks everyone!

Re: Code Orange 3476's New Website!
 

Thanks very much for your feedback! This was my first venture into Dreamweaver, so I am still learning. I will take your critique into consideration. :] Btw, there are many more videos coming.

Re: Code Orange 3476's New Website!
 

Ha ha, I am flattered. From what I have seen, turquoise text does not work very well on an orange background. It is very unfortunate for our color scheme.

Re: Code Orange 3476's New Website!
 

I actually like the background, it feels right.
I like the image displayer on the home page, though I think it would benefit from a small border.
As others have said, make sure you get that embeded video to line up within the borders of the body.
I'd make that black menu bar some shade of orange, it looks out of place.

Great start though.

Re: Code Orange 3476's New Website!
 

I'm fairly certain Rich was kidding.

Re: Code Orange 3476's New Website!
 

Yeah, OK... I can go with that.

I was thinking big font items, you could get away with, but not the normal text. So Ima going to put away my shovel now and stop digging.

Re: Code Orange 3476's New Website!
 

Thanks, I edited the orange background to line up with the video.

Re: Code Orange 3476's New Website!
 

Thanks! I actually used photoshop's "save for web" feature, so the image looks ok, but is only 108kb. I guess it could take a little while to load on a slow connection.

Re: Code Orange 3476's New Website!
 

I think the front page is easier to read now (with the blue textbox), but the About page and some others still have the orange box. I'd pick one or the other, and if you go orange, maybe tone it down a bit. Maybe I'm getting old, but it's really bright for such big boxes.

This is just a random idea, but if you want more orange, you might be able to find a sunset version of that background shot. I found a couple on a quick Google. Something like the first one here might work (just an example; watch your copyrights). Might let you make a more cohesive color scheme. It's a little confusing with all the blue, especially on pages with big text boxes where you can't see the center of the wave.


I'd hyperlink the header to direct back to the home page; it's more intuitive than clicking "Welcome".

Awesome job!

Re: Code Orange 3476's New Website!
 

Thanks, that is an awesome picture! I'll have to try to find a version I can use. I'll link the header when I get a chance.

Re: Code Orange 3476's New Website!
 

Your site scales funny on my iphone. I attached a screenshot to show you what I mean.

As far as I can tell aesthetically, the orange and blue isn't awful on the eyes - an impressive feat.

I'll let you know more when I can get on my pc.

Re: Code Orange 3476's New Website!
 

Thanks, I haven't optimized it for mobile devices yet. I plan on doing that soon. That screenshot is helpful though.

Re: Code Orange 3476's New Website!
 

Has anyone found an Easter egg?

Re: Code Orange 3476's New Website!
 

Every once in a while I see a mini Pipeline zip across the top of a robot textbox. Is that it?

You do have permission to post photos and full names of all your students, right? Just making sure.


Looks about the same as the iPhone screenshot from my droid, fyi.

Re: Code Orange 3476's New Website!
 

Yes, one student's mother actually told us that she did not want his picture on the internet, so we obliged. I am in the process of making a mobile webpage right now.

Re: Code Orange 3476's New Website!
 

The one thing that really strikes me is the huuuuuge swath of negative space on the front page, especially when viewing on a 16:9 or 16:10 monitor (it looks a lot better in 4:3). This isn't a massive issue, as overall, the site looks pretty good overall, especially the background, which really gives it a dynamic coastal feel.

There does appear to be some image stretching issues on the background, however, which is especially noticeable when alternating between 16:9 and 4:3. Again, just something to consider. It's more of a detail that a design issue. For this being your first stab at Dreamweaver, you're really doing great!

Best of luck in all your endeavors.

Re: Code Orange 3476's New Website!
 

I like your site for the most part.
If you're Team Orange, your background should be orange! (Or maybe orange text with a black background might look nice). We have the same kind of color scheme as you guys, so feel free to take a look at my site (www.teamneutrino.org) as that might give you some ideas to work with. I went with a gray as a background and orange and whites as text. and it makes it look really professional.
Feel free to email me if you need help and I'll see what I can offer :) BTW, I would suggest you stay away from HTML. My 4-H club used to be like that, but then no one but me knew HTML, so I moved everything to a CMS (WordPress), and the backend is much more kid friendly. :)

Re: Code Orange 3476's New Website!
 

I assume you mean staying away from purely static HTML. Avoiding HTML entirely would make displaying the site in any browser rather problematic.

Re: Code Orange 3476's New Website!
 

Bahaha, yup. (Although there is always flash or php or java, although even those would use a little bit of html I'm sure...) But using static HTML is a pain in a robot's butt :P I suggest just going with WordPress. I guarantee you'll be happy you did :)