Subscribe to
NSLog(); Header Image

New Site Design

I got bored at around 2am (eeks! It's almost six!) and decided to redo my site. I moved quite a bit around, optimized some pieces, changed my stylesheet and every page, added a new index archive (the categories list, as it wouldn't get rebuilt on older archives, is now its own file and is <?included?> in every page). I changed how some of the pages build. I'm still not happy with rebuilding speed, but I'll tweak all of that tomorrow or another day.

I like the "fade out" at the top (scroll down, look at the top of your browser window). I like the color scheme (for now). I like the sparse feeling. So far as I can tell, too, everything continues to validate, etc. I may write more about this later.

Woo! Okay, bedtime now. :-zzz

P.S. Several people have noted that David Hyatt updated his blog too.

25 Responses to "New Site Design"

  1. Looks cool. Do you have a screen shot of the old site? Well you don't realize how much you have done untill you keep track of comparisons, right!! 🙂

  2. I like that static DIV doing the fade. Once I saw it I knew how you did it, but I don't think I'd ever think of using it that way. 🙂 Why not the bottom as well? Use JS to get the window size and then write out the proper CSS (because 100% never works).

    Oh, and nice steal for those titles. 🙂 Curious, though, why a bull's eye? You could always do categories like I've done, or something like Dave stole^W did and put something vaguely hint-like there. Just not sure about the point of a target. Hmm. Early for me too, I suppose. 🙂

  3. It's clean... I like it.

  4. Okay, I finally figured out what's bugging me about the new design. Remember, I come from a print design background, so bear with me, but there's too much trapped white space for my eyes. There's a white border and there's white around all the text. There's nothing pointing my eyes to the content area above and beyond the rest of the page because it's just like everything else.

    I think you should, and this is your site, of course, but I think that if you removed the outside box and filled out the page or made the outside background like a #eee or #ddd to lock you to the inside box that my nagging mind would finally shut up about the trapped white space. 🙂

    Again, I just used to do this as a day job for some years so my mind's been trained to break on things like this. 🙂 You'll note my page does everything with text and boxes and (almost) never graphics; that's what I always designed with when I was in print. 😉 Once you get into a certain mindset, it's often hard to break free.

  5. The shading doesn't work in Safari (despite 100% width and the repeat-x thingy, it doesn't go all the way to the right) and IE/Mac just cuts off the top 25 pixels with a white bar - I suppose it's applying a 50% threshold to the PNG.

    But it's a cool idea...

  6. Mac/IE should be officially unsupported as of two months ago, IMHO. It doesn't do anything Gecko or KHTML do. Win/IE is just pathetic in comparison to Mac/IE, much less Gecko or KHTML.

    But I couldn't be biased as a web monkey, nooooo....

  7. It works fine, Rainer. Not in IE, but in Safari, Camino, OmniWeb, Mozilla. Anyone using IE or, hell, iCab especially should be shot. 🙂

  8. Hm, had to do a manual reload to see what all the fuss was about (I have the impression that browser aren't particularly clever when it comes to reloading style sheets).

    My impressions:

    The fade out is cool.

    Nice you kept the right aligned dates with the arrows. They've always been my favourite feature of your site design - although I didn't have the opportunity to steal it yet.

    There are still horizontal scrollbars in narrow-ish windows. I can see the point of wanting to control the width of the main content area to control line length and improve readability.

    However, the way you do that (fixed width as far as I can tell), you risk horizontal scroll-bars. In that case it's imho preferable to have the content at the left of the window and the links at the right. That way you hardly ever need to use (and be annoyed by) the horizontal scroll bar. [Actually this raises the question which positions scollbars start in if you're viewing a page in Arabic or Hebrew...]

    Another way to control the content's width and cater for narrow browser windows might be playing with the min-width and max-width properties instead of forcing a fixed width. Haven't tried that, though.

    Another thing about site design (the old one as well): Is there any particular reason why I can't click an entry's name in a category's listing? It took me a bit to figure out how to actually read the entry.

  9. Sven, the site is 750 wide. If your browser isn't that wide, you'll get scrolling. That's the way it's gonna be.

    As to the entry name clicking, you can't do that because XHTML 1.1 won't let me put <a> around <h3> or something like that. I forget. But anyway, click the PermaLink icon to the left of every title. That meme is perpetuated throughout the site. I might even change that little icon every now and then.

  10. Not sure if you care what the site looks like on the PC or not, but in Opera 7.10 on windows xp, your fade .png file is not butted up against the edges of the browser.

    Here's a screenshot.

    If you put padding: 0px in your definition, it should fix the problem.

    And of course IE on the PC doesn't support .pngs, so that part of it will likely look like crap. But everything looks like crap in IE.

    Other than that I really like the new design.

  11. Oh, that was supposed to say put padding: 0px in your body tag definition.

  12. I like! I guess, with all the re-designs, you've done some neat stuff. My only comment is that you should possibly make icons for categories or make that text a tad smaller, because it looks a little bad when it wraps so often.

    But I like 🙂

  13. My bad. I must have caught the site mid-update. CSS-didn't seem to have been updated completely when I saw the site (or Safari was rendering incorrectly for some reason or the other)

  14. I've still been tinkering. I think (again) that I'm done for at least a little while. I think. Some substantial changes made under the hood this afternoon. They may not be evident, but that's because they're under the hood. 🙂

  15. Redesigns

    I can't stand it, Hyatt and Erik both redesigned their blogs over the past few days, and now Ollie is considering working on his site, a bit. I am still sick of using the default style. I think I am going to have to do something about that, and soon....

  16. The new site design is broken on W2K/IE 5.50. What used to be on the left hand side (all your links, search, k-tunes, etc) is now at the bottom of the page while the articles are at the top. It's like everything is one gigantic column.

  17. Well, I don't have IE 5.5 to test, so I'll have to look at it another time. Later.

  18. You lost your fancy tooltips for link hovers with the redesign. I really liked that.

    BTW, did you code that yourself or did you get it from somewhere else. If so, I'd love to know how to do it.

  19. Applying New Design

    I am working on the new design right now. So expect to see some odd sites.… I didn’t get it...

  20. Erik, upon doing a manual reload it worked fine in Safari, as you said. Very puzzling... I'd love to ditch IE myself but I still need it for a very few sites. My bank just announced their Java code works only in Netscape/Mosaic, though, so I have 3 browsers in my dock now. 🙁


    This supposedly makes PNG files work in IE, though I haven't tested it myself.

  22. Just finished re-designing my blog, looks like evryone's doing the same this week! 😉

  23. A Redesign

    With all the redesigning going on recently I just couldn't resist. I've wanted to have a fixed size layout for...

  24. The new design's growing on me. Took a bit because I was enjoyed the old design as well 🙂

    One thing I noticed - when I roll over the badges at the left in Safari, I get a blank "tooltip" window. If I move under the badge, I get the title and URL for for the badge.

    In Camino, I don't get the blank rollover, just the title and URL when I roll under the badge.

  25. Applying New Design

    I am working on the new design right now. So expect to see some odd sights… I didn’t get it...