A Time for Change
Here are the "cliff notes" of the design changes this blog received last week in Jeff's own words. The old design is still available for those of you who preferred it. Personally I love the new design since it
- prints out really well
- doesn't kick out the formatting if I include a large code sample
- provides more whitespace
- looks darn good!
Why the redesign?
Other than Adam being a friend of mine, I actually read his blog fairly often as I find a lot of the posts to be helpful or insightful. I've subscribed to the main RSS feed and find myself clicking through to the site more often than not. There are a few reasons I wanted to redesign his blog. First, if you've ever had the pleasure of knowing Adam you'd know straight away that the old blog design did not reflect his personality in any way (except for the fact that he lives in code and not in design and that was stiflingly apparent). He's professional, thorough and anal (in the good way, like me) and the old blog just looked kind of hobbled together. Second, it was impossible to scan. You couldn't distinguish between the different posts because there was no real visual distinction between them (and no, a plain old <hr> does not make a visual distinction). And because. like I said, Adam is thorough - his posts tend to lean on the longer side (especially lately) which made his main page pretty long which made the scanability of it degrade even more. Lastly, I just got tired of looking at it - which was most likely due to the three points I just made.
What was the reasoning behind the changes?
So the biggest thing that bothered me about his old blog was that it was a big ol' table-based layout which basically means your data and presentation are all jumbled together. I personally think it is wicked cool to be able to view the site unstyled (or "in the browser's default style" as Joe Clark would say) and have it look like a normal document structure, with headings and lists and all that fun stuff. (Yes, this is still a work in progress, so please don't get on me about the sidebar links not being in unordered lists, I'm getting there.) While some could argue that table-based layouts are "easier" I would argue that it's not what they were intended for. I could also argue that once you get comfortable in a CSS-P world, table-based layouts become very limiting. It's also wicked cool to be able to change the styles (layout included) without having to change a lick of the underlying HTML.
Some of the techniques employed
The easiest thing to do is to view the source and look at the different stylesheets. There's a lot of talk about how best to structure your stylesheets - I say use whatever works for you. What works for me is this: I typically use one main stylesheet (basestyles.css) that I import into the different, media-specific sheets. This base file contains the very basics, nothing position or layout related. I use two basic media-related stylesheets (screen.css and print.css -- Adam already had "style.css" so I opted to not rename his) in which I import said basestyles.css and then the custom styles for each media. As for my approach on screen and print, I typically focus primarily on the screen version - this is the web after all - and then duplicate it and being removing/editing it down for the print version. This is what works for me, and my process has morphed a few times already, so like I said - do what works for you.
The feedback (so far)
One of the most interesting things (to me at least) happened when Adam make the big switch from the old design to the new design. The first two (non-Adam) comments that came through were about the "big-ass" skyline image as I fondly refer to it. One was about it being an "ugly gif" now and the other was about liking the warmer colors of the old image. While both of these comments are perfectly valid they're also perfectly subjective. My guess is because the old gigantic image was so gigantic it was a fairly gigantic part of the the old design which made it the easiest thing to actually notice when looking at the new design. If nothing else, I can chalk it up to "interesting."