Working together for standards The Web Standards Project

We’ve teased you for far too long, asked you to wait, to be patient. We’ve made promises you probably began to think we wouldn’t ever keep. Well, here’s our long awaited gift to you, the new WaSP redesign.

Many WaSPs have gathered in Austin, Texas at SXSW Interactive. For the past several years we’ve held our annual meeting at the event, mostly due to the fact that more WaSP members are found in one place during SXSW than any other time.

Last year during our meeting, which we held after hours in a public area within the conference center, Robert Scoble and Marc Canter came over and tried to engage us in a conversation. Having only an hour to get through WaSP business, I stung them both with a “sorry, we’re having a closed meeting.”

Aching from the sting, Scoble posted about the incident, which he felt showed WaSP in a bad light. Conversations via his blog ensued, which ultimately inspired the formation of the WaSP / Microsoft Task Force.

Within WaSP, discussions as to a site redesign and the opening up of comments and the WaSP itself to greater public participation continued. These discussions, combined with Scoble’s response, brought us to the realization that we wanted to take WaSP in new directions.

The results? This newly redesigned site fresh with comments and trackback support for your input as well as an open meeting for all attendees of SXSW to enjoy. It is on behalf of all of WaSP I invite you to take a look around and encourage you to participate in what we believe will be a new era of activity and success for the advancement of the Web standards movement.

Austin, Texas 2006

Your Replies

#1 On March 13th, 2006 6:21 pm Christopher Schmitt replied:

Yay for the redesign!

#2 On March 14th, 2006 12:01 pm kazu replied:

Congrats for all of WaSPs, especially redesign team!

#3 On March 14th, 2006 4:52 pm Zeerus replied:

wow, it looks great, as I’ve said at Malarkey’s site, but the home page is broken in IE6. other than that, it looks fabulous, congratulations

#4 On March 14th, 2006 5:53 pm Su replied:

Looks very nice overall, but there’s a large size difference in the text between IE and Firefox(in which it’s kinda microscopic). Is this known/intentional?

#5 On March 14th, 2006 6:33 pm will chatham replied:

This is great! I am so glad to see this site improve, and I am super-glad to be writing a comment!!!

Now if I could just find my mouse…

#6 On March 14th, 2006 6:36 pm Avasilcai Daniel Constantin replied:

Great design.Yellow+Black work well together, also the text remain clasic black on white, and i think this is important.

#7 On March 14th, 2006 6:53 pm Web Devout tidings » Blog Archive » WaSP redesign replied:

[...] The Web Standards Project (WaSP) website has undergone a major redesign. This reflects the new energy that has been pumped into the project since web browser development began to accelerate in the last year or so. The WaSP group has been working closely with the Internet Explorer development team to push for improved standards support in Internet Explorer 7 and future versions, with notable success. The new website also features a comment system and trackback support. [...]

#8 On March 14th, 2006 10:08 pm patrick h. lauke replied:

the ability to comment will certainly ensure an increased involvement of/with all our peers in the larger web design and development community. an exciting new chapter in WaSP history and i’m proud to be a part of it. great stuff!

#9 On March 14th, 2006 11:30 pm WaSP gets a makeover | ara pehlivanian—Web Standards, Web Culture, Web Everything.™ replied:

[...] Andy Clarke (Malarkey) just redesigned the WaSP site and I’ve gotta say, that’s one bad mother–shut your mouth! [...]

#10 On March 15th, 2006 2:47 am pixelgraphix replied:

Web Standards Project Redesign…

Das Web Standards Project trägt ein neues Outfit. Dieses wurde heute veröffentlicht und Andy Clarke gibt Details des Designprozesses in Designing for: The Web Standards Project preis. So kann man schrittweise mitverfolgen, wie sich das fertige Bild …

#11 On March 15th, 2006 4:13 am Rob Wilmshurst replied:

I’m really loving the redesign.
The um, waspy colour scheme and the fat text looks great.
but it’s the little things (like this hideable comment box) that make it work for me :)

An excellent step forward. But it feels kinda weird commenting here. Someone pinch me ;) !

#12 On March 15th, 2006 4:43 am John Carpenter replied:

Well it looks nice enough, but I’m surprised that you are using white text on a yellow background. For an accessibility site, that doesn’t seem very accessible.

#13 On March 15th, 2006 4:51 am karmatosed replied:

Congratulations on the design. I often get asked by juniors why so many web standard websites to them seem boring. It helps to be able to now hold this standing stone up as an example of how you can be both standard complient and also well designed. Being about to comment makes the community aspect of WASP apparent and I can see you are doing a lot to avoid the accusations of a closed club through open meetings and this new site. It is all good and makes me feel the tide is turning with regards to standards. Perfect start to this part of the year.

#14 On March 15th, 2006 4:56 am Alan replied:

I like the redesign however I too am surprised about the white on yellow contrast but even more so at the yellow on yellow which can be found on you about page and other sub pages.

I would consider it to be quite an important statement as well…

The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.

Surely you would want this message to be as clear as possible.

Otherwise, great redesign & keep up the good fight :D

#15 On March 15th, 2006 5:17 am Anouar El Haji replied:

Why is W3C telling me this page is XHTML valid?

#16 On March 15th, 2006 5:18 am Anouar El Haji replied:

*not

#17 On March 15th, 2006 5:27 am Prabhath replied:

Ah the beauty/irony of standards… someone forgot to close the container’s end tag :P

I love the design though. And I love the fact that it’s WordPress.

#18 On March 15th, 2006 6:06 am Lloyd replied:

I love it! But fix the validation issues ;-)

#19 On March 15th, 2006 6:35 am nb : The Web Standards Project uses invalid Atom feed replied:

[...] WaSP is back in full force with a fresh redesign, launched at SXSW. It has an interesting layout, even though I’m not a big fan of the colour scheme. I guess it will grow on me. The most obvious improvement though is the ability to leave comments on the site. This way it may become more of a rally point for the web standards community. [...]

#20 On March 15th, 2006 6:44 am Stephen Clay replied:

Design looks great, but on the navigation tip it’d be nice to have a simple link to the previous article…for people not on the RSS.

#21 On March 15th, 2006 8:21 am Stuart Maynard-Keene replied:

Excellent love it, very nice use of a wasps colours

#22 On March 15th, 2006 8:58 am David Bailey replied:

Love the redesigned site. Well done to all involved.

#23 On March 15th, 2006 9:12 am Phu replied:

Absolutely gorgeous. Congratulations on a job well done!

#24 On March 15th, 2006 9:22 am Chris Ruppel replied:

The site looks clean. I'm not a fan of the white on yellow, but everything else is well organized and easy to read.

#25 On March 15th, 2006 9:38 am Not Data Found » Blog Archive » webstandards.org Redesign–Ugly? replied:

[...] Am I the only one who thinks the redesign of http://webstandards.org/ is ugly? All the comments on the announcement page are fawningly positive. I wish they had an image of the original site, but I remember it being much cleaner looking with lots of whitespace. No me gusta the new colors. And what are those little triangle links for that expand and collapse various parts of the page? Their purpose is not very obvious. Even after you click them. [...]

#26 On March 15th, 2006 9:46 am Chris Ruppel replied:

I think I liked the old design more. The collapse buttons are confusing and I am not a fan of the white on yellow in this reply form. Maybe I’m just a simpleton but I enjoyed the simplicity of maroon-ish on white.

#27 On March 15th, 2006 10:32 am Martijn ten Napel replied:

It is good to see that the different workgroups are featured more prominently. It is also good to have a talk-back function here (and I’m hoping for interesting discussion here where we all learn from).

I’m not so sure about the redesign though. I’m not talking look & feel, but on the fornt page I have a very hard time distinguishing the white on black text on the left-hand side and the silvery colour of text in the white panel to the right of it.

The combination of contrasts make it very hard to read, combined with the rather small type.

Yes, I had my eyes checked recently and for a 35 year old I still have much of my “eagle sight”. I know about text-zoom, but Camino makes the type too large when I go one zoom up to have a comfortable read.

Ironically enough, this is one of the very few websites where I’m experience legibility problems. I do realize the mileage may vary for other readers, of course.

#28 On March 15th, 2006 10:56 am Mark replied:

Sweet.

#29 On March 15th, 2006 11:02 am Daz replied:

Great looking site, fresh, clear and high impact! Well done all :-)

#30 On March 15th, 2006 11:09 am Chris Kavinsky replied:

Clean, readable and definitely better than the old. Great job overall, folks.

#31 On March 15th, 2006 11:22 am Jules replied:

Questions about the design:

1) Why is Search hidden? Even if it is not hidden, wouldn’t a screen reader read “search” twice because of the legend and then “Search WaSP”?

2) The branding uses the H1 tag, and with my experience with WordPress, this means every page will have the same H1. Given the experience that WaSP has via its members, shouldn’t H1 be moved from the branding to the title of the article?

I like the new design.

#32 On March 15th, 2006 11:52 am Justin replied:

I’d have to agree with the others that the white on yellow isn’t ideal, and I actually had problem seeing when my Mozilla had the sidebar open. Black(or very dark brown) on yellow would be a far better combination.

#33 On March 15th, 2006 12:56 pm Nath replied:

I have to say I feel I am going blind looking at this new design, as my left eye focuses on white text on black while my right eye has to do the opposite. The yellow hurts too.

I feel there should be options for the viewer to select his style, a-la css zen garden.

#34 On March 15th, 2006 1:08 pm Kilian Valkhof replied:

absolutely great design!

the one thing i immediatelly noticed, and my only remark, though, is that on the top of an article page, if you mouseover on the WaSP logo, it changes colour, to me indicating a link. but its not a link.

other than that, it looks wonderful, and conveys the message very well. :)

#35 On March 15th, 2006 1:44 pm John A. Bilicki III replied:

Very nice update to the WASP site. :-)

Valid XHTML 1.0 Strict (though not attempting to serve as application/xhtml+xml…though I can understand as you guys just added a comments script so it gets ify there).

WAI AAA compliant according to Cynthia!

BUT….

A minor but (I feel) important accessibility concern!

While there are not tabindex attributes (and using TAB seems to be ok from what I’ve seen so far) you should not rely on the browser to give a good enough visual queue for the user to see which anchor is currently focused. I would suggest adding the focus pseudo-element to your anchors with high contrasting colors that make it easy to spot which anchor is currently focused. If you want an example try tabbing through WAI’s homepage.

#36 On March 15th, 2006 1:46 pm John A. Bilicki III replied:

Clarification: If you want a good example of extremely poor contrast for focused anchors (as in not being able to spot them with ease on a page) visit WAI’s homepage.

#37 On March 15th, 2006 1:46 pm Confessions of an Undercover Geek » The Redesign of the WaSP Site Looks Great replied:

[...] Kudos to Andy Clarke and all of those that worked on the launch of the redesign of the web site for the Web Standards Project. [...]

#38 On March 15th, 2006 4:02 pm stefan asemota replied:

One of the best Liquid Layouts I`ve seen so far. And even though some of the colour-combinations fail Luminosity Contrast Ratio Tests I dont mind at all….Its beautiful!

#39 On March 15th, 2006 4:31 pm Chris replied:

On the front page, the Buzz Archives part takes up more then half the page. If anything should be collapsable it should be that. Also, anytime you need a “skip to content” link you have problems. What exactly were the goals for this upgrade, aside from adding in a comment system?

#40 On March 15th, 2006 4:38 pm Mark Wyner replied:

Ahhhh… Thank you so much for this redesign.

I want to commend you on not going overboard with an overzealous design. Just enough flair for the sake of aesthetics, and all the right markup to serve as an example for those learning about WaSP for the first time.

Nice work, folks.

#41 On March 15th, 2006 6:12 pm blahdom replied:

sooo… i get:
– about 80% of my (vertical) screen covered in black, and i have to physically DO something to read more than 4 lines of text.
– teeny tiny itty bitty text
– MASSIVE line lengths (up to 145 characters) which are impossibly difficult to read.

i seriously don’t want to sound rude, but i’m very very disappointed in this. it’s a usability nightmare for me. give me a style switcher link so that i can view it with the old design PLEASE.

#42 On March 15th, 2006 11:09 pm Beyond Caffeine replied:

WaSP – A Fresh Look…

You can now see the long awaited site redesign of The Web Standards Project (WaSP) live, and My, Oh My… it’s a big change.
The design comes to WaSP from Malarkey, and he has published an article detailing the process he used to get to it.

…

#43 On March 16th, 2006 2:50 am Keran McKenzie replied:

Oh MY gosh

you have to be kidding me???
I’m sorry guys…this will be the LAST time I come to the WASP … the colours HURT – yes actually HURT.
Have you tried this on a 23″ monitor…full screen (yes that is how I usually surf the net!!)

Come on Molly my friend… you know your colours better than this!!!

Yeah I love some of the features of the design… I just think the colours don’t WORK!!

Please…give us some alternatives!!!

#44 On March 16th, 2006 3:33 am Tanny O'Haley replied:

Ouch! The colors hurt my eyes too.

- The home page’s white on black letters is difficult to read with the white background to the right. I had to go to the article to read it.

- What’s with the teeny font in Firefox? IE seemed to be fine.

- Please add more white space for the left and right margins of an article. The line lengths are just to wide.

- I think (just my personal opinion) that the old font and its size were easier to read.

Overall I like the design, just tone it down a couple of notches, could you?

#45 On March 16th, 2006 4:05 am Tanny O'Haley replied:

Using Firefox, I turned off the CSS on this article page and it’s pretty readable. Not as readable as the old page, but not bad.

#46 On March 16th, 2006 5:03 am Robert Wellock replied:

So how long do (in days) you think it will take until the comments system gets abused? Like several people I find it strange to have used such a low contrast and small font size.

#47 On March 16th, 2006 6:06 am Martin Smales replied:

Some of you who complain about colours that WaSP use may have a valid point.

Using the Colour Contrast Analyser or Luminosity Contrast Ratio Analyser (Beta) from Juicy Studio does show a number of failed tests.

Wonder if the design might need to pass all colour contrast tests not that I want to join the Complain about Colours brigade? :)

#48 On March 16th, 2006 11:18 am Arne Kriedemann replied:

Great job You did.
It’s not the only ReDesign of a WebStandards “Organization”.
The Webkrauts are a group of german web designers, “fighting” for webstandards in Germany.
They just redesigned their website and it’s a quite wonderful work.
I Think You take the right direction, move on!

#49 On March 16th, 2006 1:48 pm bza replied:

I think it looks good. The yellow-ish background-color combined with the dark areas make a waspy buzz-effect!

#50 On March 16th, 2006 1:57 pm France replied:

Been long overdue. I flinched at first with the brown-mustard yellow color, but I can appreciate the bubblebee connection.

#51 On March 16th, 2006 1:59 pm France replied:

Er… bumblebee != wasp. Oh well. I’m off to look up what colors makes up a wasp.

#52 On March 16th, 2006 5:05 pm Jason replied:

Not only looks great, is better. Glad to be able to say hello now, and you’ve received a pantload of constructive criticsm already :)

#53 On March 16th, 2006 10:07 pm Henry Francis replied:

As one who reads the WaSP updates with great interest, I would like to comment on the new site design — specifically, the left sidebar.

Light text on a dark background is
1 – difficult to read
2 – promotes eye strain
3 – the sort of design choice I usually associate with garage band sites

Onward and upward!

#54 On March 17th, 2006 12:06 pm Duncan Web Design Guru replied:

i love it, even though my eyes bleed

#55 On March 17th, 2006 3:04 pm Lanza replied:

The collapse/expand functionality should not replace the navigation within page which is a lot more useful IMHO. I think l’ll browsde this page with javascript disabled.

#56 On March 17th, 2006 7:50 pm Dustin Diaz replied:

I’ll never forget Jeffrey saying something along the lines of “Umm.. GO” – and then Andy loading up the page at the Wasp meeting. Definitely good stuff.

This post I’m typing now is just to get my name in the system and will officially mark my first words in the comments. Woot!

#57 On March 18th, 2006 10:49 am Pete replied:

I can hardly read it until I’ve gone a couple of zooms up in Firefox. What’s the problem with just not setting a font size at all so that the user gets whatever size they’ve set as their default (in my case 14px). I’m fed up with the majority of sites deciding they need to override my defaults simply because the designer thinks small text looks cool. Come on guys, you can do better than this.

#58 On March 19th, 2006 5:10 am Pid replied:

I’m disappointed, I appreciate this is a big change, but I guess my expectations were high.
Of course, you can tune it up some, but I think the white on yellow is a pretty poor choice, and the yellow itself is just too brown to be attractive.

The font-size issue can be corrected, but I’m surprised that it reads better in IE than FF at launch.

Also, I don’t get why there’s a toggle for the subtitle/summary – surely, to quote 37signals, “it just doesn’t matter” – it hardly uses enough space to justify it.

I’d say a toggle for the main text would be better – to reduce the scroll size, if you’ve got comments toggled open… Speaking of which, why toggle the comment form, and not the majority of the comments too?

I’m just a bit baffled really, given who the WaSPs are…

#59 On March 19th, 2006 5:11 am Pid replied:

Impromptu “Design Eye For The WaSP Guy” anyone?

#60 On March 19th, 2006 7:50 am Lars replied:

Sorry guys, I really love the site and I have been a regular bvisitor for years, but I really don’t like this redesign.
It hasn’t got the professional simple look of the old design and it’s much more difficult to read.

#61 On March 20th, 2006 12:20 am Dylan replied:

Hmmm, I’m a little surprised at the negative comments. When I first saw the redesign, I found it to be very striking and bold, with the use of yellow and black. I like it a lot.

The issues with text size do have merit. IE seems to like making text larger than Firefox, in which the text is a little small, but I’m pretty sure (…) the intended size is Firefox’s rendering. The text responds very nicely to resizing anyway.

To say that this iteration doesn’t have the “professional look” of the old design is preposterous. The old design was bland and lacked character, while this design definitely creates a stronger identity, which is most definitely very professional, in my opinion.

As for the toggles, they are a bit of overkill. I don’t really see the use of being able to hide the comment fields. As for the article description toggle, if people wrote longer descriptions for articles, it might be useful, but seeing as the description is basically a short summary, it doesn’t seem likely.

#62 On March 20th, 2006 6:07 am Gérard Talbot replied:

I have 2 comments + suggestions regarding the webstandards.org redesign.

1- Dual text color and background color patterns
==============================

There is 2 color patterns in the redesign. The left part of the page is white text on black background; the right part of the page is black text on white background.
After reading a bit, my reading habits or eye vision kind of forget, ignore the left part (white on black background) because I’m not accustomed to read in this kind of color pattern. Newspapers, magazines, reviews, books are all black (or dark) text on white (or pale) background.

The problem with the 2 color patterns is NOT sufficient color contrast.

The problem with the page redesign is that there is not just 1 but 2 color patterns. So reading, eye vision can not coherently be adjusted, oriented toward both color patterns. I find this dual color pattern to be a mistake, an error on appreciating how people read, scan a page for reading.

At a less degree, I also find the color of links (yellow) sub-optimal… but at least, it’s hegemonuously the same on all page and in all parts of a page.

Another possibility is to implement alternate stylesheet supported with cookie. An user could then choose his preferred styling of webstandards.org webpages and work around “problems” he sees or perceived with a visual layout.
Personally, I would most likely use the same previous layout because I am/was accustomed to it.

2- Related link are not coded or coded improperly
===============================

When I visit a page in webstandards.org site, I should be able to click the “Top” link in my Mozilla Seamonkey 1.5a Site Navigation toolbar and then jump back to the entrance page, home page, index.html page of webstandards.org as explained by HTML 4.01 recommendation. But the linkage is not there. Same thing with Opera 9.0: I should be able to click the “Home” link in the Opera Site Navigation toolbar but it is not there.

W3C Quality Assurance tip for webmasters:
Use s in your document
http://www.w3.org/QA/Tips/use-links

Link Bars
How Link Relations Are Implemented
http://webcoder.info/reference/LinkBars.html

The ‘link’-Element in (X)HTML
http://www.subotnik.net/html/link.html.en

Titles, META Tags, LINK tags, and Search Engine Robots
http://webtips.dan.info/titles.html

Best regards and respectfully,

Gérard

#63 On March 20th, 2006 12:40 pm Paul Sturgess replied:

I really like the design; bold, bright and clear. The default font-size in firefox is a little small though that’s for sure.

#64 On March 20th, 2006 2:32 pm Ingo Chao replied:

May I suggest
to replace the black with #404040
and the font-size: 72% with 100%

The text is unreadable for both reasons on my Mac.

#65 On March 20th, 2006 2:45 pm Michel Bozgounov replied:

Nice redesign :-)

But I am not sure if I like it more than the previous WaSP design… It was cleaner somehow, simpler, and… now the present colors look strange on my 17″ trinitron monitor…

// Sidenote: Ingo, why text is unreadble on the Mac? Is it because Macs have 72 pixels-per-inch monitor resolution, and PCs have 96 – therefore, text becomes much smaller on the Mac?

#66 On March 21st, 2006 3:41 pm Jens Brueckmann replied:

I am sorry to say that this design seems pretty dodgy to me.
It certainly lacks the openness and charm of the previous design.
The huge black and yellow chunks lend a very aggressive and threatening touch to the site while font size is so tiny (10px here) making the site illegible without zooming.
I wonder, when will people learn not to fiddle with default font size set in the visitor’s browser’s preferences.
Illegible content due to tiny font sizes is still number 1 of Nielsen’s Top Ten Web Design Mistakes of 2005.

You certainly could and should have done better.

#67 On March 21st, 2006 7:11 pm “Geek Camp” wrap-up ¬ Easy Reader replied:

[...] Getting my wings (and stinger) — Faruk and I were asked (and agreed) to join the Web Standards Project (WaSP) while at SXSW. As the new kids on the block, we’ll be dealing with comment moderation on the new site, so please… be gentle. [...]

#68 On March 23rd, 2006 10:03 pm Dudu Figueiredo replied:

Good to know it is in wordpress now…

#69 On March 28th, 2006 10:44 am Andy replied:

WaSP… black, yellow, white, oh I get it… er, no I don’t, its a very an ugly colour combination. The large blocks of yellow and black are nowhere as easy to read as the previous design – bring it back pronto.
WaSP do worthwhile advocacy work, but advocates have to sell their message – on the web they have to make themselves required reading – and I’ll be a lot less likely to come back and read this site if I have to battle with this colour combo.
Now, how do I set up a user stylesheet?

#70 On April 3rd, 2006 2:30 pm Jonathan replied:

I like the new design, but I must agree with those who say the font size makes it difficult to read. Having a base font size of 72% is WAY too small.

#71 On April 11th, 2006 7:18 pm blahdom replied:

Are you EVER going to do anything about line lengths and text size?
You’ve seen (I presume) these multiple comments about readability issues … are you placated by the “awww ain’t it pretty” comments and ignoring the complaints?
Give me readable line lengths, PLEASE.

#72 On June 18th, 2006 12:51 pm bits by ben » Blog Archive » The Web Standards Project uses an invalid Atom feed replied:

[...] WaSP is back in full force with a fresh redesign, launched at SXSW. It has an interesting layout, even though I’m not a big fan of the colour scheme. I guess it will grow on me. The most obvious improvement though is the ability to leave comments on the site. This way it may become more of a rally point for the web standards community. [...]

#73 On October 8th, 2006 11:52 pm web design replied:

The whole functions are designs looks great, but on the navigation tip it’d be nice to have a simple link to the previous article…for people not on the RSS.

Post a Reply

Comments are closed.