Wthremix contest winners announced

a challege to redesign the W3C homepage

[amznVibe]

...Wthremix is a design challenge for coders, and a coding challenge for designers.... Show us what you think the W3C homepage should look like, how it should communicate to its users and, to make your point, use valid tableless XHTML, CSS, and meet WAI accessibility level 1

original page: [w3.org...]

top redesign (Grand Prize) [homelesspixel.de...]

list of winners: [w3mix.web-graphics.com...]

what it was all about in the first place: [w3mix.web-graphics.com...]

[tedster]

Multiple H1 tags in the winner. Fascinating - I doubt the W3C would ever do that.

The first H1 tag is used to create a W3C "logo". The characters are staggered vertically, but I don't see how that effect is achieved. Anyone?

[PRNightmare]

I would dock the winner for not making good use of a full 2 inches of the top of the page. That allways peeves me. IMHO.

[idiotgirl]

The characters are staggered vertically

On W3C on the top? On IE and Netscape the top W3C appears... horizontal. If I've identified that font correctly, it's Georgia, and Georgia automatically drops some numerals beneath the baseline. If the font was Arial or Times Roman, it probably would appear completely horizontal.

<added>The span style in the middle of the H1 would account for the varying baselines due to the font size differences.</added>

I think it's a nice departure from the current W3C, though I see it's an overwhelming task to manage so much content from one page. I've always had a problem losing my place with extremely long (vertical) pages and the large fonts used at W3C. The two inches of orange doesn't offend me because the font size and layout is easier to digest, but I might need to take a break or two getting through the menus on the example site.

Overall, a pretty cool take.

[tedster]

Yes, it's the Georgia font itself that gives that "mystery" appearance. Thanks idiotgirl.

[amznVibe]

Just curious for learning's sake, what's wrong with multiple <H1> tags?

We know that google really likes H tags and I've never seen it trip over multiple H1's.
Is it against any actual style rules, or just not "pretty" code?

I have to admit I do like the winning design like 100x more than the original, and a bit more than all the other winners.
The new design really seems to help me read the page and all that data.

[DCElliott]

I notice that they make use of "hacks" in the CSS and then use a linked stylesheet with a couple of @imports to "hide" the hacks. Is that just sleight of hand to allow the first-pass CSS validation to look OK?

Design-wise it is still pretty rigid. I would have like to have seen some %age widths for the side columns with min-widths, although I admit this design relies less on CSS2 compliance. It *barely* squeaks into 640px width.

If you have the ability to turn stylesheets off,* do so - the page looks very good unstyled, logically ordered content. Also, make note using a Gecko browser of the separate print stylesheet (do a print preview) of how the nav divs are dropped and that the links are followed by their URLs in brackets. A very nice touch and very easy to do.

DE

*I have a bookmarklet for IE that will do the trick that I picked up at Tantek's favelets page: [tantek.com...] it is the one marked "Toggle CSS style sheets".