School Site

[jcombs_31]

This is a project I've been working on.  There is still some work to be done, but you can see most of the layout and pages.

 

http://www.coralgladeshigh.com/v2

 

Let me know if you notice any major issues or have any suggestions.

[cupidstoejam]

jcombs,

I love the feel of this site. Great color scheme!!! Great nav!! This is prob my favorite design I've seen in here so far. A few things to think about:

 

1. The site doesnt validate.

 

2. some of the links in the top nav dont go anywhere. ie: Schedule-early release, Students-clubs-class-college visits, and all of Athletics.

 

3. the calender hover tool-tips are sweet. But when clicked, open a window that goes nowhere.

 

4. this is no big deal, but more funny than anything. your background.jpg is awsome, but has a cats head in the center. nobody sees it, but just kinda funny that it's there 

 

5. your meta data needs to be shaped up for search engines.

 

All-in-all, its a great looking site dude.

[jcombs_31]

Thanks for noticing those things.  I'm actually still waiting on data for those pages that go nowhere.  The validation is a problem with the calendar tooltip that I have to fix, otherwise it should be clean of errors.  The info is being put into the title attribute for the tooltip to read, and it doesn't like the html that is in there. 

 

I know what you mean about the background, just playing around and figured people on slow connections might see it as a page loads, otherwise it served no purpose to put the jaguar head there in the middle.  It was actually because I deploy a user desktop that look like that but the jaguar is bigger.

 

I'm not really concerned about the meta, but I'll probably add it in. 

[DarkWater]

You know the picture of the two girls holding the certificate?  You may want to fix the right girl's head.  You messed up when you were cutting it out of whatever picture you took it from. =P  Otherwise, I think it looks pretty nice.  I'll critique it more later, I just don't have too much time right now. xD

[chordsoflife]

Best high school site I've ever seen. Props.

 

To add something productive though, you might want to consider either

A) Changing that huge list of mailto links to "name (@) domain.bla" or

B) php contact forms! Might take some time, but hey, that site didn't build itself, and you said you were waiting on some stuff.

 

I just figure a bunch of staff and administration probably wouldn't enjoy an inbox of spam.

[Zane]

It doesn't seem too long ago when you first redid the website for these people to begin with.  Now you're redoing your own design.  I think it's an amazing upgrade.  I'm pretty sure that by the time everything's said and done .. the page will validate and what not and you will have already asked us to critique a few more logos here and there.  I really like the contrast in this one as opposed to the other one.  Great color scheme.

 

My only question is....not that this one doesn't look spectacular....what was wrong with the first one?

 

[peranha]

When you hover over dates, it puts the top information behind the address bar.

 

[attachment deleted by admin]

[jcombs_31]

Thanks everyone for your replies

 

@ DarkWater - It was a quick cutout for the picture on the main page, I just wanted to get something done to show the principal.  I may spend some more time on it, but that section will change frequently and it will be a thing of the past before you know it.

 

@ chordsoflife - Thanks for the compliment, I take pride in the fact that it is better than most High School Websites, at least in my opinion. As far as the links, trust me I know it is not the way it should be, this was a debate I had years ago when the original site was built, but I just copied the content from that page over, I'll see about getting it changed.  They are already getting the spam I'm sure. There was a bit of javascript putting it all together, but nothing that is really going to stop spam.

 

@ zanus - Nothing was really "wrong" with the last version, but it is a few years old and I'm going to try to build something that I can market to other schools in hopes I can get more work from it. Aside from that, there is a new boss that wanted a fresh design for the school .

[jcombs_31]

validation is fixed.

[nrg_alpha]

Hi jcombs... very well done site! I like this one. Clean and loading was 'half decent' (even on my lowly, ehem.. dial-up). Good stuff

 

Here are some points I'll add to the others.

 

- font-size scalability. When I use firefox set to scale fonts only (not the surrounding graphics as well) and I hit Ctrl plus +, the entire site's structure breaks immediately (not severely mind you). It is worse however in Google Chrome (yes, I know it's a Beta.. but a damn good one IMO). It makes me question core site structure integrity, as sites should scale in similar behavior (talking font only scaling) across major W3C compliant browsers. While this critique is not a major one, it can be for some people who need to enlarge their font sizes for extra readability. Designing a site with font size 'breathing room' is never a bad idea. Perhaps merging some related menus together, or moving one of them to a link on the side or something? Again, idea being designing with some room in mind never hurst- related to the font size scaling (which reveals more about a site construction than most people realize), a few things are also observed:

 

- The 'Pinnacle Internet Viewer' could have simply been text with a pixel-wide horizontally tiling background instead of an entire graphic.

 

- When the font is increased, reveals that the div containing the entire menu does not scale with it. Is it a fixed height? Having a flexable div with a background colour as well as a tilable image ensures that when text gets larger, the div can expand without anything looking broken.

 

- I noticed that your header is comprised of more than one graphic. Keep in mind that each unique graphic that the browser has to download adds additional HTTP request headers... this translates to more 'chatter' between browser and server.. makes things slower. Downloading the least amount of graphics by combining them makes for lighter graphics (as the file size of one larger graphic is smaller than the file size of separate graphics that make up the equivalent image).

 

- while your site wasn't terribly slow in downloading to my browser, I would invite you to check out using Yslow for firefox (you'll need to install firebug first however, as Yslow is a component of this). These tools are invaluable in helping you find the trouble spots in your site as far as optimizations go. I highly recommend them!

 

There are some performance issues:

 

- I noticed your .php files are not gzipped. by adding this line -

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start();

to the top of your php pages, your server 'should' gzip php files for browsers that support it (browsers let the server know which compression formats it supports in the request headers). This can cut down download sizes. If this doesn't work, then odds are your server is not configured to gzip php files (not sure how common this is, but I understand that gzipping is pretty much used on many hosting packages).

 

- having a glance at Yslow's performance page can shed plenty of light on how to better optimize web pages.

This includes putting javascripts on the bottom of your pages, using CSS sprites (sheets that contain related graphics to reduce HTTP request / response headers, as I noted ealier), minifying your javascripts, etc.. All these performance tweaks add up. It makes sites load faster, and also saves on bandwidth

 

Overall, a damn fine looking site. I really like it.. very professional looking.. Kudos.

 

Hope my anal performance opinions helps out lol.

 

Cheers,

 

NRG

 

 

 

[jcombs_31]

nrg_alpha

 

Thanks for the detailed response in regard to optimization and scaling.  I should state that I've taken a lot of liberties in designing this site.  I typically do not use such large imaged (e.g background) and will typically slice buttons (pinnacle), but did not in this case. 

 

As far as using multiple images, I think that is a mute point, it may have to download 2 images for the header/logo, but they should be cached after the first download, and most visitors to this site will be frequent.  I don't think the php files really need to be gzipped, the scripts aren't that large and I'm mainly using php for some simple structure.  There is/will be a lot going on in the background as this becomes CMS driven, but I doubt there is currently much overhead.

 

As for the font scaling, this is something I've never really spent the time on that I should, but overall I'm not concerned.  If someone has to increase the font and it breaks the layout, they'll still be able to get the info they need.  Now, this isn't an ecommerce or small business site which is why I said I've taken some liberties, so I do completely understand your points, but in this case I probably won't do much about it.

 

Again, thank you for taking time to bring up these details.  Some of this has actually been a rush to get it online, so over time I may look into fixing some of these issues.

 

 

EDIT:

 

Just installed and checked on google chome, that is not acceptable behavior...

[Maq]

I think you did a really great job in almost every aspect of the site.  I think the large images are typical in a school site.  If you look at other school sites they are similar.  Good job!

[nrg_alpha]

EDIT:

 

Just installed and checked on google chome, that is not acceptable behavior...

 

I agree.. with Chrome, your site breaks quite heavily once font size is increased by just one notch. Again, it is a Beta  browser.. so we'll have to see when a 'stable post RC' verison of Chrome comes out.

As it stands though.. for a Beta, Chrome seems quite solid. Performed well on acid test 3. While acid tests doesn't necessarily imply complete 100% W3C compliance, its a good indication of Chrome's capabilities as far as supporting features is concerned (second best of all major browsers already.. not bad).. IE has been around how long? Never mind.. I'm getting off topic here..

 

As it stands right now, Chrome is not as large as Firefox or IE (but something tells me this could change years down the road). So for now, so long as students don't browse with Chrome and bump up the font size, you're site is safe

 

Cheers,

 

NRG

[jcombs_31]

Still some things missing, but I went ahead and put it online.

 

http://www.coralgladeshigh.com

[nrg_alpha]

It's an excellent site. Just one thing with the sliding homepage slideshow.. I would consider a longer interval between the next slide.. I was starting the read and then, ZIP.. over to the next one lol Didn't have time to read it all.

 

Good stuff thought.. the school should be proud, as should you!

 

Cheers,

 

NRG

 

EDIT.. nevermind about the slide thing.. realized just after I submitted this post that the links bring the attention to the desired slide.

[jcombs_31]

Just something interesting in references to text resizing;

 

http://mezzoblue.com/archives/2008/10/07/zoom/

[nrg_alpha]

Just something interesting in references to text resizing;

 

http://mezzoblue.com/archives/2008/10/07/zoom/

 

While browsers are becoming increasingly more capable of scaling up the entire site (images and all), I still think being responsible when designing sites to respect the possibility of text-only scaling is not a bad thing. I think there is a couple of issues of having everything scale up.

 

- not all browsers do a good job at scaling everything up. Some browers either a) scale images like crap, or b) the speed performance takes a hit (I'm eye-balling you, Opera, on the graphics point).

- sites that might already be a tight squeeze on a 1024x768 monitor (yes I know, wide screen is becoming the norm.. but there still are CRT monitors out there) default size will mean the need to scroll horizontally as well as vertically (generally speaking, horizontal scrolling is frowned upon and is a no-no).

- even with enough room and smooth graphic scaling, some users may only want to see the text larger, and not need nor want to see anything else get scaled along with it (I for one am in that boat).

 

While I concede that the chances are slim in text-only resizing, I still think it best to support that (what some designers may think is a comfortable text size, some viewers may wish it was a notch larger). I also think that by giving your design some room and flexibility to expand, you also reduce the chance of clutter by keeping in the back of your mind that others may still prefer to use text-size only.

 

Ultimately (and simply put), I don't think it hurts to take these considerations into account when designing websites. At least not IMO anyway. If the web industry indeed starts heading in the way of pixel sized text in their design exclusively, I personally feel that it is more attributed to laziness than anything else. Of course, again I am strictly speaking from my own personal point of view.

 

Cheers,

 

NRG

[steviewdr]

The nav drop-down menu/list is broken in IE7 on the index page.

The drop-down menu which appears when you hover over "School Info", "Students" etc. is behind the flash app.

 

-steve

[jcombs_31]

Thanks stevie, this is a problem with the positioning conflicting.  I fixed it before, but I recently changed the slideshow to the cycle plugin and caused the problem to come back I guess.  I didn't catch this when I made the change.