QuirksMode.org redesigned

As you can see on this page, the QuirksMode.org redesign has gone live. It's not quite ready yet; right now I estimate that it's about 95% finished, but the remaining 5% will take a lot of time to implement, and therefore I decided to go live now instead of waiting another few weeks.

I asked Lilian Nijland, a graphic designer I cooperated with on the Concertgebouw and DELA Uitvaartkompas projects, to create the new visual interface, since I myself am not a designer, to put it mildly. I'm very happy with the results, even though Lilian and I will have to go over a few details in the next few weeks.

By the way, Lilian is a freelancer and you can hire her.

The new design is not perfect in Internet Explorer 6 and lower. This is not Lilian's fault, it's mine. Since with Explorer 7 Microsoft has a sufficiently standard compliant browser, I don't see the need to continue supporting older, crappier versions—on this site. Unfortunately, these crappy versions will continue to mess up sites we create for clients.

I'm planning a few follow-up entries about certain aspects of the CSS (including an explanation of why the header doesn't work in IE6 and lower), and about the new sitemap/main navigation combo, but these will have to wait for another time.

This is the blog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also follow him on Twitter.
Atom RSS

I’m around at the following conferences:

(Data from Lanyrd)

Categories:

Monthlies:

Comments

Comments are closed.

1 Posted by Brian on 12 September 2006 | Permalink

Since the files are named the same, users are required to user CTRL-F5 to view the update.

You might want to put a version control in the css and other links:
href="/quirksmode.css?v=2.0"

2 Posted by Oliver Turner on 12 September 2006 | Permalink

I'd only say that the contrast for your internal links could be greater... otherwise it's a lovely piece of work: congrats to both of you!

3 Posted by Derek on 12 September 2006 | Permalink

Font is too pale!

4 Posted by Ben on 12 September 2006 | Permalink

^ jokers. Looks cool, the design is out of the way of what we want ...information. INFORMATION.

5 Posted by Philip Withnall on 12 September 2006 | Permalink

Hmmm...is it such a good idea to have the header, nav and footer pulled in via AJAX? Unless you've got a good client-side caching mechanism, I can't see any advantage in it, unless you haven't got a server-side scripting language available.

Apart from that, the new site looks great! :-)

6 Posted by Milo on 12 September 2006 | Permalink

Constructive (I hope) criticism:
- Links that don't look like links ("home", etc.)
- Font is too pale. Makes me think my monitor is dirty. Both the gray text and the baby-blue links don't have enough contrast with the white background.
- The arches at the top aren't as nice and round as they could be.
- Why hide the site navigation initially? You're not using the empty space for anything else.
- Opera (9.01) is making the comments much narrower than they are in Firefox.

7 Posted by Brian LePore on 12 September 2006 | Permalink

I like the look overall. I've found two minor differences I've seen between Firefox 1.5, IE7 and Opera 9.

The first is that the words "home" and "sitemap" are right next to each other in Firefox, while IE and Opera have them seperated. I assume that sitemap should float to the right?

The second difference is that IE puts a border around the checkbox for "Remember me" in the comments section.

8 Posted by Cherrie on 12 September 2006 | Permalink

I like the previous site design better. What I don't understand about the new site design is giving the top banner (10% of the page) a dark color and the core content a set of pale colors (as Derek said above) on a white background(?!). The paleness makes it difficult to read. A suggestion is to replace the white background of the core content with a darker color.

The rounded corners at the top are nice. They match the K in your signature.

I've been a big fan of your site. Very resourceful. Thank you!

9 Posted by Tim on 12 September 2006 | Permalink

So... am I the only one that looks at this and automatically assumes it's broken? The blue curves arent aligned with anything, or each other, the navigation is invisible by default? The home and sitemap links are right next to eachother. And why does that blue curve bit just end with a flat edge, it doesn't go anywhere and lends no structure to the page. Oh, but the comment colors are nice. Though I don't know if I would have chosen to make each comment container scrollable.

10 Posted by Will on 12 September 2006 | Permalink

I think you've done a great job with the redesign. It's smart, interesting and unique. great job.

11 Posted by Brian LePore on 12 September 2006 | Permalink

Wasn't there a search bar under the "home" and "sitemap" links earlier in the day? Are you working some kinks out of the system or am I just going crazy?

12 Posted by Frodo Larik on 12 September 2006 | Permalink

I've come a lot of times to you're site to read some intresting stuff.

As far as the content you've always done a great job.
As far as the new design, I think it has some quirks.

- The menu is not easy accessible and hard to find: it is small and doesn't look like a menu.
- the light colors for links are difficult to read and will make people blind, especially on bright displays.
- You're wasting space on the left side of your site by not putting content in there (e.g. menu)
- why are headings (Main navigation, Category archives, etc...) made of 'p'-tags? and not 'hx'-tags?

I like the comments section ;-)

Keep up the good work!

13 Posted by Harmen Janssen on 12 September 2006 | Permalink

The design really needs some getting used to. Overall I like it, but as said above, the colors (and especially the baby-blue links) are way too pale and I'm not sure if I like the inconsistency between pages.

All in all, it's fresh! Looking forward to see the other 5% :)

14 Posted by Dan Knapp on 13 September 2006 | Permalink

The fixed-width thing is a very interesting choice... but still wrong, I think. Was the intention that at our option, we could see either of the sidebars?

The width seems to have been chosen carefully, since the content column wasn't clipped for me, but I can't get past the horizontal scrolling. Sorry.

15 Posted by Robert Nyman on 13 September 2006 | Permalink

I'm happy to see a frameless new design!

Have to say that the color of the links, though, doesn't contrast very well with the white (it's very hard to read), especially on a laptop screen.

16 Posted by Fabrizio Guicciardi on 13 September 2006 | Permalink

I hope to be constructive:
-Links colors are ugly and very difficult to read.
-Contents are hidden and it takes more clicks to get them.
-Highlighted text is totally ineffective.
-Less overall Usability
-The fixed position items overlap the contents (I don't like them)
-I've lost my eyes reading the posts and other parts of the site.
-Conclusion I prefer the older

17 Posted by Liam Hesse on 13 September 2006 | Permalink

People fear changes to things they've become accustomed to. Then they get used to them.

I think the redesign's taken a fairly sensible approach: you've taken your target audience into consideration, which is the most important thing. We're probably going to have up-to-date browsers. We'll almost certainly have JavaScript turned on. It doesn't necessarily need to be backward-compatible. In particular, I like the show/hide functionality of the content and nav panels, and having thenm follow you down the page is damn handy.

Also, the revised colours for the compatibility tables... fantastic. Good to see that they use the full width of the page. (I'm currently on 1024x768, and it looks great.)

I wonder, though: what will Google see when it comes here? Will this redesign make the site more visible to search engines?

Beyond that... those top images really need cleaning up. If I was given free rein over this site, that would be my first stop. Second would be the numbers in the comments - I just noticed that they were there. Damn, but they're hard to see. :)

Overall, though... not bad. I think it'll grow on me.

18 Posted by lieuwe on 13 September 2006 | Permalink

Nice design, much more pleasing to the eye then the old one!

Yet, as designer, I have some questions about your site navigation interface:
The “show/hide navigation”-menu provides roughly the same information as the “About; Resources; Blog”-menu. Why do you want to have 2 menus that provide the same information? Having 2 makes your navigation interface more complicated and confusing for the visitor. And: why would I want to hide the “show/hide navigation” in the first place? It is being nice & dynamic & all, but why would I want to hide this great piece of navigation? This navigation device makes your site work brilliant and the colour scheme of the new design has the quality that it can be shown without being distractive when reading the main content.

Maybe you could integrate the Sitenavigationdevice into a collapsible version of the “about;resource;blog”-menu.

And: when I use the “show/hide navigation”menu, why does it hide again? When I click a link I did not want to trigger the event “hide the menu”, but only the event “Take me to that information”.

But overall: very nice design, much better then the old one. Looking forward to it being finished!

19 Posted by Seb on 13 September 2006 | Permalink

I don't like the colours, but the thing I dislike the most is the scrolling on each comment - this annoyed me on your old site too. Just my 2c...

I preferred the old design, despite it's frames. It was easier to read, and easier to navigate.

20 Posted by Mark Chaimungkalanont on 14 September 2006 | Permalink

It's definitely an innovative design...

I think the page really needs to remember if I clicked on "show site navigation" or not. It's pretty difficult to navigate through without the menu.

I disagree with Ben somewhat that the design is out of the way so that information stands out.

As it stands, I find it much harder to navigate to various pages from the main page, but it could just be me being used to the fixed left hand side nav.

Looks fresh and modern nonetheless.

21 Posted by Lachlan Hunt on 14 September 2006 | Permalink

It's a nice design. It looks a lot better than before. One thing though, why is the comment form completely unusable in IE6? I couldn't even give focus to the text boxes to type anything until I disabled the CSS. I don't have a problem with the visual design being broken in IE, just accessibility issue of not being able to use the form.

22 Posted by ppk on 14 September 2006 | Permalink

Comment form in IE6 should be restored; there was an odd display:block for the labels that threw IE completely off the mark.

I also turned out to have forgotten to include the cookie set and read scripts that remember your name and homepage, as well as the maxlength check on the textarea; they're restored, too.

As to the other comments, Lilian and I are going to look into them. The link colours are not perfect, I agree, but we quite like the text colour.

As Liam quite rightly said, everybody has to get used to the new design, and that may take a while. I myself am slightly confused by the new navigation, too, but I'm not going to rush into anything: I'll let it grow on me for a few weeks and then I'll take a decision.

23 Posted by Andy James on 14 September 2006 | Permalink

I think you managed after all to combine a good looking design with ultimate functionality. You didn't enhance something on the cost of the other. I hope to see it 100% completed soon.

24 Posted by Keith on 14 September 2006 | Permalink

How about making the width in the left and right columns a bit more fluid? The right-hand column is cut off in my browser window, which is 820 pixels wide. It's not like my window is 500 pixels wide -- 800 is still fairly reasonable for browsing, and I hate having to maximize to the full 1024x768 resolution of a screen, because it makes multi-tasking much harder.

Besides, of all people, I wouldn't expect YOU would have a site that requires horizontal scrolling! :)

One other comment: when you show navigation at the bottom of the page, it covers up the field labels for the comment form. That's probably okay, but if would be better if added bordering to the CSS so that the navigation div is more clearly separated (or "above") the form. At first, I thought I had some weird refresh bug due to the scrolling.

In general, though, it's a great job. Very smooth, very pleasant on the eyes.

25 Posted by Lee on 16 September 2006 | Permalink

It looks cool, though I must say some things are difficult to find initially.

26 Posted by Ivar on 17 September 2006 | Permalink

Not sure about the dark blue wavy bar at the top, I don't like the sudden stop... makes me think something is broke or missing. Don't like the integrated scroll bars at the comments either, would be better to just leave the scrolling to the browser scroll bar.
The show site navigation and page contents could be a bit bigger and make them more obvious as links.

Otherwise a nice design and clear improvement.

BTW, seems like the remember me check-box is reset for every Preview of comment...

27 Posted by David on 18 September 2006 | Permalink

I agree with many of the other commenters--the header looks to be cut-off, almost as if it belongs on a completely different site; and the pale text in pale blocks of color on a white page is *really* bad for the eyes.

Also, when I wrote the comment, I had "Remember me" checked; when I hit preview, the "Remember me" checkbox was unchecked (though my personal info remained), and I'm not seeing the counter of how long this comment is vs. the allowed length.

28 Posted by Sharon on 19 September 2006 | Permalink

Um...something is VERY wrong in Mozilla! The new design works okay in Opera 8.5.2 and is (almost) usable in IE 6.0.2900 - except for the usual IE box rendering problem, I think, compounded by text colors that disappear into the white background in IE. And yes, I know you aren't trying very hard on IE 6 any more. But Mozilla...just upgraded this morning to 1.5.0.7...Mozilla is still renders the frames layout, with the large right side frame devoted to a 404 error.

One of the things I've always liked about your site is that you combine support for standards with a refusal to sneer at people who use non-obscure browsers. I hope you aren't about to retreat into the cozy corner of Opera-only purists.

29 Posted by ppk on 19 September 2006 | Permalink

Sharon: Shift + Reload.

David and other people who commented on the Remember box being unchecked: I'm not totally sure what's going on, but all of a sudden it works as expected - for me.

Maybe an obscure caching problem?

30 Posted by David on 20 September 2006 | Permalink

ppk: You're right; the remember me checkbox (and the character counter) is now working on the preview page.

I'd be a little surprise if it's a caching issue, as I'd had to do a full reload (shift-reload) on the first few pages when I came to the new site design. That should've gotten all caching out of the way.

31 Posted by Sharon on 20 September 2006 | Permalink

Well. Duh. Thanks, PPK. It looks a lot more as intended now.

32 Posted by Thom on 26 September 2006 | Permalink

I've been following this site for a long time and I really appreciate all the work you do!

I have to say though, this new color scheme is very rough on my eyes. I find myself squinting due to a lack of contrast. Also, when I first saw this new design load I thought something was broken because of the quick stop in the blue curve. Maybe that could fade to the background color? My $0.02

33 Posted by Bruno Fassino on 14 October 2006 | Permalink

I find the redesign nice and usable. As Milo noticed (comment #6) Opera is making the comments much narrower than expected. I tracked down the problem to an Opera bug (that I've just submitted to your Bug Report Blog :-)