kottke.org posts about web development
For the first time in more than four years, kottke.org is sporting a new design this morning. Since you should never launch anything completely finished,1 there are probably still some things that need to be ironed out, but I hope most of it works. (Drop me a note if you notice something amiss?) Let’s hop right into what’s new and why. (For reference, here’s what the site looked like until late yesterday, here’s what I said about that design, and here’s what some of the previous designs looked like.)
Design. Gone is the now-beloved blue gradient (which ppl didn’t like when I introduced it), replaced with a colorful rainbow banner thingie. The site title and the old school tagline — “home of fine hypertext products” — are both making a comeback. The march toward simplicity continues…every remaining design element serves a purpose. The type is a bit bigger to offset ever increasing display resolutions (which somewhat paradoxically makes everything smaller). Post titles are quite a bit larger. Media embeds and images are much larger, especially if it’s right at the top of the post. Check out this post and this one for examples of what I’m talking about. Tweaked the footnote style.2 More tweaks to come. (Including moving to some even faster new servers at Arcustech, the fantastic hosts of kottke.org for years now. Big thanks to them for all their support!)
The layout of the site is responsive — not fully so, but if you resize your browser window, it’ll change and flow and do all of the neat things that responsive design does. The type is still my favorite Whitney ScreenSmart by Hoefler & Co (designed by Tobias Frere-Jones), but I finally (FINALLY!!!) turned on smart quotes and such — you know, like “opening and closing quotes around this text” and apostrophes’ apostrophes and the proper m-dash right heeeeeere — so now the designers who read the site can finally stop tutting about it. (And Hoefler and Frere-Jones can stop tearing their hair out about seeing text rendered with their point-perfect typeface littered with dumb quotes. Enjoy your tresses, fellows!)
Mobile. This was the main impetus behind the redesign. Over 40% of you read kottke.org on a mobile device of some kind. The old site worked fine on phones and tablets, but not great. Now, the site looks and works great on mobile. (At least I think it does.)
Tags. Some of my favorite things about kottke.org are the tags and tag pages. Looking at the site through the lens of tags, it becomes apparent that kottke.org is actually a collection of hundreds of small blogs about introversion, Stanley Kubrick, time travel, early color photography, economics, crying at work, and all sorts of other things. For the redesign, I made them more visible on the site and I’m hoping to find more ways to improve their involvement in the site soon. You’ll now find tags at the end of posts no matter where you find them on the site; previously they were only on the individual post pages. Tag pages are now paginated so you can go back through hundreds and even thousands of posts on each topic. I’ve also included a list of related tags at the top of each tag page…which is incredibly addictive for surfing around aimlessly.
Biography. With the help of some friends (aka the kottke.org board of advisors), I rewrote the about page. I liked the brevity of the old version, but in the words of one friend, “the previous version undersold the site so much it was almost inaccurate”. This is the first bio I’ve ever written that takes seriously what the site is and what I’ve done in my career…and as such it makes me really uncomfortable. Taking credit, particularly in public, has never been my thing. But I wanted to have a chance at explaining kottke.org to people who might not know the whole story. Everyone here has an opinion about kottke.org, this is mine.
When I started the site in 1998, people expressing their ideas & beliefs through links and attempting to stitch technology & the liberal arts together were not commonplace pursuits. In many ways, media on the web has come to resemble, in form and function, what kottke.org and other early blogs were doing back then. The largest social media companies in the world are now centered around people collecting and showing each other cool/interesting/funny links in order to say something about what they believe. I’m proud that kottke.org and I have played a role in that (r)evolution.
Future. The past 2.5 years have been the most challenging out of the 18+ years I’ve been doing the site. (Translation: they sucked.) I’ve been working, with many loooong periods of inactivity, on this redesign for more than 2 years. It’s not a cure for cancer or the world’s best design work, but to have it finally be out in the world feels amazing. Like a bad chapter in my life is ending. Like I’m still alive. Vital. A start of something. Like I’m finally investing in myself and my future for the first time in a long while. It feels like hope. And I hope you like it. It’s a genuine pleasure being able to share myself with you like this, and I don’t know what I’d do without it.
Stelian Firez recently shared a really boneheaded web form for entering your phone number:
Soon afterward, several people attempted to conjure up even more cumbersome ways to ask people for phone numbers:
“Solutions” by Jeff Bonhag, Paulo Gaspar, Dan Kozikowski, and Justin. (via @ftrain)
Update: Thomas Park went old school with a rotary dial.
Kevin Fox recently unearthed a screenshot he took of Apple’s homepage in the early 90s:
I don’t remember this version, but it looks like it was contemporary with this Microsoft homepage (which I do remember). I bet there’s footage of this page in Triumph of the Nerds or Nerds 2.0.1 or on an episode of Computer Chronicles. Anyone?
In late March 1997, 39 members of the Heaven’s Gate group were found dead in a mansion in California, having committed mass suicide in anticipation of being picked up by a spacecraft following the Hale-Bopp comet. When police discovered the bodies and word began to spread via national news, mailing lists, and online forums, a major point of focus was the extensive amount of information left on the group’s website.
Whether Hale-Bopp has a “companion” or not is irrelevant from our perspective. However, its arrival is joyously very significant to us at “Heaven’s Gate.” The joy is that our Older Member in the Evolutionary Level Above Human (the “Kingdom of Heaven”) has made it clear to us that Hale-Bopp’s approach is the “marker” we’ve been waiting for — the time for the arrival of the spacecraft from the Level Above Human to take us home to “Their World” — in the literal Heavens. Our 22 years of classroom here on planet Earth is finally coming to conclusion — “graduation” from the Human Evolutionary Level. We are happily prepared to leave “this world” and go with Ti’s crew.
If you study the material on this website you will hopefully understand our joy and what our purpose here on Earth has been. You may even find your “boarding pass” to leave with us during this brief “window.”
Which website, as Gizmodo’s Ashley Feinberg reports, is still very much operational, thanks to the efforts of a pair of Heaven’s Gate members who chose to remain in their fleshy “vehicles” on Earth.
Every month, the bills get paid on time. The emails get answered, and any orders filled. Which, for HeavensGate.com, is positively extraordinary. Because as far as the public is aware, every last member of the suicide cult died 17 years ago from a cocktail of arsenic and apple sauce. A few stayed behind, though. Someone had to keep the homepage going.
The site is still up, in part, because the group supported themselves financially by running a web design business.
As far as early 90s web design firms go, Higher Source did it all. And looking back at the archived site for the group’s occupational design firm, while they never directly mention their affiliation with the Heaven’s Gate cult, subtle references to the company’s origins abound. With Higher Source, you were getting “a crew-minded effort” from people who have worked “closely” together for 20 years. Of course, close in this case meant literal bunkmates.
You were getting a lot more than that, though. UFO and suicide cult connotations of hindsight aside, this is one of the most pristine testaments to early internet web design around. Not only could Higher Source program in Java, C++, and Visual Basic as well as use Shockwave, QuickTime, and AVI, they could gradient the hell out of your word art, too.
In 1997, I was working as a web designer for a small web development firm in Minneapolis. Our homepage and services offered were not all that different than Higher Source’s. I remember vividly being in the office when the news of the suicide hit and a bunch of us gathered around a computer, browsing through the site before the TV news mentions finally crashed it. It was the first time an internet meme was a major aspect of a national news story. Like, holy shit, they are talking about web design on CNN!
What I don’t remember clearly is if Heaven’s Gate / Higher Source was being discussed online before the suicides happened. It seems like a UFO cult that also did web design would have been a prime topic for conversation in web development circles. Does anyone recall either way?
Update: Meant to add, watching the videotaped statements of each Heaven’s Gate Member before they killed themselves is weird and chilling. They’re almost giddy!
To celebrate the 20th anniversary of the first Microsoft home page, the company has recreated that old page here. More here, including screenshots of subsequent designs.
In terms of “Web design,” the notion, much less the phrase, didn’t really exist.
“There wasn’t much for authoring tools,” Ingalls says. “There was this thing called HTML that almost nobody knew.” Information that was submitted for the new Microsoft.com website often came to Ingalls via 3-1/2-inch floppy disks.
“Steve Heaney and I put together PERL scripts that handled a lot of these daily publishing duties for us,” he says. “For a while, we ran the site like a newspaper, where we published content twice a day. And if you missed the cutoff for the publishing deadline, you didn’t get it published until the next running of the presses, or however you want to term it.”
Interestingly, Microsoft doesn’t seem to know exactly when the page first went live:
Based on the findings, it appears the website was launched during the time between HTML/1.0 (June 1993) and HTML/2.0 (Dec 1994).
I made a brief search of the NCSA What’s New Archive, where a web site for Microsoft should have been noted, and found nothing between June 1993 and September 1994. This piece written in 1999 about the beginnings of Microsoft’s site says the page launched in April 1994. I searched some early Usenet groups to no avail. Anyone have a more accurate date? (via waxy)
In his post about 1990s web development techniques, Zach Holman praises the 1-pixel transparent GIF.
1x1.gif should have won a fucking Grammy. Or a Pulitzer. Or Most Improved, Third Grade Gym Class or something. It’s the most important achievement in computer science since the linked list. It’s not the future we deserved, but it’s the future we needed (until the box model fucked it all up).
Given all of the awards Holman desires to present, I’m surprised he didn’t mention the inventor of the spacer GIF, David Siegel. Siegel was perhaps the first celebrity web designer — well, a celebrity among web designers anyway. He dispensed opinionated design knowledge from his personal homepage and used the High Five award to showcase his idea of cutting edge web design. (Fun fact: Siegel’s own site was the first High Five award winner.)
Somewhere along the way, Siegel came up with the idea of using a 1x1 pixel transparent GIF to introduce whitespace on web pages. The file size was very small but you could scale it up visually using the height and width attributes of the <img> tag and use it hundreds of times on a site because it was cached by the browser the first time it loaded.
Popularized in the pages of his web design book, Creating Killer Web Sites, Siegel’s spacer GIF was completely non-standard and hacky but had the great advantages of 1) giving designers superb control over a site’s design and 2) working more or less the same in every graphical browser. The designers of the time weren’t content to wait around for the SGML nerds at W3C to figure out better ways of displaying web pages, so when Siegel pulled this beautiful kludge out of his pocket, everyone quickly adopted the technique. For years the spacer GIF dominated web design, for better and for worse. So yeah, maybe Siegel does deserve a Grammy or something.
Chris Pattle has constructed Simpsons characters completely out of CSS.
We’ve come a long way from #cccccc and <font color=… And it looks like Pattle avoided the Simpson No-Nos.
A team of web dev hot shots recently convened at CERN to build an emulator of the CERN line-mode browser, the first browser that made the WWW accessible to a wide number of people.
The line-mode browser, launched in 1993, was the first readily accessible browser for what we now know as the world wide web. It was not, however, the world’s first web browser. The very first web browser was called WorldWideWeb and was created by Tim Berners-Lee in 1990.
But WorldWideWeb only worked on the NeXT operating system. WorldWideWeb was a great piece of software, but it was important that the web should be accessible to many kinds of computers, not just NeXT machines.
That’s where the line-mode browser came in. It was the first web browser with a cross-platform codebase so it could be installed on many different kinds of computers. It was a relatively simple piece of software with a very basic interface, but in the early days of the web, it was instrumental in demonstrating the power of this new medium.
The text says the line-mode browser launched in 1993 but it was actually 1991 (and first stable release in early 1992). My first browser was NCSA Mosaic so it was a treat to use this for a few minutes this morning. (via @craigmod)
After I wondered why no one had a made a Breaking Bad bookmarklet that highlights element symbols on web pages in the style of Breaking Bad’s opening titles sequence, Adam Prescott did just that.
Tim Pietrusky made an HTML/CSS version of the opening text crawl from Star Wars.
Writing for Wired,
Matt Homan Mat Honan on Betaworks’ race to build a replacement for Google Reader in just 90 days. If you are interested in a 35,000-ft view on how Web-based software is built, read this.
McLaughlin saw a blog post in the Fall of 2012 speculating that Google Reader, choked of resources, was shutting down. He sent a teasing note to a friend at Google offering to “take it off their hands.” To his surprise, he got a serious reply. Google, his friend replied, had concluded that it couldn’t sell the name, user data, or code base (which would only run on their servers) and so there was nothing to actually buy.
The following February, McLaughlin, now full-time at Digg, bumped into this same pal at a TED conference. The friend warned him to act fast if he really did want to develop a Reader. “He said ‘I’m not telling you anything, but we’re not going to keep this thing around forever and maybe you want to have something ready by the end of the year.”
But instead of year’s end Google announced plans to shutter Google Reader on July 1. That same night, Digg put up a blog post announcing that it was going to build a replacement. The Internet went crazy.
Loved seeing ye olde kottke.org represented in the Digg Reader mockups, and I’m looking forward to checking out the service when it launches.
James Somers, writer and web developer, ponders the value of the work that he does.
I have a friend who’s a mechanical engineer. He used to build airplane engines for General Electric, and now he’s trying to develop a smarter pill bottle to improve compliance for AIDS and cancer patients. He works out of a start-up ‘incubator’, in an office space shared with dozens of web companies. He doesn’t have a lot of patience for them. ‘I’m fucking sick of it,’ he told me, ‘all they talk about is colours.’
Web start-up companies are like play-companies. They stand in relation to real companies the way those cute little make-believe baking stations stand in relation to kitchens.
Take Doormates, a failed start-up founded in 2011 by two recent graduates from Columbia University whose mission was to allow users ‘to join or create private networks for buildings with access restricted to only building residents’. For that they, too, raised $350,000. You wonder whether anyone asked: ‘Do strangers living in the same building actually want to commune? Might this problem not be better solved by a plate of sandwiches?’ (The founders have since moved on to ‘Mommy Nearest’, an iPhone app that points out mom-friendly locations around New York.)
A lot of the stuff going on just isn’t very ambitious. ‘The thing about the advertising model is that it gets people thinking small, lean,’ wrote Alexis Madrigal in an essay about start-ups in The Atlantic last year. ‘Get four college kids in a room, fuel them with pizza, and see what thing they can crank out that their friends might like. Yay! Great! But you know what? They keep tossing out products that look pretty much like what you’d get if you took a homogenous group of young guys in any other endeavour: Cheap, fun, and about as worldchanging as creating a new variation on beer pong.’
Gawker has rebranded their new commenting system…it’s now called Kinja. The name is recycled from a project that Nick Denton worked on with Meg Hourihan starting in 2003. Kinja 1 was an attempt to build a blog aggregator without relying solely on RSS, which was not then ubiquitous. Here’s a mockup of the site I did for them in late 2003:
Luckily they got some real designers to finish the job…here’s a version that 37signals did that was closer to how it looked at launch.
Where is the team that worked on that Kinja? Nick’s still hammering away at Gawker, Meg is raising two great children (a more difficult and rewarding task than building software), programmer Mark Wilkie is director of technology at Buzzfeed, programmer Matt Hamer still works for Gawker (I think?), intern Gina Trapani is running her own publishing/development empire & is cofounder of ThinkUp, and 37signals (they worked on the design of the site) is flying high.
An excellent 26-minute talk by Jonathan Hoefler of the Hoefler & Frere-Jones about how they think about designing typefaces and webfonts in particular.
Today, as webfonts are buoyed by a wave of early-adopter enthusiasm, they’re marred by a similar unevenness in quality, and it’s not just a matter of browsers and rasterizers, or the eternal shortage of good fonts and preponderance of bad ones. There are compelling questions about what it means to be fitted to the technology, how foundries can offer designers an expressive medium (and readers a rich one), and what it means for typography to be visually, mechanically, and culturally appropriate to the web. This is an exploration of this side of web fonts, and a discussion of where the needs of designers meet the needs of readers.
I love Typekit, but I am very much looking forward to switching Stellar over to Whitney or somesuch when H&FJ’s webfonts are released (if the price and performance are right).
The most fun on the internet right now: go to Google and search for “do a barrel roll” (no quotes). Whee!
After years of inactivity, K10k, the venerable design portal, has finally been permanently shuttered. Sad to see it go…K10k was one of a handfull of sites that most influenced my design/online efforts in the 90s.
Over at Ars Technica, Matthew Lasar has a look at some of browsers people used back in the early 90s before Netscape came around.
Tim Berners-Lee’s original 1990 WorldWideWeb browser was both a browser and an editor. That was the direction he hoped future browser projects would go.
I compiled a bunch of old browsers for download back in the day but the Browser Archive at evolt.org is the definitive source. (via @jenville)
Inspired in part by my post on the original Twitter homepage, Serge Keller collected a bunch of screenshots of early web sites, including the very first web page, an early Microsoft design, and the White House’s initial site. Some sites haven’t changed all that much…Amazon and Craigslist in particular have retained much of the design DNA over the years.
This page, built by Evan Roth, consists of “One sentence contained within every HTML tag in alphabetical order.” It would be fun to build a randomized version to see how the tag order changes the look.
Update: At least three people took me up on my suggestion: one, two, three.
Sippey posted a brief item on pagination navigation on “river of news” type sites, comparing the opposite approaches of Stellar and Mlkshk. I thought a lot about where to put those buttons and what to label them. There’s no good correct answer. For example, “older” usually points the way to stuff further back in the timeline that you haven’t read, i.e. it’s new to you but old compared to the first page of stuff…are you confused yet? I focused on two things in choosing a nav scheme:
1. The Western left-to-right reading pattern. If you’re in the middle of reading a book, the material to your left is a) chronologically older and b) has already been read and the material to your right is a) chronologically newer and b) unread. From a strict data perspective, a) is the correct way to present information but websites/blogs don’t work like books. b) is how people actually how people use blogs…when a user gets to the bottom of the page, they want to see more unread material and that’s naturally to the right.
2. Consistency. Once you add page numbers into the mix — e.g. “< newer 1 2 3 4 older >” — it’s a no-brainer which label goes where. I don’t think I’ve ever seen the reverse: “< older 4 3 2 1 newer >”.
Also, I do whatever Dan Cederholm does. (But dammit, he does the opposite on his blog! Hair tearing out noise!!) That said, I like Sandy’s suggestion of getting rid of the “newer” button altogether:
We put “Older” on the right, but did away with “Newer” altogether in favor of a link back to page 1. If they want to go back to the previous pages, people can use their back button.
Or maybe put “newer” at the top of the page? Still a waste of screen real estate? Anyway, once I figure out how I want to do infinite scrolling on Stellar, those problematic older/newer buttons will go away. Huzzah!
Ever since designing the site back in 2001, I’ve been the webmaster for Susan Orlean’s web site. Susan is my favorite client, but I don’t have the time to devote to the site anymore so Susan and I are looking for someone to take over. Here are some rough requirements for the position:
- The site and its administration are pretty simple; you should be comfortable with editing HTML, CSS, the Unix command line, Movable Type, SFTP, and such.
- You should possess a little bit of design sense. Your immediate task will be to flesh out the page for Susan’s upcoming book about Rin Tin Tin, so you’ll need to figure out how to fit the required content into a clean well-presented readable layout. There’s not a lot of heavy Photoshop or Illustrator work required…this is not a redesign-the-site project.
- On-going maintenance is fairly minimal…occasional text updates, new article additions, dealing with very infrequent site outages, etc. You know, good old fashioned webmastering. Your monthly time commitment for maintenance will be in the ballpark of 0-30 minutes.
If this sounds like something you might be interested in, please contact Susan with a short note about who you are, the work you do, links (not attachments!) to a portfolio or resume, that sort of thing. Make sure the subject line clearly references this project somehow. Thanks!
Andre Torrez says “complain about the way other people make software by making software”.
Worse is when the the people doing the complaining also make software or web sites or iPhone applications themselves. As visible leaders of the web, I think there are a lot of folks who could do a favor to younger, less experienced people by setting an example of critiquing to raise up rather than critiquing to tear down.
If you’re a well known web or app developer who complains a lot on Twitter about other people’s projects, I am very likely talking about you. You and I both know that there are many reasons why something works a certain way or why something in the backend would affect the way something works on the front-end.
Working on a web app of my own has definitely given me a new appreciation of just how much of the iceberg is unknown to the users of an app. (via ★buzz)
If you a flick a web app past the bottom or top of the page, the page itself gets elastically tugged away from the URL bar or the button bar (or the bottom/top of the screen if it’s in full-screen mode).
This behavior is another giveaway that your app isn’t native, and it’s rarely the behavior you want in a native app.
One big advantage of native apps that cannot be addressed by HTML/CSS/JS is the browser interface itself. The Gmail web interface is fantastic, but every time I open a link in my email, the browser goes through its elaborate new window opening process. And then when I want to go back to my email, I have to touch the windows button, close the current window, and then click back on the mail window. The whole process is too inefficient and slow compared to the same process in a native app: no starting browser animation process and one touch to get back to what you’re doing. If Apple addressed this issue — say by making it possible for a web app to “open” a sub-browser with different open/close interactions instead of a full-fledged new window — using web apps would be less of a pain in the ass.
While we’re being all nostalgic, here’s what Gizmodo looked like when it launched:
The site, which launched several months before Gawker, was designed & developed by Ben and Mena Trott with the couple’s relatively new blogging software, Movable Type.
With all the buzz around the new Gawker design, I figured I’d dig out the first design I ever showed Nick for the site back in October of 2002:
Nick didn’t like it too much. Background too dark, masthead text not logo-y enough. Two weeks later, I sent him this, with a half-assed technicolor logo that I’d dashed off in Photoshop in like 30 minutes:
To my shock, he loved it — so much so that they’re still using the damn thing! — and that design was very close to how the site looked when it launched.
This Wikipedia page has HTML hex codes for all of the 133 standard Crayola crayon colors, including Silver, Blue Green, Melon, Wild Strawberry, and Forest Green.
Matt Jacobs has made a bookmarklet that you can use to find out which Typekit fonts a given site uses. Useful!
Khoi Vinh has a new book coming out next month called Ordering Disorder: Grid Principles for Web Design.
“Ordering Disorder” is an overview of all of my thoughts on using the typographic grid in the practice of Web design. The first part of the book covers the theories behind grid design, the historical underpinnings of the grid, how they’re relevant (and occasionally irrelevant) to the work of Web designers — and a bit of my personal experience coming to grips with grids as a tool.
The second part of the book, which makes up its bulk, walks readers through the design of a full Web site from scratch, over the course of four projects.
Vinh did the art direction for the book himself, so it’s bound to be purty (and grid-y). The perfect early holiday gift for the web designer in your life.
Dan Catt has written part one of a users guide to websites. It explains why sites with “social” features are so difficult to scale beyond a few hundred users and the necessary compromises made that piss off the sites’ vocal power users. Excellent stuff.
That cool “user-who-did-x-also-did-y” feature was calculated whenever you visited your homepage. This worked for the 500 initial users (the site’s builders and their friends) but started to take too long when they hit 1,000 users.
The site solved this by caching (storing the results for an amount of time) the calculations. The users complained that they were being shown incorrect data because everyone they knew was doing stuff all the time and it wasn’t updating fast enough.
The site solved this by invalidating (removing the stored results so they need to be recalculated) the cache whenever anyone did anything. The site hits 5,000 users and the cache is being invalidated every sodding second … the homepage takes too long to load.
The site solves this by writing their own custom code for managing off-line tasks and puts everything into a task queue to be processed.
98% of users accept that the section that used to be called “What your friends are doing right now” gets changed to “What your friends have recently been doing”. The other 2% of users throw a tantrum and accuse the site of being run by useless gibbering idiots.