Results 1 to 25 of 139
Jan 7, 2011, 15:32 #14
- Join Date
- Nov 2009
- Keene, NH
- 23 Post(s)
- 0 Thread(s)
First off it seems to load pretty peppy - that's good. 153k is a little over my upper limit for page design, but given the number of content images that's entirely acceptable especially since it's only 18 separate files.
Appearance-wise it's problematic due to the use of absurdly undersized fixed metric fonts. Anything less that 12px is typically illegible, I get squirrelly at anything under 14px, and you should NOT be declaring fonts on the content in PX in the first place. The WCAG recommends %/EM so that handheld users aren't stuck with fonts too big, and large font/120dpi (like myself) or Win7 large/144 dpi users (like on my media center) aren't diving for the zoom when they land on your page.
If you are going to link an external stylesheet, INCLUDE a MEDIA TYPE. Likewise even when just developing a page it helps to NOT get in the habit of putting ANY CSS in the markup... It's actually more work and more confusion -- but remember this is coming from the guy who thinks tabs are a colossal step BACKWARDS when it comes to text editors -- open up the CSS and HTML in two SEPARATE windows so you can edit them side-by-side. Beats the tar out of scrolling up and down.
Likewise, I would NOT be playing the stupid "content first at ALL costs" nonsense of putting the main menu after the content. That is rarely worth the extra effort and is proabably part of why you have multiple DIV around that UL for NOTHING. Search engines are smart enough to realize a UL full of links is a menu, and that's what 'jumpto' menus are for in terms of accessibility -- not just for getting past the content, but also for things like narrow-screen display using 'accesskey menus'.
Those images not only have absurdly undersized illegible text in them, they are presentational affectations to the text and as such have NO business being in your markup... much less that if they are all getting the same STYLE applied to them, get that the devil out of the markup and into the stylesheet too so you are only saying it ONCE, not FIVE TIMES.
This is made even more confusing by the sidebar having what appear to be content images that are being loaded via a class in the CSS -- you have those backwards!
The dropdown menus should be nested IN the menu, and not placed after it with DIV's around them on what should ALSO be lists.
You also seem to be using presentational classes -- stuff in the HTML, and this includes class and ID names, should say what things ARE, NOT how they are going to appear; as such classes like "floatleft" are so pointless, you might as well go back to HTML 3.2 and say 'align="left"' -- completely missing the POINT of separation of presentation from content.
Your use of heading tags is completely nonsensical. NOTHING in the footer qualifies as the 'start of a new subsection, it is improper to skip heading levels, so there is ZERO reason those should be h4 and h6 -- just as you should NOT be using scripting to emulate target="blank" as the REASON it's deprecated is you shouldn't be forcing that choice down the users throat in the first place. They want it in a new window, they can middle-click or shift-click if they're a Mac... ok, I won't say the word I was going to use. They also are not child subsections of "why choose" which is just PART of why I typically say using a content area element as the H1 is in fact wrong... also "wrong" is the use of B tags for what should be headings.
Also, if your TITLE attribute is IDENTICAL to the text inside the element you are putting TITLE on, there is NO LEGITIMATE REASON to put TITLE on it in the first place!!! (I keep seeing that one, what the?!?).. well, unless you are putting accesskeys on it and don't want the URL to show up on handheld or Opera accesskey menus.
Also, the image replacement method used on that heading doesn't work when images are disabled, defeating the POINT of using image replacement in the first place!
The drop shadow is ridiculously large a file -- while that's a 'easy' technique for applying one, it's not exactly internet friendly thanks to the 18k of "nothing". One of the few times I'd seriously consider two separate images and an extra wrapping div to do that -- it might be a couple hundred bytes code, but it would cut out around 17k of image filesize.
To that end I also can't figure out why you are using images for that main menu -- unless it's to make it intentionally hard to read.
You should also back up off the use of absolute URL's including the domain name. A simple "/" is all you need on those, saving bandwidth and making ZERO difference to any browser or search engine. (even if some SEO sleazeballs claim it does, that's 100% myth)
The non-breaking spaces and vertical breaks on the footer menu are also not exactly a great idea... that too should be a list.
Using line-breaks to divide up sections inside P tags is just bad practice. You are basically using line-breaks to do margin and/or padding's job.
Finally -- (c) copyright? Isn't that just a LITTLE redundant?
So, that taken into consideration, my approach to that markup would probably end up looking something like this: