Well, trash it with your constructive criticism, that is...It's soo hard finding someone that will critique a site honestly....Dont hold back! Anyone else can put their input in also http://bayside.hs.brevard.k12.fl.us EDIT: most of the main pages have yet to be re-done by me, so try and stick to the main page. I know, the site totally lacks cohesion. Thanks! Phire
sure...just to answer some pre-questions.... No i didnt generate the code Its not my javascript Yes I know the colored scrollbars are an illegal css function
The design is pretty clean, I don't really find too much fault with that. I see you using the opacity filter (IE specific) but the effect looks just like a JS rollover. So you are trading a big CPU hit on the client for a little smaller download from the server. The opacity seems to be transitioning, not fading up slowly. You have a timeout set to step up the opacity, but the step size is set to 200 (I thought it ran 0-100? ) so it's not fading gradually. I like opacity filter stunts if they're tasteful. How about using the mouseover to fade a different target image in and out of your left navbar instead? I'd suggest using text for links too, although those GIFs in the navbar look well-optimized. OK, markup. Your DOCTYPE decalaration seems inconsistent with your markup. Looks like you're adhering to XHTML, but you declare <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <script type="text/javascript"> is the correct modern usage. You use <FONT> tags, which are now deprecated. But you don't do it too much. You inline the style for the opacity filter when you don't need to since you have a proper linked stylesheet. All those have a common class, add the opacity to the rule for that class. You have <center> tags, but you also have the correct <div align="center">. alt attributes on your image tags would be helpful for accessibility, and I'd be surprised if you don't have accessibility requirements given that you are in the .k12.fl.us domain. Empty table cells are a syntax error, and you have a couple: <tr> <td align="center"></td></tr> (that whole row can be blown away) Does setting the height & width to 100% in a TD do anything? And attributes vales must be quoted to parse as valid XHTML. <td height="100%" width="100%" valign=top> Graphically: The different depths on the dropshadows on your title graphics looks really odd to me. Dropshadows are quite the cliche now (although doing them on text with a filter in IE is pretty cool). I like the collage of photos. I like the black background on the left navbar, but why does it not extend to the bottom of the window? Black and white background is very strong visually. I approve. The trick with the 1px tall GIF is pretty slick, I haven't seen width="100%" on an IMG tag before. I will be using that one. However, I'm not sure the layout needs the horizontal rule in it. I'd prefer to omit it, and maybe use a bit more whitespace there instead. The layout is pretty strong and simple, so I think removing the horizontals will just strengthen and simplify it. It's pretty good. no major issues, just minor ones. There is a gecko way to do the opacity filter, btw. I'd suggest working on that and losing the "best viewed" text. the opacity filter would be pretty righteous applied to those small JPEGs if you could fade them in on mouseover.
viewing from opera6 and looking primarily at the front page a) javascript things on menu don't work in opera... no surprise b) YOU HAVEN'T SET THE BACKGROUND COLOUR... it looks crap in my standard grey and i don't like it first rule is to set background colour c) you have put the <link> tag in the <body> tag... the correct position is inside the <head> tags d) your .css file has some weird stuff in which is unnecessary... note i didn't actually go thru your css... a decent css editor will tell u if your compliant and syntaxtically correct e) the linked pages on the menu on the whole don't follow the format of the front page... it'd be better being the same throughout f) as linear said it seems fairly confused about the markup.. such as somethings look like xhtml compliant and in places you use capitals in tags and missing " around attributes g) rounded corners on the menu bar may look a bit nicer h) there isn't any site description or text on the front page... when i goto a page i wanna know in a couple of quick lines what its about - when i first saw the site i thought it was a page for the schools football/baseball/basketball (which ever bears are) team and not the main school website i) normarily i'd prefer to see news or at least last 3 news stories on the front page... for ppl to see quickly anything new... while mainting a page with the archive. j) i'd have prefered to have seen an 'unrestricted' layout so it stretches the width of the screen... i get a lot of blank space here and i'm only on 1280x1024 when i'm normally on 1600x1200... and unrestricted layout is good for smaller resolutions as well as large ones k) lastly, the girl looks a bit lonely on the last line of the collage kthnxbye
Man you should see how vicious hardocp is about stuff when I ask them to critique...they say **** like "it just sux" Anyway...thanks for the critiquing everyone...had a few questiosn though. *Best news script? I have tried a few, including newspro and oxynews and cant seem to get them to work, mainly b/c I dont know IIS and cant really troubleshoot it. I get internal 500 errors. * I dont know Xhtml, just some compliance, if that makes sense. Like " <br /> " Whats the Best Tutorial? * GOD I hate the advice they give in the tutorials on htmlgoodies.com. This is like the 500th time they've said wrong stuff and I stupidly put it in my code. They are the reason for the link to the css in the body tag, Alaric * Is there any better image filter that is crross-browser compliant? * CSS Validater? Where? * Does setting the height & width to 100% in a TD do anything? And attributes vales must be quoted to parse as valid XHTML. Then how the hell do I get the data cell on the left (the whole page is one huge table) to extend all the way down to the bottom? The black nav bar. This is frustrating. .What would be a better way to code the layout? Frames?
depends on what you got available... perl? asp i saw... php? mysql? try a few from www.hotscripts.com www.w3schools.com www.w3schools.com will sort you out http://jigsaw.w3.org/css-validator/ please don't use frames.... i don't mind it not being full length but it should be possible... i have no time to actually do a layout tho... i can't help u with the javascript... mebbe linear can
Here's how my old pal Mr.maX does it: Code: isIE = (navigator.userAgent.indexOf("MSIE") >= 0) ? 1 : 0; isMozilla = (navigator.userAgent.indexOf("Gecko") >= 0) ? 1 : 0; function maxGetOpacity() { if (isIE) { return arguments[0].filters.alpha.opacity; } else if (isMozilla) { return parseInt(arguments[0].style.MozOpacity) } } function maxSetOpacity() { if (isIE) { arguments[0].filters.alpha.opacity = arguments[1]; } else if (isMozilla) { arguments[0].style.MozOpacity = arguments[1]+"%"; } } And I looked at it and it would seem to go from 0-100 not 0-255. Check here to see that opacity junk in action. opera is still out of luck, but at least you can catch the gecko users. A body background image would do the job (set it in the stylesheet please). Setting the height of a table cell has essentially no effect because the browser will do whatever it wants. As a side effect, Alaric gets to see a nice background in his opera. It doesn't have to go to the bottom, but like Alaric sez, you caoul dmke you layout a bit more 'fluid' so that peeps who use large windows see something meaningful. Check this out for fluid layout without any tables: http://www.glish.com/css/
one last question...that opacity filter....do I have to put a tag inside the image tags? if so, should I just grab the code off that guys site?
My philosophy about such things: Let the stylesheet do the work. The client will cache it for you, so you can save those few bytes by setting up a class selector like <img class="fadein"> and put the filter crud in the rule in the stylesheet. Inline style when you have a properly linked stylesheet is pointless.
Why are frames so nasty? Is it just a preference thing? Reason I ask, is it seems they'd be quite handy if you have a graphical navigation tool. Load it once, and you don't have to see the friggin thing load everytime you go to a new page. I absolutely detest that, esp. if the page is dead slow.
you don't have to see the friggin thing load everytime you go to a new page. I absolutely detest that, esp. if the page is dead slow. thats the problem, well not a problem, more like an annoyance with our page. What if I split the page into 2 big tables? That would allow rounded corners on the left navigation........
Frames b0rk printing completely in most cases. Unless you really take care to set things up right. It's also a maintenane headache to have to specify a target attribute for each and every anchor on your site if your site is more than a couple pages. Besides, if you've done your job and set height and width attributes on your img tags, the redraw should happen so fast that its unnoticeable since all the images are in cache anyhow. I'm also opposed to images that are just text, although at least in Phire's case, they aren't huge. Most people make a 8-9k graphic to represent a dozen bytes of text. I'm opposed to rounded corners. If you haven't decoded it yourself by now, I'm very much into lean and functional designs. Round corners are just eyecandy and can really slow your page render down since every table becomes two tables. One good reason to use multiple non-nested tables is to create a 'splash screen' effect with a smaller table at the top of the page which renders very quickly before the rest of the page loads. Your users will think that your site is very responsive. Amazon was the first big site to do it I think. Make the top header slice of your page a full-width table, and close that table before you open the body table. It's a cool perception management technique. I think this could work for you since your bear logo is about the same height as the banner logo. Another cool trick is to preload the image cache while distracting the user. You've got some cool things to look at on your front door page, let the user look them over or read some text while you load images into his cache in the background via a Javascript. The trick again is perception management. Make sure you don't kick off the preload script until the page load is completed or you'll achieve the opposite of your intended effect. Disclaimer or terms and conditions pages are great for this trick. I think the stat link is slowing things down substantially. You may want to benchmark with and without it. Do you not have access to the server logs?
I tried some of that stuff...didnt work out as I planned though EDIT:w00t! I used CSS to rid the WHOLE page of tables at this point! http://bayside.hs.brevard.k12.fl.us/indextest.htm
Linear: curious about that opacity filter....what code do I need inside the css file or inside the img tag to make it work? I assume I just put that filter into the <head> of my index.htm but I need to know how these work. I understand I wont be using inline style so what do I put into the css file?
