456 Berea Street redesign notes

The redesign I mentioned in Redesigning: please pardon my dust has now been rolled out. There will probably be some issues left to deal with, but I am not aware of any major breakage going on in any browser of significance. If you’re reading this in a graphical web browser, reload to make sure you have the new CSS and images. If you’re in a feed reader, come for a visit.

I ended the post I just mentioned by asking which designer my readers think I collaborated with for this redesign. A lot of names were mentioned, some of them humorous (thanks for the laughs!), most of them serious and actually quite reasonable guesses. Had this been an election, however, there would be no doubt about the winner: Veerle Pieters. And you were right.

When I first talked to Veerle about this project I told her I wanted a new and fresh look without being so different that returning readers wouldn’t recognise the site. The grasshopper image in the header is very characteristic of this site, but as I had grown a bit tired of it I was considering removing it or making it a lot smaller. Veerle quickly convinced me that the grasshopper had to stay, so it’s still around.

I also wanted to avoid making major changes to the HTML structure to speed up the process. I find few things are as stressful as not having a solid markup foundation to fall back on. Add to that the fact that I have no development version of the site and have to make all markup changes live, and you may understand why I was hesitating. But after seeing the first layout draft I realised I was going to have to compromise on that point.

Veerle also had to compromise. First of all she would have preferred to do a complete redesign and start from scratch. I didn’t want that, which made her feel a little constrained creatively. And some of the text colours in the design Veerle sent me, though very lovely and bright, were a little low in contrast and had to be changed slightly for the sake of readability. I didn’t want to change the colours she picked too much though, so I actually didn’t go all the way when adjusting them. That’s right, there are a couple of colour combinations that will not pass both the brightness and colour difference tests in tools such as Jonathan Snook’s Colour Contrast Check.

I compromised. Veerle compromised. And that’s an important thing to realise about web design. We both had to make compromises to make the end result better. Such is the life of the web professional. But it was a fun project that we both learned from. Read Veerle’s thoughts on the project in Plastic surgery on 456 Berea Street.

I hope you like the result - I do. Being something of a perfectionist I know that there is always room for improvement though. There will most probably be a little tweaking going on as I become aware of issues and find time to do something about them.

And now something I’m a little nervous about asking, but here goes: What do you think?

Posted on August 6, 2006 in Site news

Comments

  1. I love it! You still recognize the site, but now with fresh colors. Two thumbs up!

  2. I really like it except for the green headings.

  3. August 6, 2006 by Sondre

    First brilliant ! Now Galactic ! Whats next ? Astronomical ?

  4. August 6, 2006 by Tony

    I ususally like your typography but the headlines (h1 and h3) are difficult to read on a 1024x768 laptop screen with antialias off.

    It’s quite obvius that the designer had to compromise a lot but over all I think the redesign is ok and I don’t think that this is the kind of site whrer you want the “wow-effect” on your visitors.

  5. I second Kim, it’s a great realignment.

  6. August 6, 2006 by Johan

    The colors have an organic feel, derived from the header image of the grasshopper. Earthy tones. Which is a good thing.

    Though I have a problem with the organisation of the layout. At the bottom you have the best of, random places to go. This is a good designed piece, though I would add that style to other sections as well.

  7. As said before, a nice realignment. I like it!

  8. I love it. I actually had a look on it about 30 minutes ago and I didn’t realize that it was redesigned even though I felt something was “wrong”. It took me a while to realize what had happened and after checking again I can’t say anything else than “I love it”.

    What I like the most is the totally fresh feeling the site gives you and as I’m a sucker for pixel icons i really like the small icons you have everywhere. It’s really neat!

    The illustration of your head in the sidebar lent from the Netrelations site is also a very nice addition to the site, it sends you the same kind of message that Veerle’s illustrader header does. “Oh, so that’s the author behind this.” Making yoruself a cartoon character is a neat way to create an image.

    Nice work, now I’m off to read Veerle’s post.

  9. The revisions look nice. One of the things quickly becoming a pet peeve of mine when visiting your site was the sidebar. Cluttered, it was.

    Not any more, though. It’s organized and easier to read. And that illustration of you is a solid addition.

    The redesigned header also feels really nice. The changes to everything have been well done.

    Don’t worry too much on the contrast issue. As long as it’s close, I think you’ll be okay. I believe it’s the effort that counts.

  10. Very nice.

  11. August 6, 2006 by Erwin Heiser

    It looks a lot like the old site but then again not :)

    You can really feel that someone with taste gave it a facelift!

  12. Enjoyed reading both your post and Veerle’s - so glad she didn’t ruin the first impression by showing a full grab of the redesign.

    I do have a gripe, but mainly it is a success. The masthead and nav bar are significantly crisper and feel more modern (I want to say “contemporary” as most people get that, but contemporary to when? Modern is right). Even the adverts fit the layout now. Nice idea to let the sidebar breath by utilizing the “action-packed footer”.

    My gripe? OK, I don’t like the green headings with red link colours in the sidebar. The colour combination combined with underlines and what feels like too little line-height is bugging me. It works better for the Quicklinks where there are less green headings. Maybe I’ll get used to it, but right now they feel too bright.

    Otherwise, supercool. You know I love your work (and Veerle’s), so I hope you don’t mind the sprinkling of constructive criticism. It’s a 90% success in my view, but then I’m very hard to please.

    Nice one guys…

  13. So very simple, yet adding clarity to the site. Subtle use of colour, bringing a softer feel, yet sharper edge to page elements. Hats off to Veerle.

  14. I like it too, very very nice colors. Veerly has this special something when choosing colors :)

    What I like most is the sidebar that is cleaned up. The last version was very busy and the sidebar to large. Now with “Best of 456 Berea Street” and “Random places to go” on the bottom of the page everything seems to be in it’s correct place.

    Well done, thumbs up

    Ohh, just realized, one small thing if you could do…on your LAB page, there is really no space between the items. If you can add at least 5 - 10 pixels really every page would be perfect.

    Boby

  15. I really like the new site, feel much clearer than the old one. Clear is good! :)

    The search bar gets very little attention though, the grasshopper took all of mine so I almost missed it.

  16. I like it! Previous design was good for me, and the new one is a bit better one.

  17. August 6, 2006 by Lori

    Yay, for the grasshopper! I was expecting him to be sacrificed, but I love the grasshopper, so it’s good to see he’s still alive and kicking.

    Agreed that the green headings are a little blurry and hard to make out to these old eyes. Ties in with the grasshopper in the color scheme of things, but a bright orange would make them hop out more. Perhaps, a brighter shade of green would work, too, and avoid a preponderance of the red/orange scheme, but I’m more of a coder than a designer. Legibility-wise, they do seem to get a little lost.

    Awesome facelift otherwise. Feels right.

  18. I’ve had to come back a number of times today due to some research for an article I am writing and it [the re-design] sure is working it’s magic. All very subtle but really very nice indeed. A superb job guys… but of course I expected nothing but a superb job ;)

  19. Very nice indeed!

    After watching a years worth of nearly imperceptible changes to your site, this “redsign” is barely perceptible. I don’t suppose that you took any screenshots of all the various changes you made.

    How soon before you begin realignments? :)

  20. Site looks pretty good, she is a really talented web designer :)

  21. Got better, more cosy for my eyes.

  22. Whoa! This is lovely!

    Love the Century Gothic!

  23. Very nice layout!! :D

    Congrats to you Roger and Veerle!!

  24. Great realignment. Familiar, yet fresh.

  25. I love it. Period.

  26. I agree!! it is an awesome upgrade!!! I like the subtle backgrounds, the gradient, all of it so cool!!!

    Congratulations!!!!

  27. August 7, 2006 by raine

    Looks good!

    I’ve had a tab of your site left open for a couple days now, hehe, so I could compare it side-by-side with the new design!

  28. Realignment is arguably a more apt description on the face of it. The colour changes have definitely helped to bring cohesion to the design.

    The few things I would single out for further comment have to do with the headings and the background fade on the body.

    On my Viewsonic TFT monitor at least, a fair bit of banding is visible in the jpg. I’d consider a slightly less compressed image there. Also, I like the idea of giving the background fade a fixed position. It helps make sense of all the white space down here, where there is no sidebar content, just a cascade of comments.

    Based upon past experience ;), I have the feeling that your headings look somewhat better when viewed via your lovely Mac than a Windows box. The look of your headings on Windows kind of betrays the fact that you’re a Mac user. Personally I would bump their size up a notch, or perhaps try them at bolder weights (including the sidebar h3s).

    Minor things, but something other than the deserved stream of congratulations you’re both receiving.

  29. I like the realignment and the fact that it’s recognizable. Nice colors and the readability’s improved. Good work Roger and Veerle!

  30. August 7, 2006 by Roger Johansson (Author comment)

    Thanks for all the comments so far! Thanks also for the good improvement suggestions. I’ll be tweaking some of the things mentioned to make them work and look better. Oh, I’d better check with Veerle first, hehe :-).

  31. A nice redesign, well done to the pair of you. Veerle’s article shows how much thought has gone into apparently really minor changes.

    One suggestion: the “selected” and “mouseover” states of the main nav bar could do with a subtle gradient to match the rest of it. They look a little unfinished as a plain solid colour.

  32. August 7, 2006 by Jimmy Nordlund

    I see Century Gothic have been replaced with Trebuchet. Didn’t get a chance to see the original headings, but they look great the way they are now.

    Great work Roger and Veerle. Two thumbs up!

  33. August 7, 2006 by Roger Johansson (Author comment)

    Jimmy: The headings use Century Gothic if you have it installed. Trebuchet is the next alternative in the list for now.

  34. August 7, 2006 by kungfukenny

    Nice redesign, I’m not too sure about the green headers though, I like the colour against the whole design but they don’t seem to stand out too well. Just a suggestion from a newbie but maybe adding a graphic to the header or giving them a little more space around them.

    Then again the content is always the winner on this site and even if the design was terrible I’d still be comming back.

  35. Nice. Very nice! =)

  36. It’s pretty, and fresh, but I think you could have stood to go for something a couple steps further away from the old design.

    I do like it though. :)

  37. Hehe, nice author comment style :)I was wondering if you’d change that or not. Anothert thing, I really like that keep your site validated as usual, it still “tokvaliderar” as I would say in Swedish.

  38. Definitely very nice :o) It’s somehow cleaner than before.

  39. This version is much cleaner and relaxing for your eyes.

    However if I had Veerle available for a redesign I would let her change everything. The content of this website is just brilliant! Why not the layout of it?

  40. i thought you were going to change the grasshoper image, roger :D

    anyway, nice realign, roger. added some whitespace and it looks much cleaner now ;)

  41. Roger: any chance we could take a peek at a few of Veerle’s concepts/mockups?

  42. August 7, 2006 by WhereIsThatDeafGuy

    Very nice - easy on the eyes and much cleaner. The combination of colors and fonts blend in nicely, which makes for a relaxing atmosphere.

    Only drawback is the “cluttered in the gutter” in the right column even though I keep coming back to your posts. :)

  43. August 7, 2006 by Jimmy Nordlund

    Roger: Hmm, that’s weird, I was sure I had Century Gothic installed. Apparently I had somehow managed to deactivate it in FontExplorer X. Thanks for the heads up.

  44. I really like it, Roger. I think the sidebar is the biggest improvement - it is so much cleaner. I really dig the ‘Roger’ head sketch and the subtle :hover treatment on the footer links.

  45. Roger:

    1) Clicking slightly to the left of the main content will select it (at least in Firefox). Is that deliberate?

    2) Is there a story behind the grasshopper? ;-)

    3) Having just gone through a redesign myself (often using 456 Berea Street as inspiration, I confess), I pondered awhile about the “skip to main content” links at the top of your pages. I know this is primarily for accessibility purposes, but it has always seemed a bit odd to me regarding sighted viewers. So this is what I finally opted for on my own site: a) add the skip links within an <UL> element; b) set “display: none” for it when “media=screen”; c) set “display: block” when “media=aural” (to make it “visible” to screen readers, not to the visitors, obviously). Do you think that makes sense?

    Congrats on the redesign.

  46. August 7, 2006 by Sami Pekkala

    Christian:
    Regarding your third question: Screenreader Visibility

    You should also remember that skip links are useful for keyboard users and mobile phone surfers, too.

  47. I like the design but the basic font is very murky on a PC. I have loaded the page in IE, Firefox and Opera. It reminds me of the font molly.com used to use. It is so “blurry” that I don’t want to read the page. Is there some trick of which I am unaware to correct this? What font are you using for paragraphs? Thanks.

  48. Roger, I luv it! The headline font is nice, I use ITC Avant Garde Gothic, then Century Gothic and Trebuchet as back ups in case all else fails.

    Like a renovation of a place one frequently attends, it still has that 456 Berea Street cozy feeling, but with a fresh coat of paint smell to it. Paint applied by Veerle apparently.

  49. I really like the new design, it’s very refreshing to look at it. I was a little bit tired of looking at the older one, being a frequent visitor :-) I must say I’m a little envious when I look at those screenshots from Mac in the Veerle’s article… The fonts don’t look half as good on the PC :-| Should have bought a Mac ;-)

  50. Just to tell the author I’m still there: ;)

    “nofollow” still …, and the sidebar still makes the site look overcrowed, but nice improvement nonetheless.

  51. I love the new look redesign, and I think Veerle has done a fantastic job with your requirements. My only negative comment is that I was expecting a lot more in a redesign (and this is really too similar to the previous version IMO)…which is a shame, an opportunity missed for something more dynamic and different perhaps. That comment aside though - I think the use of colours is a great compliment to the site - and article comments are easier to read than before (which all helps right?!) Overall: the site appears less cluttered and ‘busy’ than before - making it more functional.

    Well done Veerle and Roger! :)

  52. August 8, 2006 by impressed

    wonderful. beautifully clean and easy to read.
    have to say .. thank [deity] she didn’t talk you into unreadable black background and dark text.

  53. August 8, 2006 by Roger Johansson (Author comment)

    A couple of you have asked why we didn’t take the chance to do a complete redesign. While Veerle would have liked that, I’m of the opinion that it isn’t always necessary to start from scratch. In this case I also wanted to touch the markup as little as possible, and some of the design/layout changes Veerle first suggested would have required changing the source order of the markup too much - it wouldn’t have worked well enough with CSS disabled.

    We’ve been doing a little bit of tweaking in response to some of your comments. I hope you think it’s a further improvement. The comments also use gravatars now. There’s more to come - I’m not going to leave things exactly as they are but continuously make small adjustments as I become aware of issues or think of ways to improve the design.

    kungfukenny:

    Then again the content is always the winner on this site and even if the design was terrible I’d still be comming back.

    Thanks, that’s good to know :-).

    Kalle: Hehe, yeah I like to make sure all the sites I build “tokvaliderar” ;-).

    Michael Thompson: I’ll check with Veerle if I can upload a couple of design sketches.

    Christian Hess:

    1. No, that isn’t intentional. I noticed it but haven’t looked into what is causing it.
    2. Yes, it’s a grasshopper I saw in my girlfriend’s parents’ garden in the (northern hemisphere) summer of 2004. It was sitting there on this huge red sunflower. I’ve never seen such a large grasshopper in Sweden so we had to take a picture of it. I decided to use it because I like the colours.
    3. Skip links are also useful for sighted people with impaired mobility, such as being unable to use a mouse. That’s why the best thing is to let them be visible. More on that in Skip links: visible or hidden?. And no, I would use another method to hide the links since the method you suggest will hide them from pretty much everybody - as far as I’m aware the “aural” media type is not well supported.

    Alexandra: I’m a little surprised that you find the font blurry. I have checked it in several different Windows configurations and can’t say I agree. The body text is “Lucida Grande”,Geneva,Verdana,Arial,Helvetica,sans-serif;.

    Jens: Yeah, “nofollow” is still there. If you can stop people from posting spam I’ll remove it ;-).

    impressed: She knew better than even suggesting that ;-). We’ve had quite a bit of a discussion on the subject of light text on dark backgrounds, hehe.

  54. I’m really enjoying the redesign, Roger. I find the sidebar much more friendly to read now that it’s been given a touchup. The slight changes all around the design are a great step forward and you and Veerle deserve a pat on the back. In a way I’m glad a full redesign didn’t happen, but I would have loved to see what Veerle would have come up with. Great job.

  55. I had to adjust my eyes and it looks like a plague of grasshoppers are nesting on the page but other than that it seems fine.

  56. Thank you, Sami and Roger, for the great input on the skip links. I don’t wish to press the matter here, since it’s off-topic, except to say that I’m crestfallen to learn that screen readers don’t observe standards and fail to implement the very mechanisms we’re all trying so hard to apply to benefit disabled users. Regarding the usefulness of skip links for sighted (albeit physically impared) visitors, I’m afraid I still don’t see the point. In my site, I chose to use accesskeys that are visibly marked as such by underlining the appropriate letters. Any way, I’ll carefully study the references you’ve provided me, and just might end-up changing my mind. Thanks again! :-)

  57. August 8, 2006 by john

    Your lines seem to be a bit wide compared to the line-height. Why using the 1024 width if your grid basically has two columns only? The main column would be more readable if it was less wide IMHO. But other than that - nice!

  58. August 8, 2006 by Roger Johansson (Author comment)

    The text selection bug in Firefox should now be fixed. It was caused by an “overflow:hidden” declaration on the outermost div.

    Jon: Thanks! :)

    Robert: Hehe, tell everyone to get a gravatar and the grasshoppers will be gone!

    Chirstian: It’s all explained in detail in the article I linked to, but in short: imagine you can only use a keyboard and have to tab-tab-tab through lots and lots of links to get to a different part of the page. If the first couple of links will let you skip straight to the content/nav/whatever, don’t you think that would be a great time saver for you?

    john: It’s a matter of personal taste I think. Plus the layout is elastic, so make the window narrower until the lines of text are the length you want them to be :-).

  59. Hi Roger. Thank you for responding to my font question. I did a little test based on your font string and discovered: I am using Win2k and Lucida Grande is not installed by default, therefore the page is rendering in Geneva. I do not think Geneva is installed by default on Windows machines but I have it and it is the blurry font. I uninstalled Geneva and the page rendered in Verdana and is now very clear. It is an interesting dilemma: coding for operating systems with unexpected fonts. Thanks for all of your very useful articles and tutorials.

  60. Why aren’t you using your NetRelations drawing as your gravatar?

  61. Oh how I love the Century Gothic headers. Overall, a lot of little touches make for a nice upgrade. Bravo.

  62. I like your Re-design very much! Good work and clean..

  63. I really like the new face lift Roger, everything seems less cluttered and it really feels like it’s been organized better. I especially like what you’ve done with the comments section as it looked a little bare before.

    Hats off you (and Veerle)!

  64. August 9, 2006 by Lori

    The font on the headings is perfect and while it seemed initially the shade was causing them to fade for me, it may just be the weight (or lack thereof) on those. How do they look in bold? :)

  65. The design is too similar to the last one. The question is: why bother? At least you could have come up with a whole new header.

    Note: the link to comment guidelines doesn’t work yet?

    Also, some line breaks in the comment preview are lost! Such as the ones around the code below. (There should be a break between the styles.)

    As for comments, I dislike gravatars myself. They can add hundreds of extra images to the page. Luckily Opera and Firefox enable custom CSS to be applied to any site, so I have a made a stylesheet with the following code in it:

    comments img {display:none !important;} comments dt, #comments dd {padding-left:0 !important;}

    (To do this, save the code in a text file, then just right-click on the page and select “Edit site preferences”. Use the Display tab to choose the file you saved. Refresh!)

    No more gravatars! :-)

  66. Ahem. There should also be hashes before the term “comments” in the CSS otherwise it won’t work! I didn’t spot them being removed in the preview, which I guess is down to the Markdown syntax or something.

  67. August 10, 2006 by Roger Johansson (Author comment)

    Alexandra: Thanks for the info. Weird that Geneva is blurry on Windows.

    Sean: Don’t know. Just didn’t think of it I guess ;-).

    Aaron, Eric, Jonathan: Thanks!

    Lori: I’ve tried bold for the headings, but they become too bold for my taste.

    Chris: Why bother? Because I didn’t see the need to start from scratch.

    The comment guidelines link works for me. In what browser does it not work?

    Yes, the comment preview is borked. It’s always been, and I don’t know how to fix it.

    Not sure if the gravatars will stay. While they do add a bit of personality to each comment they also clutter the page and slow loading down, sometimes by a lot. It’s an experiment.

    Yeah, the Markdown syntax is probably what removed the octothorpes. It uses them for headings.

  68. The comment guidelines link works for me. In what browser does it not work?

    Hmm, I think I got confused by going to the same page. Somehow I missed the text. Sorry about that.

  69. August 11, 2006 by Devlin Palmer

    Amazing work. I love the gravatars. :P

  70. August 12, 2006 by Robert

    Everything about the site is nice except the headlines in Century Gothic. They look too jagged and, although not difficult to read, unclear. I’m viewing this on the latest version of Firefox. I just don’t think this font looks clear at the font sizes you’ve chosen. Of course bigger font sizes are out of the question, so the font must go, in my humble opinion. Or use it only on large headlines. Century Gothic looks good on Veerle’s site cause it is using larger font sizes.

    Other then that the site look nice. Not great, but given the constraints the designer had to work with, it was well done. I still like the old design. But a new look is always nice. And I agree with others, Veerle is a great designer.

  71. I totally like the redesign. You’ve both done great work and I like that you stayed with the “old style” of your site.

    I like the headings and the grasshopper very much!

    go on!

  72. Nice redesign.

    I totally understood your comment earlier about not being quite happy with your site design. My site is currently in the same boat. It’s got a half-finished, decent, but boring design that needs some pizazz.

    I’m also glad to see you chose a fluid layout. It’s nice to see a good example of one. Just out of curiosity, is there a reason you didn’t choose to set a minimum width? I know that IE doesn’t support min-width, but it might be nice to keep your site from getting smashed to bits in the browsers that do.

  73. August 14, 2006 by Roger Johansson (Author comment)

    Devlin, Aaron: Thanks :-).

    Robert: I’m looking at adjusting the headings a little bit to make them look better on Windows machines. It’s gotta be Windows’ not-quite-what-it-should-be antialiasing that’s causing it, because they look nice and clear in Mac OS X.

    Mike: I didn’t set a min-width because I figure people who have really, really narrow windows would rather have the layout squashed up a bit than be forced to scroll horizontally. At least that’s my personal preference.

  74. Fantastic once again Roger. You continue to inspire.

    Looks like you two made quite a team. Managing to keep the original feel but freshening things up at the same time. What more could we ask for?

    Congrats.

  75. August 15, 2006 by Mike Stone

    Sorry for the late comment. I was going to point out, and complain, that the Html Validator extension in Firefox reports numerous warnings (125 on this page) when visiting your site. However, further investigation revealed that it was the advert frames that are to blame. Quelle surprise!
    So I will not complain but humbly suggest that you add to the ‘Standards compliance’ section of your accessibility statement a disclaimer covering this issue. Seeing you are ‘something of a perfectionist…’ I am sure that you will appreciate my point.
    BTW if you had not mentioned the redesign I doubt if I would have noticed. I come to the site via RSS Menu, go straight to read the article and comments then move on rarely looking at the sidebar where most of the improvements seem to be.

  76. Looks great and much cleaner, but I’m convinced the click-throughs on your Google ads will be lower now. Do report back if it changes - I’ve bet myself £10 and want to win :)

  77. August 16, 2006 by Roger Johansson (Author comment)

    Sam: Thanks!

    Mike: Yes, I should add something about the ads making the HTML Validator extension look like the site has validation errors. A suggestion to make that extension a little more useful: open HTML Validator’s Options dialog and set it to “Validate page in all domains except googlesyndication.com”. That will get rid of all the false positives from AdSense.

    Peter: About the same so far but if anything, yeah, a little less. Hard to tell.

  78. Nice re-design. Cleaner, sleeker and pixel perfect.

  79. Just curious, but why abandon XHTML in favor of HTML/4.01?

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.