kottke.org redesign  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:

  • 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.
  • Most Some 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.

There are 95 reader comments

Reyhan Dhuny37 27 2004 7:37PM

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

regan39 27 2004 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 Bunch39 27 2004 7:39PM

Simple, Elegant, Beautiful.

Let the rampant imitation/flattery begin.

LFN46 27 2004 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!

Cortland49 27 2004 7:49PM

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

Eric51 27 2004 7:51PM

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

Merlin02 27 2004 8:02PM

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

kez07 27 2004 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!


Stewart Vardaman10 27 2004 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 :(

Gary13 27 2004 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 ;)

Zac21 27 2004 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.

Keith32 27 2004 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 Ingram34 27 2004 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 Edwards43 27 2004 8:43PM

One word and some punctuation: Yay!

Gord Fynes45 27 2004 8:45PM

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

Rich Manalang48 27 2004 8:48PM

I like. Very much.

Great job.

just say'n55 27 2004 8:55PM

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

William Hamby06 27 2004 9:06PM

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

pickyin17 27 2004 9:17PM

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

Mark21 27 2004 9:21PM

I'd truly appreciate it if it "looks great" in Firefox on PC. I'm doing the best I can here....

Paulo43 27 2004 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

Paulo47 27 2004 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.)

Jesse50 27 2004 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 =)

Peter58 27 2004 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.

ramanan18 27 200410: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 Zimmermann20 27 200410:20PM

I think it's awesome. Great work!

Kera35 27 200410: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 Lucero49 27 200410: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 Maria57 27 200410: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.

Moira11 27 200411: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.

jay11 27 200411:11PM

PC users, you're missing out.

oh how will I sleep tonight? :(

Alexander Micek16 27 200411: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.

Gene24 27 200411:24PM

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

I second that.

Jeremy Flint34 27 200411:34PM

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

Andrew38 27 200411: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.

heyotwell01 28 200412:01AM

Now your site looks like Jakob Neilsen's.

jkottke11 28 200412: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.]

Jeff41 28 200412: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.

jasoniscool44 28 200412: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 knutsson59 28 200412:59AM

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

Chris Vincent49 28 2004 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! :)

Danial14 28 2004 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.

Joel33 28 2004 2:33AM

Great Job!

I just miss colorful movie banners...

c'est la vie

Thomas Edwards34 28 2004 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. lauke54 28 2004 4:54AM

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

grumpy03 28 2004 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 T06 28 2004 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

Morrie14 28 2004 5:14AM

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

Erikah39 28 2004 5:39AM

Yikes. This took two years?

j39 28 2004 5:39AM


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

swimp53 28 2004 5:53AM

Better than before!

Claire54 28 2004 5:54AM

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

Sunny12 28 2004 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'.

Mike44 28 2004 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?

Tony53 28 2004 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.

Thomas59 28 2004 7:59AM

White, clean, neat... I LIKE it!

dan41 28 2004 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).

Graham45 28 200410: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.

vaska46 28 200410: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 Ziggurat23 28 200411: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.org01 28 200412: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.

jliment11 28 200412: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.


Andrew Urquhart14 28 200412: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 :-(

Steve21 28 200412: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

Hannes33 28 2004 1:33PM

Perfect. Simplicity in it's finest form.

Mark James Foster43 28 2004 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.46 28 2004 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 Boardman48 28 2004 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-Mo49 28 2004 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.21 28 2004 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 Domnitser00 28 2004 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 Domnitser02 28 2004 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 Domnitser04 28 2004 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';

jkottke12 28 2004 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.

markku31 28 2004 3:31PM

What can I say? Beautiful simplicity. :)

Hanni42 28 2004 3:42PM

Just to say, wow. Simple but effective.

Michael06 28 2004 5:06PM

Red please! You are a design god.

Douglas16 28 2004 5:16PM

"Every page is the front page of the site."

Beautiful quote.

mike02 28 2004 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 Hamby23 28 2004 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 Stewart52 28 2004 6:52PM

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

mendel53 28 2004 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).

Sunny40 28 2004 8:40PM

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

jGregor28 28 200410: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.

Bruno38 28 200410: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.

lia28 29 200412: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!

Spanky00 29 2004 8:00AM

Two years for this? You gotta be kidding me?

anotherfan18 29 2004 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.

blackshirt12 29 200411:12AM

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


B0b02 29 200412:02PM

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

Sian41 29 2004 1:41PM

Lookin' good. Uncomplicated and easy to read.

Adam21 29 2004 2:21PM

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

Brad27 29 2004 7:27PM

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


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

this is kottke.org

   Front page
   About + contact
   Site archives

You can follow kottke.org on Twitter, Facebook, Tumblr, Feedly, or RSS.

Ad from The Deck

We Work Remotely


Hosting provided by