homeabout kottke.orgarchives + tagsmembership!
aboutarchives + tagsmembership!
aboutarchivesmembers!

kottke.org redesign

posted by Jason Kottke   Jun 27, 2004

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:

Some things I’m not satisfied with yet:

And now I’ll stop talking. What do you think? Comments, questions, bug reports, and constructive criticism expected and appreciated.

Reader comments

Reyhan DhunyJun 27, 2004 at 7:37PM

I guess ill have to get used to it, or get a newsreader :)

reganJun 27, 2004 at 7:39PM

you did really well. i’m impressed by the layout and the ease at which you were able to make everything fit together. the photo page is incredible. i wish you would share how you got the picture to act as the controls. as you said, it looks very fly in safari.

Kyle BunchJun 27, 2004 at 7:39PM

Simple, Elegant, Beautiful.

Let the rampant imitation/flattery begin.

LFNJun 27, 2004 at 7:46PM

Looks great, header color change and css text size switcher would be nice… Data driven site less filler, nice. Bring back the red!

CortlandJun 27, 2004 at 7:49PM

Clean and concise, very nice. Focuses on the content, not the visuals, without being cumbersome or cluttered - excellent job.

EricJun 27, 2004 at 7:51PM

Nice, although the title bar appears a little too small for my tastes (being far overpowered by the content).

MerlinJun 27, 2004 at 8:02PM

Lovely and understated. I really like how you kept that distinctive color but dialed the usage/real estate way down. Good work.

kezJun 27, 2004 at 8:07PM

PC users, you’re missing out
Heh, if you wish to design *against* the majority of your readers (statistically probable) that’s just fine!

*sniffle*

Stewart VardamanJun 27, 2004 at 8:10PM

I like the design!

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 :(

GaryJun 27, 2004 at 8:13PM

Clean, easy to read. But the best bit is not having to squint or don sunglasses now that the old yellow-green header has reduced in size ;)

ZacJun 27, 2004 at 8:21PM

i like the new look. i’m glad to see that you didn’t go the over-stylish route - this new design still has the same familiar kottke look-and-feel.

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.

KeithJun 27, 2004 at 8:32PM

Looks good. I like the fact that it’s different, but not too different. The Lucida Grande looks fantastic and I’m glad you kept true to your “style” and didn’t go all SimpleBits on us! Although I’m sure if you had it’d have been very nice as well.

Nice work Jason.

Kip IngramJun 27, 2004 at 8:34PM

It’s neat, but it will take some getting used to. Your old design was like an old friend. :-) Regarding approaches to archives, I think that a chronological archive is almost a must, but I’d also really like to find a “better way.” I have some ideas that I may try at some point on my site but I haven’t had the time to get them in there yet.

Yeah, boxes. Boxes sure do make things easier.

Congrats on getting the redesign wrapped up.

Thomas EdwardsJun 27, 2004 at 8:43PM

One word and some punctuation: Yay!

Gord FynesJun 27, 2004 at 8:45PM

Hey Kottke-dot-org, two minutes for looking so good.

Rich ManalangJun 27, 2004 at 8:48PM

I like. Very much.

Great job.

just say'nJun 27, 2004 at 8:55PM

I feel as if my head is being pulled to the left. Posted are plastered agianst the left margin.

William HambyJun 27, 2004 at 9:06PM

Nice work, Jason. And you’re right, this site (well, EVERY site (well, EVERYthing)) looks better on a Mac.

pickyinJun 27, 2004 at 9:17PM

i like it, especially the continuity of the old kottke.org look.

MarkJun 27, 2004 at 9:21PM

I’d truly appreciate it if it “looks great” in Firefox on PC. I’m doing the best I can here….

PauloJun 27, 2004 at 9:43PM

Well, I knew this day would have to come, and I dreaded it: your old green-headed layout had become a definitive web establishment, and I couldn’t envision Kottke.org ever looking any different, whether in tables or in XHTML/CSS. (Of course, people probably thought the same way about old yellow.)

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

PauloJun 27, 2004 at 9:47PM

(Oops, that ¨ up there should have been a ü, in case it was confusing you. And though Silkscreen is right where it used to be I’m wondering if one has to search for it from here on to get to it.)

JesseJun 27, 2004 at 9:50PM

I love it.

And yes, margin-left is badly needed if your browser window is small or if you happen to be using OmniWeb =)

PeterJun 27, 2004 at 9:58PM


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.

ramananJun 27, 2004 at 10:18PM

Damn. I like man. Nicely done. You’re right, this is looking quite nice in Safari. I hope you keep the navigation bar’s puke-green colour, it has always been my favourite thing on your site.

Bernie ZimmermannJun 27, 2004 at 10:20PM

I think it’s awesome. Great work!

KeraJun 27, 2004 at 10:35PM

It’s great!

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?

Anthony LuceroJun 27, 2004 at 10:49PM

Haha this redesign reminds me of Zoolander… all the different names for the same model pose Zoolander has: Le Tigre, Ferrari, etc.

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!

Jason Santa MariaJun 27, 2004 at 10:57PM

Well done sir. I like that the content is about 50px up higher on the page, all that scrolling… *phew*! :D

I am proud to share a forename with you.

MoiraJun 27, 2004 at 11:11PM

It looks fine with Mozilla on linux, but I haven’t compared with anything else. I’m probably just a creature of habit, but I preferred the look of the old design. Maybe it’s because I’m not using a mac. Not sure. I do prefer blue to red for linky links. Still red in side bar.

jayJun 27, 2004 at 11:11PM

PC users, you’re missing out.

oh how will I sleep tonight? :(

Alexander MicekJun 27, 2004 at 11:16PM

As for the thought “PC users, you’re missing out.” I can only agree - but in a more general sense … we’re missing out on a lot of things. Either way, rendered in Mozilla with ClearType turned on (not as good as Apple’s sub-pixel font smoothing, but decent), things look quite good.

An excellent evolutionary step.

GeneJun 27, 2004 at 11:24PM

Hey Kottke-dot-org, two minutes for looking so good.

I second that.

Jeremy FlintJun 27, 2004 at 11:34PM

Great job on the redesign. Still as clean and simple as the old design, which is nice.

AndrewJun 27, 2004 at 11:38PM

I like it. A lot. Bravo!

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.

heyotwellJun 28, 2004 at 12:01AM

Now your site looks like Jakob Neilsen’s.

jkottkeJun 28, 2004 at 12:11AM

the title bar appears a little too small for my tastes

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.]

JeffJun 28, 2004 at 12:41AM

I like it and I don’t. Mostly I like it. Any reason I don’t comes from a grace period I need to get used to minimalistic design. No bugs here yet (PC and Firefox).

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.

jasoniscoolJun 28, 2004 at 12:44AM

i jsut don’t like it, it’s nothing but text. get some more colour and boarders and make i look cool…too minimalist for me

keith knutssonJun 28, 2004 at 12:59AM

nice design. it is refreshing after visiting kottke.org to see a new face

Chris VincentJun 28, 2004 at 1:49AM

Wonderful! I no longer have to feel guilty reading you. I jest.

Really though, it looks good, nice and clean like the previous Kottke. Thumbs up! :)

DanialJun 28, 2004 at 2:14AM

Its beautiful, I specially liked the archives page, which shows a lot more now than the previous version. “What is this place?” gives user an idea where they are and what else they should look for on this website. Adding a tour for first time visitors is a nice idea specially when you have this huge amount of text. I am reading this blog since months but I didn’t browse Photos section until you mentioned them here in this post. I didn’t even know that you are a great photographer.

JoelJun 28, 2004 at 2:33AM

Great Job!

I just miss colorful movie banners…

c’est la vie

Thomas EdwardsJun 28, 2004 at 4:34AM

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.
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).

patrick h. laukeJun 28, 2004 at 4:54AM

i have to admit i was a fan of the old look…but nice to see you embraced the css way :)

grumpyJun 28, 2004 at 5:03AM

I still don’t know what you have against index pages for photos. It’s not the 1970s and I don’t like being forced to click (or even space) through a seventy-page slideshow to see what’s there. For someone who appears to care so much about navigation, it seems like a glaring case of ego over sanity.

Mr TJun 28, 2004 at 5:06AM

Minor points of critique:

* 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

MorrieJun 28, 2004 at 5:14AM

I love it Jason. On a 14” iBook, with Safari, it looks great. Well done

ErikahJun 28, 2004 at 5:39AM

Yikes. This took two years?

jJun 28, 2004 at 5:39AM

Jason,

The visited links desperately need their own color. Other than that, the redesign looks fresh.

swimpJun 28, 2004 at 5:53AM

Better than before!

ClaireJun 28, 2004 at 5:54AM

I really like it. The focus seems to have been shifted more to the text, which is good. Nice one!

SunnyJun 28, 2004 at 6:12AM

Any reason why you didn’t choose “Lucida sans Unicode” for us windows folks? Not exactly Lucida Grande but pretty close.

Rest, looks great. And yes it is a challenge to think outside the ‘box’.

MikeJun 28, 2004 at 6:44AM

Lucida Grande for PC is available here.

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?

TonyJun 28, 2004 at 7:53AM

There’s some nice stuff going on here Jason, but it somehow doesn’t feel quite as well rounded as the previous design, although I am sure it will mature with time.

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.

ThomasJun 28, 2004 at 7:59AM

White, clean, neat… I LIKE it!

danJun 28, 2004 at 9:41AM

I sent you a message about this, but given the quantity of e-mail you probably get, you might miss it. The links “here, here and here” in the 9th bullet have the same link for the first two heres (simplebits.com).

GrahamJun 28, 2004 at 10:45AM

For what it’s worth, “smooth” type just makes me think I need to get new glasses.

But a nice progression, all the same.

vaskaJun 28, 2004 at 10:46AM

I like the redesign and I’ve wondered for about a year now why more people weren’t creating small nav sections at the top of their pages similar to yours - good work. Perhaps you might make the article titles (on the index page) a different color or bolder or something like that? They do blend-in quite a bit…

Count ZigguratJun 28, 2004 at 11:23AM

Hmmm. Decent. Like the last one. I think I liked the large header better though. And to echo all the other comments, some margin would be nice.

Otherwise, excellent.

greg.orgJun 28, 2004 at 12:01PM

Why do I find this new design so attractive?

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.

jlimentJun 28, 2004 at 12:11PM

Oh Jason, why do you insist on stroking your ego?

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.

Andrew UrquhartJun 28, 2004 at 12:14PM

Sorry to sound a bit negative but I’d like it more if I could actually read it — the font size is too small for me to be able to read comfortably. It also doesn’t help that sizes are in ‘px’ units so triggering that old accessibility bug in IE that allows author settings to override the users font-size preferences :-(

SteveJun 28, 2004 at 12:21PM

It’s brilliant. My favourite re-design of all time and possibly the nicest site to look at on the interweb. Don’t let it go to your head or anything :-P

HannesJun 28, 2004 at 1:33PM

Perfect. Simplicity in it’s finest form.

Mark James FosterJun 28, 2004 at 1:43PM

Overall I like it but there are some things I would change if it was my site.

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.

T.J.Jun 28, 2004 at 1:46PM

Nice, simply and crisp.
One slight criticism though, the text is too crammed up to the sides for my liking, I prefer a small margin left and right.

Andrew BoardmanJun 28, 2004 at 1:48PM

Nice exercise in Web typographic design, Jason. But here’s what I’m still missing: I loved the icon-less icon at the top. Now it’s truly icon-less. (I do like the green banding but it does seem too humble, too wise.) The photo purportedly of you, at the top right, is, well, teeny-tiny. And no “Search” in the redesign? I want to “Find.”

J-MoJun 28, 2004 at 1:49PM

Looks Great. I think the simplicity of the style is what makes it one of my early morning reads.

We don't know each other.Jun 28, 2004 at 2:21PM

Smaller, bigger, ego-stroking, objectivity, whatever.

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.

Lenny DomnitserJun 28, 2004 at 3:00PM

The spacebar trick is not working in Mozilla because the `event` object is a Microsoft proprietary trick. Here is a Javascript snippet that works with IE’s proprietary handling and with other browsers (test in Mozilla and Opera). Just drop it into the head section and it should handle the rest. I don’t know how well this will come out the other end of your comment system, but here goes:

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’;
}

Lenny DomnitserJun 28, 2004 at 3:02PM

Just realized after posting, you can make the code much leaner:

document.onkeypress = function(e) {
key = document.all ? key = event.keyCode : key = e.which;
if(key == 32) location = ‘index_1.html’;
}

Lenny DomnitserJun 28, 2004 at 3:04PM

Damn, I am having bad luck. I promise this is the last one:

document.onkeypress = function(e) {
key = document.all ? event.keyCode : e.which;
if(key == 32) location = ‘index_1.html’;
}

jkottkeJun 28, 2004 at 3:12PM

Thanks for the JS, Lenny. Eliot and I (well, Eliot mostly) worked out a similar solution via IM last night…I’m going to drop it into the template when I get some time this evening.

markkuJun 28, 2004 at 3:31PM

What can I say? Beautiful simplicity. :)

HanniJun 28, 2004 at 3:42PM

Just to say, wow. Simple but effective.

MichaelJun 28, 2004 at 5:06PM

Red please! You are a design god.

DouglasJun 28, 2004 at 5:16PM

“Every page is the front page of the site.”

Beautiful quote.

mikeJun 28, 2004 at 6:02PM

Excellent. Somehow I anticipated the move over the weekend since the idea of keeping content central and minimizing (or even removing) a top title bar was an idea I was thinking about.

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.

William HambyJun 28, 2004 at 6:23PM

I had to come back and say one more thing… 80+ comments over a weekend. Jason, it should demonstrate to you the breadth of your fandome. :-)

Will StewartJun 28, 2004 at 6:52PM

Your site has instantly turned from one of the ugliest to one of the prettiest. Congratulations!

mendelJun 28, 2004 at 6:53PM

Minor bug report: Text is flush (0-1 px) right in Firefox at 1000x800 if I have a sidebar open (which I do all the time).

SunnyJun 28, 2004 at 8:40PM

Any particular reason why you serving different css for mac and pc?

jGregorJun 28, 2004 at 10:28PM

Love the organization. Still clean. But, sorry the header seems like an after-thought. Just doesn’t work for me; kind of seems gimmicky, like if it was a sound it would be a “sucking” noise trying to catch its breath. Maybe after designing for 22 years I’m taking longer to catch up to “new”. Give me some lag time and I might come onboard.

BrunoJun 28, 2004 at 10:38PM

Yes. Simply put - the most super awesomeness.

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.

liaJun 29, 2004 at 12:28AM

I like it well enough, but I miss the matching strip at the bottom. I’d love to see that make a comeback someday!

SpankyJun 29, 2004 at 8:00AM

Two years for this? You gotta be kidding me?

anotherfanJun 29, 2004 at 8:18AM

Just to jump on the bandwagon, it’s perfect, it’s wonderful, it could not be better. Then again, the lack of the left margin makes it extremely irritating to read the text, half of the first letters appear to be missing.

blackshirtJun 29, 2004 at 11:12AM

I would like to see link domains (shows the actual domain of any link in brackets) in Further afield section.

http://philringnalda.com/blog/2004/05/holy_crap_thats_blogger.php
[philringnalda.com]

B0bJun 29, 2004 at 12:02PM

Hi, I really like your site. Anyone know where I can get a test version of interstate for download?

SianJun 29, 2004 at 1:41PM

Lookin’ good. Uncomplicated and easy to read.

AdamJun 29, 2004 at 2:21PM

What is kinja doing to your posts!? They seem out of synch.

BradJun 29, 2004 at 7:27PM

If you are looking for Lucida Grande for OS9, you can DL it here:

http://www.aquamakeover.com/aqua2.html

This thread is closed to new comments. Thanks to everyone who responded.

We Work Remotely