d-programming-language.org using olny CSS

[Daniel Keep]

Tiberiu Gal wrote:
> hello again,
> I dropped all my tables out and switched to css. you were all right, this site
> must be as light as posible ...so:
> http://dworks.marte.ro/dm/template.html
> 
> this one is nick's template with a bit facelift and wearing make-up.
> this one does not validate yet; it could and it will later. just look for the
> design, colors.
> I modified nick's design to make this one, but i think we can agree on some
> general rules, so many design schemes (or themes) can be made out of css... so
> anyone can see d-programming-languge.org in the colors he likes most.
> 

It's looking good :)  I'm glad we managed to bring you over to the dark
si-er, light side of the force.  Here's some constructive criticism:

1. You've got two blank lines before the "<?xml" prologue: this makes
the page invalid.

2. You're setting the page's mime type as "text/html": this is really
REALLY bad; it should be "application/xhtml+xml".  Either that, or don't
make it XHTML at all.

3. Your printer CSS file is marked with ``media="screen"``.

4. You have margins on the BODY element: you should use CSS for that
(otherwise, if you disable CSS, the page will be squished against the
edges).

5. You've got an alt tag that reads "logo2.gif": alt tags should always
be a description of the graphic if and only if such a description is
useful.  Parroting back the filename does nothing to help disabled users.

6. "sesarch" :P

7. The search link is a hyperlink using Javascript; this means that the
search function will fail to work on any browser that either doesn't
support Javascript, or where it's been disabled.  If you want to keep
the elements stylistically linked, you can use images with alt text.

8. You should try to avoid using all those H2s in the navigation list.
You're not actually delineating sections of content.

9. On a related note, you're using H2s, but you don't have any H1s!  The
document should be structured with a top level H1 (such as "Overview"),
and then H2s to denote the subsections.

10. Your CSS is portable enough that you can simply move the search box,
the navigation and header below the content.  Ideally, the page should
be sequenced like so:

  * Page title or header
  * Page content
  * Quick navigation
  * Search
  * Full navigation
  * Misc. legal junk

That said, I haven't yet worked out a way to push the legal stuff below
everything else.

11. Although most of the absolute layout stuff is OK (I tend to avoid it
because it can cause headaches), I'd recommend replacing the width of
the navcol and the "left" offset of the maincol with 'em's.  This
ensures that as the text scales, the columns will also scale.

For reference, I used 11em for the navCol's width and 14em for the
mainCol's left offset.

12. 'px' values for font sizes.  I can't remember who is breaking the
spec on this one; all I know is that IE won't scale px font sizes.  For
safety, best to use 'em's.

Minor quibbles:

13. The text in the header links seems to be a little to high... maybe
bring them down a smidgen more?

14. The hover colour for said links isn't different enough.  It's very
difficult to tell if they're "hovering" or not based on the colour.

15. Interestingly, the tab order for the header is actually backwards :P
 It's not bad, just... unusual :)  The only *possible* problem with this
is that the logic order of links "Home, Language, Compilers, ..." is the
exact reverse of the visual order "Wiki, Tutorials, Community, ...".

16. I agree with Serg: make the logo the background of a DIV so that
when you switch off styles, you're left with the pure text.

Ok, I think I'm done for now :)  Very nice work; the design is very
clean and simple, and looks professional.  Keep up the good work.

	-- Daniel Keep

-- 

v1sw5+8Yhw5ln4+5pr6OFma8u6+7Lw4Tm6+7l6+7D
a2Xs3MSr2e4/6+7t4TNSMb6HTOp5en5g6RAHCP    http://hackerkey.com/