Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Collaborative Redesign

Out with the orange, in with the green. As with my last redesign, only the CSS changed. A fun deviation with this one was that it was a collaboration between myself and Natalie over nearly 5,000 miles, using edit styles and AIM to pass each other snippets of CSS and instantly try them out.

I haven’t tested it very thoroughly at all so if there are any glaring abominations leave me a comment—I know about the blogmarks looking slightly out of place in IE 6 but I haven’t quite decided if I can be bothered to find a workaround yet.

This is Collaborative Redesign by Simon Willison, posted on 25th November 2003.

View blog reactions

Next: PostgreSQL 7.4

Previous: Blogmarks

45 comments

  1. No squares! Put the squares back in the top corner! They were the only bit of nonfunctional aesthetics you had!

    Tony - 25th November 2003 01:32 - #

  2. Did the orange version have the squares? I can't even remember any more. I'm going home now but I'll try and work out some nonfunctional aesthetics some time tomorrow, if only because CSS backgrounds make it so ridiculously easy to add pretty frills without messing around in the markup.

    Simon Willison - 25th November 2003 01:42 - #

  3. Simon, I'm not sure you know or not, but your blogmak text barely shows in IE with "smaller" text.

    steve - 25th November 2003 01:46 - #

  4. How strange to see a blog with left-hand navigation... I'll try to get used to it

    ic - 25th November 2003 02:07 - #

  5. It may be me but I found it easier to have the navigation on the right. And a bullet would be welcome before the entries in the blogmarks.
    Other than that the green is refreshing and doesn't hurt the retina. ~__~

    P01 - 25th November 2003 02:53 - #

  6. why not use alternate stylesheets to switch to old design(s)?

    huphtur - 25th November 2003 02:58 - #

  7. On yours, as well as a couple other CSS-type sites, if I try to middle click links in Firebird to open them in a new window, I get the scroll action. It's as if Firebird isn't recognizing it as a link. Even though the cursor changes to a hand. Anyone else have this problem?

    Graham - 25th November 2003 03:04 - #

  8. Yes, I’ve also noticed this. It drives me nuts.

    Minh Nguyen - 25th November 2003 03:34 - #

  9. Hey Simon, I like the new design. Refreshing :)

    Joshua - 25th November 2003 03:45 - #

  10. i liked the orange better, but this isn't bad; i liked the old layout better.

    clint - 25th November 2003 04:41 - #

  11. Note about Firebird: AFAIR I've always used shift+click to open the links in a new window and ctrl+click to open them in a new Tab. The middle click is used for the autoscrolling which you can toggle in Tools > Options > Advanced > Browsing > Use autoscrolling.

    Once it's turned off, my Fb0.7 opens the links in a new Tab when I middle click them.

    P01 - 25th November 2003 04:50 - #

  12. Sorry Simon, this design doesn't work for me. My first reaction was 'oh my God! what is this mess?' A few concerns: not enough contrast between the dark green links and the black text. also not enough contrast between the sidebar and blog entries, e.g. same font, size, color, etc. left-hand navigation doesn't seem to be well-suited for blog text, it's a visual obstacle.

    bob - 25th November 2003 04:52 - #

  13. Ouch ! this green is hurting my eyes ;) Could we have alternate style sheets to switch back to the old design ?

    Arnaud - 25th November 2003 07:56 - #

  14. Simon, I like the color, but could you add contrasts? I am particularly worried about your links; when I hover over them, there is no effect and visited links are a pale shade of green - virtually indistiguishable from a non-visited link.

    Kayode Okeyode - 25th November 2003 08:31 - #

  15. I like the colour - everything's a bit jumbly tho... bit hard to see the difference between sidebar and content straightaway.

    Elly - 25th November 2003 09:08 - #

  16. Edit styles is fun. It's the ultimate in giving up control over the presentation of your webpage.

    Micah - 25th November 2003 09:12 - #

  17. I'm a fan of green, but I think the background colour needs to be softened slightly as it's a big bright on my eyes. Nice, simple and uncluttered though.

    Andrew Bowden - 25th November 2003 09:41 - #

  18. I think my eyes preferred the higher contrast of black on white; the affect of those green backgrounds and green hyperlinks seems to effect the layout enough to make it look cluttered.

    Consequently the eye is distracted by the left hand navigation bar due to the similarity of style, thus it could be more practical to highlight the comments in a different colour.

    Robert Wellock - 25th November 2003 09:55 - #

  19. I preferred the old look: better contrast, more distinctive looks. The green chosen for the header is not the most beautiful color I have seen. More importantly though, I preferred the right-hand sidebar. Also, the favicon (which is great) doesn't really match the page anymore (no white, no grey, no black).

    What were you thinking when you made the changes?

    Lars - 25th November 2003 10:15 - #

  20. I forgot to mention that I like it on the whole amidst my complaint. I did think it was Laurence's blog by mistake for a moment though... If you added some browns it would be, like, a rainforest in here!

    Tony - 25th November 2003 10:32 - #

  21. OK, so I can't really complain about having a green blog (at least mine's not completely green), though to be honest the greens you picked aren't the greatest shades in the world - mint creme and, well, seaweed. Not being rude or anything...

    Moving on, there's nothing wrong with having the navigation on the left hand side (though I may be biased). It does kind of run in to the main content a little, but it would do that whichever side it was on. And I think you need a bit more of a margin on your blogmark box.

    That said, far be it from me to claim to know everything (anything?) about UI design - just sharing my thoughts. Oh, and as Tony says, "put the squares back"!

    Andrew - 25th November 2003 12:23 - #

  22. I prefer this new colour scheme, but I think the navigation column should have stayed where it was. Now it's a lot slower to read the first entry (you need to scan for the beginning of the second column rather than just look straight at the left-hand side). Perhaps this could be mitigated a little by having a much more prominent divider between the two columns, but then you'd lose the simple, clean design you are going for. I think the header could do with a bit more padding or non-specific "oomph" too.

    It might be an idea to archive a standalone HTML/CSS page in the same way Mark Pilgrim does, because a year and two designs later, this discussion won't make much sense.

    Jim Dabell - 25th November 2003 13:31 - #

  23. Hmp. Unlike others, I experienced no confusion upon visiting your site today. The man blog content is immediately discernible. The left and right columns are not distracting, fading into unimportance until focusing on them. The colour scheme is quite pleasant, this from a colour-blind person. It is easy to distinguish visited from non-visited links and the green background provides a relaxing difference from the harsh white background previously used. All in all, two thumbs up for a very nice design. Note: The previewing comment screen is still black text on white background.

    Tzicha - 25th November 2003 13:50 - #

  24. On yours, as well as a couple other CSS-type sites, if I try to middle click links in Firebird to open them in a new window, I get the scroll action. It's as if Firebird isn't recognizing it as a link. Even though the cursor changes to a hand. Anyone else have this problem?

    This is a known bug. Only workaround is to disable autoscroll in advanced options.

    Tom - 25th November 2003 13:51 - #

  25. It feels a bit like being in a hospital with the green. But the principal is good. How about #F5F5F0? That's nice.

    Ed Dowding - 25th November 2003 14:12 - #

  26. Personally, I quite liked the orange, but I'm sure I'll get used to the green. However, I do agree with the rest of the 'nav on the right' crew. On another note, along with Firebird, I have noticed that I cannot use my usual Mouse Gestures in Mozilla 1.4 (under Windows) on the site - I usually do a right-click+mouse up to open a new tab, but it doesn't work :(

    Ben Thorp - 25th November 2003 14:38 - #

  27. On another note, along with Firebird, I have noticed that I cannot use my usual Mouse Gestures in Mozilla 1.4 (under Windows) on the site - I usually do a right-click+mouse up to open a new tab, but it doesn't work :(

    This is a known bug in the Mouse Gestures extension (again, affects only XHTML pages) that will be fixed in the next release of the extension.

    Tom - 25th November 2003 14:53 - #

  28. On yours, as well as a couple other CSS-type sites, if I try to middle click links in Firebird to open them in a new window, I get the scroll action. It's as if Firebird isn't recognizing it as a link. Even though the cursor changes to a hand. Anyone else have this problem?

    I middle click on the left of the link, then move the mouse horizontally then middle click again and it opens no problems. Just don't move the mouse vertically or you're left chasing the link about the screen ;)

    Andrew - 25th November 2003 15:03 - #

  29. Simon's not alone. Zeldman, for instance, has a left-hand column. In that case I think it works quite nicely, because it butts against the straight edge of his short unjustified lines of main text. But I suppose, as we read left to right, and as right handers probably tend to sit a bit off to the left, it tends to move the focus of interest a little into what's external to the site, unless one uses a smaller size font than for the main text.

    I did find the orange quite cheerful, but green's cool. :-)

    Michael - 25th November 2003 17:32 - #

  30. Simon, do you KNOW how hard I had to try to not mimic your blog when I was doing mine?!?!? And now you go and change yours to the same bloody layout!! Grrrr Jokes aside, I do think it's quite nice, although not quite as distinctive as the orange. I think it's pretty easy to get used to the nav bar being in a different place and it definitely is a nice incorporation of your blogmarks -- are you just going to keep adding to them so you end up with a massive long list in the end? All in all, quite nice, not sure you should stick with it though.

    Meri - 25th November 2003 17:37 - #

  31. A daring redesign (kind of) to say the least. I like the green. I like this site way better than the old one. That orange never worked for me. Mad props for even doing a change on a site that must receive a large amount of traffic.

    Scrivs - 25th November 2003 17:46 - #

  32. Hey, it's a nice layout! Good stuff! My only problem is link color, Could you please, please add some more contrast? Also, the visited links almost merges with the background color! Pretty hard on eye! Other than that cool stuff! JD

    JD - 25th November 2003 18:10 - #

  33. Btw, I am also re-designing my blog. Check http://jdk.phpkid.org [Guess from where I took the inspiration for colors??? ;)] JD

    JD - 25th November 2003 18:11 - #

  34. I'm liking a blue... html, body { font-family: georgia, serif; background-color: #fffff0; color: #000; } html, body, div#header h1, div#header p { margin: 0; padding: 0; } div#header { padding: 0.3em; background-color: #367; color: #eee; } div#header h1 a { color: white; text-decoration: none; } ul#bmarks { padding: 0.3em; border: 1px solid #ABC792; list-style-type: none; width: 10em; float: right; margin-right: 1em; background-color: #ddd; } div#menu { position: absolute; top: 4.1em; left: 0em; width: 12em; border-right: 1px solid #367; } div#menu h3 { margin: 0; border-top: 1px solid #367; padding-left: 0.2em; font-family: verdana, arial, sans-serif; color:#000; background: #ccd; font-size:0.9em; line-height: 0.6em; padding: 0.3em 0.4em 0.2em 0.2em ; } div.entry { padding-bottom: 1em; border-bottom: 1px solid #367; } input, textarea { background-color: white; color: inherit; border: 1px solid #367; } input:focus, input:hover, textarea:focus, textarea:hover { border: 1px solid #360; } a:link, a:visited, a:hover, a:active { color: #369; } ul#bmarks a:visited { color:#369; text-decoration: line-through; } a:link, a:visited, a:hover, a:active { background-color: inherit; color: #369; } a:visited { background-color: inherit; color: #399; } .blogrollUpdated { color:#666; font-size:0.7em; text-indent:0.7em; font-family: verdana, arial; }

    Ed Dowding - 25th November 2003 20:55 - #

  35. On yours, as well as a couple other CSS-type sites, if I try to middle click links in Firebird to open them in a new window, I get the scroll action. It's as if Firebird isn't recognizing it as a link. Even though the cursor changes to a hand. Anyone else have this problem?

    This is a known bug. Only workaround is to disable autoscroll in advanced options.

    Or upgrade to a Firebird nightly. The bug was fixed a month ago (see comment 18). It's not marked as FIXED in bugzilla because the fix introduced a minor problem with pure-XML (not XHTML) pages.

    Jesse Ruderman - 25th November 2003 21:03 - #

  36. How about providing alternate stylesheets and a cookie to remember which one we pick?

    alanjstr - 25th November 2003 23:30 - #

  37. You should definitely add some space inbetween the blogmarks. Now it is hard to discern individual blogmarks as they tend to run into each other (especially the ones without a 'via').

    Thorn Vandevelde - 25th November 2003 23:41 - #

  38. Oh, I got it. It is not left side navigation what gets me, it is the absence of margins...

    ic - 25th November 2003 23:47 - #

  39. Wow, talk about feedback! I've improved the contrast between visited and unvisited links (I agree that they were far too close together) and I've changed the header to a darker shade of green because I tried it out and liked it better. I've also added a 1em margin around the whole layout just to make it seem a little less crammed in. I'm seriously considering adding a style switcher as well.

    Simon Willison - 26th November 2003 00:14 - #

  40. Personally, I think this one is MUCH better than the last one.

    jonner - 26th November 2003 03:08 - #

  41. Some light dusts and scrathes in the background of the header would bring back the fun of the squares. A different shade of green in the background of the navigation could increase its visibility against the main content area.

    Whatever, the new design and features are some great things.

    P01 - 26th November 2003 03:23 - #

  42. Though Kermit might sing "it's not that easy, bein' green," I vote thumbs-up on the green over the orange. My only suggestion would be to put in a few pixels of space between each item in the blogroll, to help each item stand out a bit more.

    Jay Small - 26th November 2003 13:16 - #

  43. Love the green Simon. :) Kind of makes me feel at home.

    To be honest, I come here for the content not the design... so it matters little to me.

    Carry on Sir.

    Chris Owens - 26th November 2003 16:45 - #

  44. I see you've discovered padding! I disliked the way the old layout was crammed in, though the orange was a nice colour.

    I prefer this layout! Thumbs up from me!

    All I would change is the background - it's a bit too green. But I guess I might get used to it.

    chris hester - 27th November 2003 16:56 - #

  45. Simon, I've always liked your site layout. I've been really surprised by the variety of comments about the number of things everyone seems to want different. There doesn't seem too be much of a consensious. It's like there are as many different graphical opinions as there are people, It looks as though one might just as well not worry too much about other's opinions. Just take your best shot at what you think makes a good graphical design. Keep up the good work. I think your design "rocks!"

    Bruce Browning - 7th April 2005 17:40 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/11/25/collaborativeRedesign

A django site