Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Silver Creek High School Review

    scweb.esuhsd.org
    Many of you have seen bits and pieces of this over the last few months. I have launched the site now, after much testing and editing. I think this is as close to "final" as this site will get. That is to say that it will always be changing, pages added and such.

    I am not married to this site, so don't feel the need to edit your comments. But please do tell me what has been done well. Chances are that I copied that code from someone else, but it will still make me feel good. I created the frame of the site quick then just decided to stick with it because it was easier than redesigning. The information architecture (thought that phrase died in the 90's, eh?) needs some work, but it will suffice.

    I'm really just curious to see if it works on all browsers. I'm not worried about NS4 and I know it looks like crap there. It's navigable, but not pretty at all. I look forward to your comments. Thanks, everyone.
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I remember this guy

    You've done a great job making the site tableless -- everything seems to flow the way it should. The all my Mac browsers show it the same, except Opera 7.5 -- Opera puts your orange menu links larger in height than the brown menu bar, but only by about three pixels. The creator of Opera is one of the founding fathers of CSS, I do feel it's rather buggy, though, in regards to some of it's display, and since it isn't a major issue, I'd ignore it, it doesn't look bad, and most would think it's how it's supposed to look.

    As far as code, it's majority clean, but it would be better if it was fully semantic -- header tags for some areas, those links could be in list elements (especially since some of the text extras in those links are outside of the a tag, but sitting in the div -- that could cause some funkiness), the image tags in a semantic tag, the address could be in an address tag (<address>) instead of a div, and that would eleminate the need for another div, and you could drop that id and just make it address {} CSS. These are just icing to spruce up some things under the hood as you move ahead. You can also put in some Meta tags that are not needed but useful to search engines:
    Code:
    	<meta name="Description"  content="Description of your site that sometimes shows up in search engines" />
    	<meta name="Author" content="Your name here" />
    	<meta name="copyright" content="2004, your name and school" />
    	<meta name="revised" content="name and date" />
    	<meta name="Expires" content="never" />
    You may also want to make accesskeys and tabindex keys for handicap users - you've already gotten the fonts to ems, so this would just be adding to it. You may also notice on some IE that the ems get funky and may look different -- in your body css put:
    Code:
    font-size: 100%;
    This will get IE to function properly again.

    Other than those little helpful hints, I think it works just fine, and those are just improving it, not argueably a necessity.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    Looks great. Nice coding and I second what bradyj said. I would like to add that in Firefox on Linux (mdk10), the address touches the top nav. Might want to move that down a couple of pixels. Otherwise great job!

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Folks, thank you. I will take that under advisement. I was already thinking that the menu should be a list (in fact, was shocked when I looked back at the code to find it wasn't!). Yeah, I see what you mean by "text extras." I'm thinking of a way to move those into the CSS (since that's presentation, not content), perhaps with background images or something.

    I'll look into the <address> idea. And I'll put an extra pixel or two on the top margin to bump it down a bit.

    Header tags: gotcha. I'm thinking about that now. The <span> in the banner should go and become <h1>, that kind of thing. Right. There are only about 14 pages on the site now and this is as small as it will be, so I'll make changes now and just copy/rename pages for the future.

    And image tags in a semantic tag? Whaddaya mean?
    -ts

    Edit:
    I put in h1,h2, and h3 tags; put one of the menus in a list (the home // map // contact one); the other menu I will deal with later, though I know it needs to be done. I also used <address> and dropped the div. That's it for now.
    Last edited by tsguitar2004; 09-12-2004 at 06:01 PM.
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tsguitar2004
    And image tags in a semantic tag? Whaddaya mean?
    -ts
    It'll make more sense to a screenreader if the image is in a p or something that's relative to the document, the div won't mean much too it -- I see the changes, it looks ALOT better under the hood!
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The design is lacking in some important areas. Visually, that is.

    The large image featured on each page sits against a black background. The banner area on top also has a black background. So, when your images get cut off on top, it looks like a mistake rather than something intention. Like, part of it just got deleted. Also, the right hand side of the images rests very snugly with the content area without overlapping it. This creates a visual tension that was taught to me as a "tangent". Regardless of the term, it's a very valid consideration. Things need room to breath under certain circumstances. Sometimes if they rest to close they sit straddling woulda and coulda and your eyes can't stop thinking "PICK ONE!"

    I would also suggest putting your grey gradient background tile as the background of the body element, not just your content container or whatever you have it applied to now. That way, when the content doesn't fill the viewport, at least that tile will fill it. Again, at the moment it looks like a mistake, and it's because of the shadow effect in the right hand part of the tile. When it cuts off on the bottom it looks like it just got hacked off mistakenly. If you don't want it to fill the screen, at least consider some sort of image to "cap it off" so to speak.

    As people have said, the code is pretty well done, though! I randomly chose this page to validate: http://scweb.esuhsd.org/activities/index.html

    One teency error with a heading marked up like this: <a><h1></h1></a>

    Last edited by ]|V|[agnus; 09-23-2004 at 05:46 AM.

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hrmm... The large image on each page, along with the top navigation elements, is actually on a dark red background. Our school buildings are painted white, with a dark red banner around the top of each building, hence the color choice. I'm hoping that the difference in color makes it look like the top banner (with the SCweb graphic in it) is a cap, truly a banner to the page. I get what you're saying, though. I just don't see a way to fix it. I can't make the red any lighter, as that shade of red was picked for a specific reason (the building color) and the top banner as a color other than black throws the design out of balance for me. I looked at making that a lighter color early on. The difference between those two colors isn't great enough, though. Maybe I'll just add a border-bottom to that top banner of a lighter color to distinguish between the two colors (just tried that and I don't like it).

    The right side of the images... So a bigger margin-left for the content area, is that what you're suggesting? I can see that. And easily done. It's 20px right now and I think that increasing that to 35px works.

    Yeah, right now that grey gradient and the right hand bar are two different images. I can change that and it makes more sense to put it in the body. Good call. I thought of doing that at one time and never got back to it.

    Oh! That <h1> error needs to go!! Nesting error, eh!?. I must have forgotten to revalidate when I made a few changes!! I'll get on that this weekend. Cheers, all!
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tsguitar2004
    Hrmm... The large image on each page, along with the top navigation elements, is actually on a dark red background.
    Ha! Makes sense. I do have a slight color blindness to shades of red and green, the closer on the spectrum they get to white or black usually. On top of that, my monitor at home is, oh let me see... *eight* years old. It loses a lot of red in particular, as a matter of fact.

    I think I need to learn to ignore color on this thing. Haha..

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah! Good to know. I was looking at the red and didn't really see the trouble you highlighted and now I see why, no pun intended...
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just an update:

    I've done a ton of work to the markup and CSS (I still haven't eaten dinner tonight), taking almost everyone's better advice. Thanks to everyone for the help. This was my second CSS site and I think it came off quite nicely.

    I learned a lot and am already shaking my head at the young, naive ts's coding practices as I look back. What was I thinking!? Thanks, again.
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tiny text

    I won't comment on the code since that's covered enough already; I'd like to make some (IE related) observations however:

    In many places (like the secondary nav bars), the smaller texts shrink to positively illegible; the body text could be slightly bigger, too. I use the "smaller" text size setting on my browser since this works best on the majority of sites; when I bump up to "normal", the body text turns to humongous - really ugly.
    I'd recommend enlarging those smaller text sizes to something a lot closer to the body text size.

    The top header with the "SCWeb" graphic and the main nav extends beyond the right side gradient, which looks like a mistake; you may need an IE fix for this.

    The main graphic on the left features a wide variety in border shapes and widths, and the cut-offs vary greatly, too; I'd like to see a bit more regularity there.

    Lastly, I'm not very impressed by the rather dull, grey background (yeah, I know it's a gradient, but the majority of it behind the main content is greyish).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Overall the colour scheme is depressing Black text + deep grey background = unhappy feelings!

    It sort of looks Halloween-ish, and a big annoyance is that your side drop shadow is covered at the top by the header. And that feature graphic on each page does look weird with the top/bottom of the oval chopped off.

    Background hover colours on links NEVER look good, because the look so claustrophobic stuck in those wee boxes with no padding. Padding the links on :hover would just screw the layout, so maybe just stick to switching text colour.

    Markup looks good, save for some really weird indenting and quadruple line spacing here and there. Hard to avoid that though.

  • #13
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it. The trouble is that the school colors are black, silver, and orange: distinctly Halloween colors! And yes, I plan to take off the white background on :hover. I agree with you.

    As far as the grey background, I'm not quite sure what you'd rather see. Is it the particular shade of grey that troubles you or were you hoping for a white there?

    Anyhow, thanks for the input. The client (work/school) is happy, so I'll let the design rest for a while until I get some inspiration. And yes, the header overlapping the background is intentional. I wanted some kind of banner to top everything. Mayhap I'll look into getting rid of the dropshadow on the background, then, so it looks flat. And the inconsistency in the circle borders on the pictures was to mimick the design of the school yearbook.

    I see what you both are saying, though, and I'll look at a way to liven the design up a bit. Maybe I'll reverse the fade on the background to a grey-to-white. Until then, I'm happy with the markup and it's far more useful than what was there before. We actually have parents visiting the site now! That didn't really happen before.
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #14
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I lightened up the background gray color and made that right border go all the way up the screen (I shrunk the width of the "banner" elements). I'm having trouble with a little shift of the address and trail navagation elements on pages with no left-hand image now, but that's just in IE6/pc. I'm working on that one, still. Tomorrow I'll check the site on a Mac and (hopefully) I'll be pleasantly surprised. I won't be shocked if the widths play out differently on a Mac, though.

    Anyhow, if anyone's still reading this, take a look. You should be happier (though it's still Halloween-ish; not sure how to remedy that one! No color harmonizing sites are giving me much to deal with) since the site's a little less gloomy. Just a little...

    Next is my battle with the left-hand images and those inconsistent borders!
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •