kottke.org redesign, 2012 version
If you’re actually reading this on the site and not in RSS (guys, come on in from the cold, don’t be shy), you’ll already have noticed that I changed the “look and feel” of the site. In doing the design, I focused on three things: simplicity, the reading/viewing experience, and sharing.
Simplicity. kottke.org has always been relatively spare, but this time around I left in only what was necessary. Posts have a title, a publish date, text, and some sharing buttons (more on those in a bit). Tags got pushed to the individual archive page and posts are uncredited (just like the Economist!). In the sidebar that appears on every page, there are three navigation links (home, about, and archives), other ways to follow the site (Twitter, Facebook, etc.), and an ad and job board posting, to pay the bills. There isn’t even really a title on the page…that’s what the title tag is for, right? Gone also is the blue border, which I liked but was always a bit of a pain in the ass.
Reading/viewing experience. I made the reading column wider (640px) for bigger photos & video embeds and increased the type size for easier reading. But the biggest and most exciting change is using Whitney ScreenSmart for the display font, provided by Hoefler & Frere-Jones’ long-awaited web font service, which is currently in private beta. Whitney SSm is designed especially for display in web browsers and really pushes the site’s design & readability to a higher level. Many thanks to Jonathan and his web fonts team for letting me kick their tires. I believe that kottke.org is one of only two sites on the entire Internet currently using H&FJ’s web fonts…the other is by some guy who currently lives in a white house near Maryland. Barnaby something…
The reading experience on mobile devices has also been improved. The text was formerly too small to read, the blue border was a pain in the ass (especially since the upgrade to iOS 5 on the iPhone & iPad changed how the border was displayed when zoomed), and the mobile version was poorly advertised. The site now uses the same HTML and CSS to serve appropriate versions to different browsers on different hardware using some very rudimentary responsive design techniques. Whitney ScreenSmart helps out here too…it looks freaking AMAZING on the iPhone 4S’s retina display. Really, you should go look. And then zoom in a bunch on some text. Crazy, right?
Sharing. I’ve always thought of kottke.org as a place where people come to find interesting things to read and look at, and design has always been crafted with that as the priority. A few months ago, I read an interview with Jonah Peretti about what BuzzFeed is up to and he said something that stuck with me: people don’t just come to BuzzFeed to look at things, they come to find stuff to share with their friends. As I thought about it, I realized that’s true of kottke.org as well…and I haven’t been doing a good enough job of making it easy for people to do.
So this new design has a few more sharing options. Accompanying each post is a Twitter tweet button and a Facebook like button. Links to posts are pushed out to Twitter, Facebook, and RSS where they can be easily shared with friends, followers, and spambots. I’ve also created a mirror of kottke.org on Tumblr so you can read and share posts right in your dashboard. I’ve chosen just these few options because I don’t want a pile of sharing crap attached to each post and I know that kottke.org readers actually use and like Twitter, Tumblr, and even Facebook.
So that’s it. I hope you like it. Not every page on the site has the new design yet, but I’m getting there. For reference, here’s what the site has looked like in the past. Comments, questions, criticisms, and bug reports are always welcome.
Stay Connected