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.
I love the way that the new design puts so much main page focus on the different WaSP task force groups. That is much more clear that how it was previously. I’m a fan of light text on a dark background, so I like that the main page most recent blog entry is white text on black. On the inside, you’ll see that change a bit, and it alternates to black text on a white background for the full entry and comments.
Now, I love the design, and the change is great no matter what… but (of course) I have some views on it 😉
Some Opinions
The Buzz Section…
I think that the blog subpages (reading the full posts in the buzz section) feel a bit odd, because the entire page flexes fluidly… but the text doesn’t. So, I am reading a page with a huge white gap on the right hand side. Also, the title and author links on that page don’t do well on hover. The links are semi-dark on a black background, and only get darker on hover. While I realize this is the css style from the other pages with the light background (where they look fine) I think that they should have a separate style for the buzz blog headers.
Again, in the buzz / blog subpages, I’m not sure I understand the use of the collapse arrow directly at the bottom of the black article title section. In fact, it looks like its wrong somehow. Testing it out, there is very little text that hides when you click that little arrow (seemingly just the summary text). That just doesn’t seem to make sense. It looks like that section collapse should be used to show/hide all the comments below, not the tiny summary line. Now, the collaspse arrow at the bottom makes perfect sense, since it toggles to show/hide the comment making form.
The Buzz Toggle Not Clicked
The Buzz Toggle Clicked
Main Navigation
On the main title bar, I’d like to see some sort of hover action on the main page links. The lack of that was something I noticed immediately. I definitely like the search being kept slim and in line with the menu.
Skip Content
Also, at the very top of the pages is a skip to content bar that slides in on hover. It’s a really nice feature, but I entirely missed it the first long while I was navigating the site. That said, I think there should be some way to know it is there, whether text, or some little graphic, or something. It rather diminishes the whole accessibility aspect when you can’t tell the option is there, and that the action is entirely dependent on the mouse. Aside from accessibility, its a very cool feature.
General Subpages
There is some static text on the left side of these pages that is like a yellow on gold background. The text, due to that, is not very easy to read and I’d suggested darkening that text or drastically lightening it. But I definitely like them going more bold and using a heavy font for that text.
Little Touches
I love the small touches that are so prevalent through the design. The small wasp that hovers quietly in corners, and has a nice hover color change. The little cutouts in the otherwise straight lines that the wasp seems to have taken a bite out of.
The general subpages (non-Buzz section)
These pages are fabulous – I love the layout. There is one small quirk I’ll note in these pages, and is likely just a glitch. The ‘learn’ page left section is just a tiny big smaller than all the other pages. I noticed because it resizes the text and moves the static text (yes, the yellow on gold text I mentioned above). Also, the non-header regular paragraph links in the main content of these pages are too light. It’s a yellow on a white background. It they swapped that out for the hover color they use, it would increase readability.
In the above image, you can see both the yellow on gold text lack of significant contrast (leading to a bit of blur), as well as in that same text, you can tell that the page has resized because the text has wrapped the line. It is easier to tell if you go to the pages and move to the other pages, then back to the Learn page. The page sizes noticeably, though minimally. It seems like a small glitch only as it only happens on the Learn page.
The Learn Section
I definitely like this section. It leads you through multiple subsections following the links. However, that said, I realized that a breadcrumb of where I was in those subsections (and quick links back) would be a helpful feature.
Colors
As I said, I love the colors. However, there are a lot of people who do not have an easy time reading light text on a dark background (whereas some of us are the reverse). That said, I’d suggest keeping the old design around and allowing the users to toggle between styles.
Overall — this redesign of The Web Standards Project is absolutely a winner. Remembering the previous design, I think that this absolutely captures the essence of what WaSP is and makes a strong statement. The quirks are minimal, and I have plenty on my own blog here while I’m still tweaking and playing with design changes, so I don’t at all think those small things with the WaSP site detract from the beauty of that design.
~Nicole
