My long personal nightmare is over. The redesign is live. More or less. You folks in the newsreaders might want to launch a browser and check it out (quaint I know, but humor me).
You wouldn't know it by looking at it, but I've been working on this design for almost two years. You read that correctly. It's ridiculous. There were two major false starts, I moved across the country, freelanced, got distracted by NYC, spent a month in Paris, got a job, updated kottke.org near-daily, and made incremental improvements to the site, most of which are rolled up in the new design. The biggest reason for the delay was kottke.org itself...adding new features to it (photo albums, remaindered links, book & movie reviews), keeping it updated with fresh content, and not really needing to redo what was a perfectly serviceable design (especiallly with the incremental design tweaks). This design has been a very off and on affair to produce and finish...lots of off and very little on.
So anyway, you're probably thinking it's not much to look at. It's spare, not flashy, and looks a lot like the old design, especially the home page. Here are a few of the changes I made and why:
- The only site-wide navigation is at the top of the page (and repeated at the bottom). Most of the site can be reached easily from those four links (home, archives, about, contact). Tried to make it very simple.
- The yellow-green thing at the top is a tag. Like the red tag on Levi's jeans or even the red stripe on Prada shoes. It's small, out of the way, but when you see it on something, you know exactly what you're holding in your hands. Some may recognize the tag's kinship to the one I designed for 0sil8. This is intentional for reasons that will become clear at some point in the (hopefully near) future.
- For transition purposes, the tag is currently that same yellow-green as the header of the last design. It may change color or design at some point.
MostSome pages on the site are valid XHTML 1.0 Transitional. CSS for layout. The ghost of Siegel has been exorcised. The cobbler's children have shoes at last.- Every page is the front page of the site. People dropping in for the first time from Google or from another weblog should be able to figure out where they are from the contextual information in the right-hand sidebar of most pages (monthly archive pages and individual archive pages especially.)
- New about page. I rolled the "about Jason", "about kottke.org", and FAQ pages into one page. And (bad) photos of me.
- Speaking of photos, the photo albums now use the same template as the rest of the site. Check out the NYC High Line photos for example. Use the left and right halves of each photo to navigate back and next...the spacebar will also get you to the next photo. (Crap, my JavaScript for spacebar navigation isn't working on Firefox.)
- Trackbacks are being accepted going forward and are listed on individual archive pages.
- I mentioned false starts above. Late last year, I had an entire design that I'd been working on for almost 9 months (on and off) done in Photoshop, ready to be cut up and coded. It was boxy, had a tiled background, diagonal stripes, drop shadows, and lots of ornamental finishes. It was pretty, clean, lots of personality, a nice design all the way around. And if there's a dominant visual style (trend? fad?) right now, that's it (some fine examples here, here, here, and Lance beat it over the head here). I just didn't want to go there. So I went in a different direction, partially to avoid the crowd and partially to challenge myself. Do you know how hard it is to design text-heavy Web layouts that don't use boxes? Boxes are the lazy Web designer's best friend. ;) I felt bad enough relying on all the horizontal rules.
- The site may not work in your old browser. Heck, it may not work in your new browser. Bug reports on modern browsers are appreciated. If you can't read this, you're probably using a pile of crap browser like Netscape 4 or Cello or something. Upgrade to something useful. But you're not reading this, so just ignore what I said. (Wha?)
- Link color went from red to blue. Don't know why.
- Tweaked the styles on the remaindered links.
- PC users, you're missing out. This sucker looks great in Safari, Camino, or Firefox on OS X. Lucida Grande. Smooth type. Wundervoll.
- A tour of some of the best/most representative content on the site is available for new visitors or those wishing to peer deep into the guts of the beast.
- The movie section is on hiatus and will return soonish.
Some things I'm not satisfied with yet:
- The archive page. Almost every weblog has one and for the most part, they're useless. People can't easily find things (gosh, maybe that entry was in June 2001), it's not conducive to relaxed exploration...about the only thing that works is the Google search. I've not come up with a satisfying answer to this problem nor have I seen anyone else come up with anything that works well. An area for improvement.
- The tour is not what it could be. Why is there a tour and an archive page? And a front page? Seems like some simplification and/or consolidation could be done here.
And now I'll stop talking. What do you think? Comments, questions, bug reports, and constructive criticism expected and appreciated.
Let the rampant imitation/flattery begin.
Heh, if you wish to design *against* the majority of your readers (statistically probable) that's just fine!
*sniffle*
I know what you mean about a typical site's archive section. Most of the ones I see are too date-centric for my tastes. I never could come up with something I really liked better, though :(
the only thing i'm not comfortable with is the width of the left/right margins when my browser window (safari) is 800x600 or smaller. the text butts right up against the side of the window. for all i know, that was your intention, but a bit of a margin (maybe as wide as the header "tag" is tall) would sweeten things up a bit. just my personal preference though.
Nice work Jason.
Yeah, boxes. Boxes sure do make things easier.
Congrats on getting the redesign wrapped up.
Great job.
But like the Blogger redesign, it had to happen, and it looks good, maintaining the key aspects of the Kottke.org "brand" as far as type and color are concerned. A couple of things, though: (1) via the ¨ber-simplified navigation, I can no longer find Silkscreen or your webcam, and (2) the 404 page, while more functional, no longer has "The Raven" on it. Never more? :P
And yes, margin-left is badly needed if your browser window is small or if you happen to be using OmniWeb =)
I stepped out for breakfast for about an hour and I get back to a whole new kottke... amazing...
I kind of like your new header, although it did get a little shrunken. Hmm I kind of miss your red highlighted links, the blue one is not bad though.
Oh the other thing I miss is your movie headers, http://www.kottke.org/03/12/y-tu-mama-tambien.
Well, however, since everyone is gushing about it - a little bit of minor critique:
1. Why change from uppercase DIN Mittelschrift to lowercase Interstate? Ok, I'm from Germany, so DIN looks more familiar... The previous typography projected much more squeaky cleanliness and calmness.
2. It might be the crappy IE rendering or the Interstate or the small header - the proportions just look a little bit messed up. And on my computer the font weights clash (ymmv).
3. Bold red links on the right and normal blue links in the left column? Intentional inconsistency?
But just like the ending of the movie, this is our Magnum and it's stunning. It may look almost identical, but you put more thought into the information on the web site and it looks great. Plus additions to the Kottke goodness I've come to expect!
Good job, Kottke!
I am proud to share a forename with you.
oh how will I sleep tonight? :(
An excellent evolutionary step.
I second that.
One question, though: What's the square doo-hickey at the end of the remaindered links? I'm seeing them in Safari 1.0.2; see here.
Having lived with the design for a few weeks, I go back and forth on this. Sometimes it seems perfect and other times it seems too small. It's looking too small right now for whatever reason.
if you wish to design *against* the majority of your readers
Not against, it's just that with Lucida Grande (which is quite a lovely font) and the way OS X does font smoothing (I know, XP smoothes fonts too, but not as well, IMO), it looks particularly nice on the Mac.
the only thing i'm not comfortable with is the width of the left/right margins when my browser window (safari) is 800x600 or smaller. the text butts right up against the side of the window.
Yeah, I see what you mean. I'll look into it.
I can no longer find Silkscreen or your webcam, and (2) the 404 page, while more functional, no longer has "The Raven" on it. Never more? :P
Paulo, you are a true fan. Pulling out details about the 404 page, that's crazy. But yes, no more Raven. And Silkscreen is still available on the right hand side of the front page under the "as long as you're here" header, which is kind of a catch-all area for stuff that people should see, but isn't a post or included in the top nav. If that makes any sense. And the webcam, well, that's dead for now...the last time it was updated was mid-2000.
Oh the other thing I miss is your movie headers
Yeah, I miss them as well. But they were just too time consuming. The whole movie section is getting revamed one of these days as soon as a figure out how I want it to work.
Why change from uppercase DIN Mittelschrift to lowercase Interstate?
It was time for a change. I've had DIN on the site for several years now, going back to two previous versions, and I was just getting tired of it.
It might be the crappy IE rendering or the Interstate or the small header - the proportions just look a little bit messed up. And on my computer the font weights clash (ymmv).
I'll take a look at that at work tomorrow.
Bold red links on the right and normal blue links in the left column? Intentional inconsistency?
With the last design, the links on the left were red and the ones on the right were blue. I didn't mean to switch them, but that's what ended up happening. [Big part here about my color theory of links which I stopped writing because it's too late to be coherent about it. And besides, if the explanation is so involved as to require a full night of sleep, maybe the different colors don't make a damn bit of difference to the audience anyway.]
I like the added ability of trackbacks. I just wish I didn't stop using MT so I could use trackbacks. Congratulations on the new design.
Really though, it looks good, nice and clean like the previous Kottke. Thumbs up! :)
I just miss colorful movie banners...
c'est la vie
Yes, XP does smooth fonts, but you have to turn them on. Open the Adavnced Display options and select ClearType. You'll get a near-Mac look (but not as good as the real thing).
* left margin is waaay to small on a tiny screen
* it looks a bit like nielsen.. euw.. *shrug*
* the header is a bit too smallish imho.. I miss the big yellow bar
The visited links desperately need their own color. Other than that, the redesign looks fresh.
Rest, looks great. And yes it is a challenge to think outside the 'box'.
I like the new design, but the fixed width doesn't scale too well to smaller window sizes. Is it possible to use a 'sliding doors' affect for the header, so that the two sets of writing in the header slide in/out as the window is resized?
I think archived entries miss the "kottke yelloreen" footer area. Shorter entries (e.g. http://www.kottke.org/04/06/kitty-god-of-thunder) aren't framed as nicely as they once were.
Also, do you think the Remaindered links really warrant their own permanent links?
Well done on starting the transition.
But a nice progression, all the same.
Otherwise, excellent.
Is it because the new tag makes me think of the lime green stripe on the waistband of DKNY men's underwear? I'm confused and uncomfortable, yet I can't click away.
You're preaching to the choir, asking for opinions from your fans.
It's not really a redesign, now is it? Just a little tweaking, nothing revolutionary. Nothing great, nothing awful, just the faint sound of you stroking your ego, and having it stroked, for a very small segment of the computer world to hear.
Enjoy.
I think the header should be bigger. I've always loved the sour lemon colour and think we need to see a bit more of it. I also loved the 'undesign' tag-line and the empty box you had before and think it is a shame that this has gone. I know you love minimal (heck, that's obvious!) but think you could still have a very minimalist site and kept your 'undesign' brand. I feel a very slight colour lift is necessary, echoing the yellow somewhere else etc, just a fleck of colour elsewhere to tie it all together.
Anyway, this is just me nit-picking, overall I am impressed with all you have done. An excellent job and an inspiration.
One slight criticism though, the text is too crammed up to the sides for my liking, I prefer a small margin left and right.
All I care about it is that I used to be able to read (and click) all the links above the fold and now I can't. Kottke was my own personal Bloglines.
document.onkeypress = function(e) {
key = 0;
// sniff for IE proprietary objects
if(document.all) key = event.keyCode;
// otherwise use standard JS
else key = e.which;
if(key == 32)
// generate the location on the server side
location = 'index_1.html';
}
document.onkeypress = function(e) {
key = document.all ? key = event.keyCode : key = e.which;
if(key == 32) location = 'index_1.html';
}
document.onkeypress = function(e) {
key = document.all ? event.keyCode : e.which;
if(key == 32) location = 'index_1.html';
}
Beautiful quote.
I wouldn't say this design does the most with the least since there's still a lot to play with, but it's very svelte.
Though there are two things I would do differently. That photo in the side-margin should be better cropped or enlarged somehow (it looks like a challenge though). Also, I would have a lime green footer to match the header, though the current one is great. I guess the lime green header is trademark.
The attachment we've all made to your style is incredible. Great job.
http://philringnalda.com/blog/2004/05/holy_crap_thats_blogger.php
[philringnalda.com]
http://www.aquamakeover.com/aqua2.html
This thread is closed to new comments. Thanks to everyone who responded.

