kottke.org posts about web development

Heaven's Gate still open for businessSep 17 2014

Heavens Gate

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!

Microsoft.com celebrates 20th anniversaryAug 08 2014

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)

The amazing invisible spacer GIF hackMar 05 2014

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

David Siegel

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.

Cascading Style Simpsons (CSS)Nov 12 2013

Chris Pattle has constructed Simpsons characters completely out of CSS.

Simpsons CSS

We've come a long way from #cccccc and <font color=... And it looks like Pattle avoided the Simpson No-Nos.

Simpsons No Nos

Emulator of the first "readily accessible" web browserSep 25 2013

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)

Breaking Bad-ize any web pageSep 24 2013

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.

Breaking Bad Js

Star Wars opening crawl done with HTML/CSSSep 16 2013

Tim Pietrusky made an HTML/CSS version of the opening text crawl from Star Wars.

The making of Digg ReaderJun 20 2013

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.

Play-companies and the value of a hard day's workJun 11 2013

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's Kinja, circa 2003Jun 27 2012

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:

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

Jonathan Hoefler on webfontsDec 05 2011

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

Do a barrel rollNov 03 2011

The most fun on the internet right now: go to Google and search for "do a barrel roll" (no quotes). Whee!

So long, Kaliber10000Oct 24 2011

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.

Early 1990s web browsersOct 17 2011

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)

Screenshots of the early World Wide WebSep 23 2011

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.

Original Twitter homepageSep 14 2011

Twttr

Or at least a very early version. Bigger here. From humble beginnings...

ps. Here's an early Facebook screenshot, an early Google homepage, and Yahoo's homepage circa 1994, and an early screencap of Tumblr's dashboard.

All HTMLAug 15 2011

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.

On pagination navigationMay 10 2011

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.

http://mlkshk.com/p/212C

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!

Seeking webmaster/designer for a small projectApr 29 2011

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!

How to complain about softwareApr 13 2011

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)

Faking native iOS apps with HTML/CSS/JavaScriptMar 09 2011

Matt Might has a nice tutorial on how to make mobile web apps look like native iOS apps using HTML, CSS, and JavaScript.

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.

To stop this behavior, capture touchmove events on the document in JavaScript and cancel them. You can do this by adding a handler to the body tag, and invoking the preventDefault method on the event object.

Huh, you can even do "pull to refresh" in JavaScript.

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.

The first Gizmodo designFeb 11 2011

While we're being all nostalgic, here's what Gizmodo looked like when it launched:

Gizmodo 2001 design

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.

The very first Gawker designFeb 11 2011

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:

Gawker 2002 design

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:

Gawker 2002 design

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.

Crayon colorsFeb 03 2011

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.

What's that Typekit font?Nov 15 2010

Matt Jacobs has made a bookmarklet that you can use to find out which Typekit fonts a given site uses. Useful!

Web design using gridsNov 05 2010

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.

There's no "u" in social mediaSep 28 2010

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.

Worst practices on the webSep 16 2010

Dark Patterns are UI techniques designed to trick users into doing things they otherwise wouldn't have done.

Normally when you think of "bad design", you think of laziness or mistakes. These are known as design anti-patterns. Dark Patterns are different -- they are not mistakes, they are carefully crafted with a solid understanding of human psychology, and they do not have the user's interests in mind.

For instance, Privacy Zuckering is a dark pattern implemented by Facebook to get users to share more about themselves than they would like to. (thx, @tnorthcutt)

Lost World's FairsSep 15 2010

Want to see the state of the art in web design using web fonts and Typekit? Check out Lost World's Fairs. It's all good, but Frank Chimero really knocked it out of the park with the 1962 Atlantis World's Fair. With HTML5 and web fonts, experimentation with web design seems open and fun again; reminds me of the 90s a bit.

HTML5 version of The Game of LifeJul 12 2010

So, every time I post one of these HTML5 games or apps (like The Game of Life), I got tons of email from people who say that it could be done much easier or better in Flash. Which is probably true. But I post these experiments because I've been using HTML since 1994 and I love it. It's simple (or can be), open, can be edited with any old text editor, and increasingly capable. Oh sure, HTML can be maddening at times, but I'm fascinated and happy to see it maturing into something that has so much functionality.

CSS3 solar systemJun 30 2010

Gorgeous CSS3 animation of the solar system. But here's what it looks like in IE (tee hee).

Steve Jobs: Thoughts on FlashApr 29 2010

A letter from Steve Jobs about why they don't allow Flash on iPhones, iPods, and iPads. (Notice he specifically uses the harsher "allow" instead of the much softer "support".)

Though the operating system for the iPhone, iPod and iPad is proprietary, we strongly believe that all standards pertaining to the web should be open. Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript -- all open standards. Apple's mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, of which Apple is a member.

Jobs sort of circles around the main issue which is, from my own perspective as heavy web user and web developer: though Flash may have been necessary in the past to provide functionality in the browser that wasn't possible using JS, HTML, and CSS, that is no longer the case. Those open web technologies have matured (or will in the near future) and can do most or even all of what is possible with Flash. For 95% of all cases, Flash is, or will soon be, obsolete because there is a better way to do it that's more accessible, more open, and more "web-like".

3-D effect in CSSDec 17 2009

Roman Cortes took Diego Velázquez's Las Meninas and applied a pseudo 3-D parallax effect to it using only CSS. Awesome. Now redo The Kid Stays in the Picture entirely in CSS.

Typekit is liveNov 10 2009

Typekit launched today (details here).

This will change the way you design websites. Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

I haven't had a chance to play around with this yet, but hope to soon. And hey, you can use Silkscreen with Typekit.

IMG is everythingNov 04 2009

Mark Pilgrim explores the question: why do we have an IMG element in HTML?

Why not an <icon> element? Or an <include> element? Why not a hyperlink with an include attribute, or some combination of rel values? Why an <img> element?

What Pilgrim doesn't touch on was how that IMG tag drove adoption of Mosaic. Having images embedded right into web pages was like Dorothy stepping out of her house and into the lush color of Oz. (via waxy)

The Bold ItalicOct 21 2009

Really inspiring design by the folks at the newly launched The Bold Italic. It's webby and magazine-y at the same time, but not overly so. Looks great on the iPhone too. Jealous. (via @timoni)

j/k paging JavascriptOct 21 2009

Javascript code for navigating between posts using the j and k keys, just like on ffffound and The Big Picture. (via 37s)

How Typekit serves fontsSep 09 2009

Jeff Veen has a look at how Typekit protects fonts served through the service.

To that end, our Javascript is minified and the fonts themselves are represented as Base64 encoded strings. You may see right through this, but the vast majority of web users wouldn't know what to make of it.

Those Base64 encoded strings are then placed right into the CSS file. And even better than that, the fonts are split up into multiple files and recombined using the CSS font stack. Pretty clever stuff.

Making the web fasterJul 31 2009

Lots of resources from Google on making your web site faster.

HomeSite, RIPJul 09 2009

Adobe has discontinued HomeSite. Nick Bradbury, HomeSite's creator, has some parting thoughts.

Sometimes in this blog I've made disparaging remarks about HomeSite, but that's not because I disliked it. It's just that it's hard to look at something you created so long ago without seeing all the mistakes that you've learned not to make since then. I'm actually very proud of HomeSite, and very thankful that it enabled me to quit my job and work at home. And, funny enough, HomeSite is also what paid for the home I'm living in now.

All of my web stuff up until mid-2002 was done in HomeSite...it's where 0sil8 thrived and kottke.org was born. I still haven't found a piece of web authoring software that feels as comfortable as HomeSite did back then.

Stop masking passwordsJun 23 2009

Jakob Nielsen says: stop masking passwords in web input forms.

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures.

Sing it, brother. It's even worse on the iPhone...even with the last letter thing that it gives you, I still mistype passwords all the time.

Typekit: real fonts for the webMay 28 2009

Typekit is an upcoming typeface hosting service which will provide vetted fonts that you can include in your site's stylesheet using the @font-face mechanism.

That's where Typekit comes in. We've been working with foundries to develop a consistent web-only font linking license. We've built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

What a great idea. And web entrepreneurs pay attention, this is how to make a compelling online property: take an idea that everyone loves in theory but doesn't use in practice because it's a pain in the ass (in this case, embedding type on the web) and offer a hosting service to solve that problem. YouTube did this with videos, Blogger/Blogspot, TypePad, & Wordpress did this with blogs, Flickr did it with photos, etc. etc.

Live updatingFeb 09 2009

I added a new feature to kottke.org over the weekend: live updating on the home page. If you leave kottke.org open in your browser (with JavaScript on) and I post a new link, the page will display a message urging you to refresh to view some new posts. The page title changes too, so if you have it up in a tab, you can tell at a glance if something's new. Right now the page checks for new posts every ten minutes, but that could change depending on server load, etc. Thanks to Twitter Search and Tumblr for the inspiration.

Quick design tweaksJan 28 2009

As promised, the redesign of this site started last week is still in motion. I've just made a bunch of small tweaks that should make the site more readable for some readers.

- Fonts. In response to a number of font issues (many reports of Whitney acting up, the larger type looking like absolute crap on Windows), I've changed how the stylesheets work. Sadly, that means no more lovely Whitney. :( Mac users will see Myriad Pro Regular backed up by Helvetica and Arial while PC users will see Arial (at a different font-size). In each case, the type is slightly smaller than it was previously. I'm frustrated that these changes need to be made...the state of typography on the web is still horrible.

- Blue zoom border. Oh, it's staying, but it'll work a bit differently. The blue sides will still appear on the screen at all times but the top and bottom bars will scroll with the content. I liked the omnipresent border, but the new scheme will fix the problems with hidden anchor links and hidden in-page search results and allow for more of the screen to be used for reading/scanning. It breaks on short pages (see: the 404 page) and still doesn't work quite right on the iPhone, but those are problems for another day.

- Icons. Updated the favicon and the icon on the iPhone to match the new look/feel.

- Misc. Rounded off the corners on the red title box. Increased the space between the sidebar and the main content column.

Thanks to everyone who offered their suggestions and critiques of the new design, especially those who took the time to send in screenshots of the problems they were having. Feedback is always appreciated.

Regarding the new designJan 19 2009

The design of kottke.org has been mostly the same since 2000...a garish yellow/green bar across the top and small black text on a white background everywhere else. (See the progression of designs since 1998.) People absolutely hated that color when I first introduced it1, but it stuck around -- mostly out of laziness -- and that pukey yellow became the most visible brand element of the site.

Two days ago, I refreshed the design of the site and, as you may have noticed, no more yellow/green. The other big changes are: bigger text set in a new font, a blue "zoom" border around the page, and the addition of titles to the short posts.

(A brief nuts and bolts interlude... For most of you, the site will look like this. If you've got Myriad Pro on your machine -- it comes free with Acrobat Reader and Adobe CS -- it'll look like this...this is the "intended" look. And if you're a fancypants designer with Whitney installed, you'll get this rarified view, which I did mostly for me. On IE6, the site will be legible and usable but somewhat unstyled. If you're not seeing something that looks like one of the above screenshots -- if the text is in all caps, for instance -- please drop me a line with a link to a screenshot and your browser information. Thanks!)

The blue "zoom" border is the biggest visual change, and it's an homage to what is still my favorite kottke.org design, the yellow zoom from 1999. I like that kottke.org is one of the few weblogs out there that can reach back almost ten years for a past design element; the site has history. In a way, that border is saying "kottke.org has been around for ten years and it's gonna be around for twenty more". At least that's how I think about it.

I've already gotten lots of feedback from readers, mostly via Twitter and email. There were a few technical issues that I've hopefully ironed out -- e.g. it should work better on the iPhone now -- and a couple which might take a bit longer, like the border messing with the page-at-a-time scrolling method. Some people like the changes, but mostly people don't like the new design, really dislike the blue, and generally want the old site back. This is exactly the reaction I expected, and it's heartening to learn that the old design struck such a chord with people. All I'm asking is that you give it a little time.

My suspicion is that as you get used to it, the new text size won't seem so weird and that blue border will likely disappear into the background of your attention, just as that hideous yellow/green did. A month from now, your conscious mind won't even see the blue -- chalk it up to something akin to banner blindness...brand blindness maybe? -- but your subconscious will register it and you'll just know where you are, safe and sound right here at good ol' kottke.org. And if that doesn't work, we'll tweak and move some things around. Design is a process, not a result, and we'll get it to a good place eventually, even if it takes twenty years.

[1] I wish I had access to my email from back then...everyone hated it and wanted the old design back. Before landing on the yellow/green color, I tried the golden yellow from the previous design, a blue very much like the blue in the current border, and then red. I think each color was live on the site for a few days and my intention was to just keep switching it around. But then I got bored and just left the yellow/green. Gold star to anyone who remembers that short phase of the site.

EcommrNov 21 2008

Ecommr is a collection of interface and design elements from ecommerce sites. I wish there were a bit more context around each screenshot (e.g. which interface element is the focus and what's novel about it) but it's a good start.

HTML rendering visualizationsJun 19 2008

Video visualizations of how the HTML rendering engine underneath Firefox's hood renders mozilla.org, a Wikipedia page, and Google Japan.

A wonderful (and wonderfully long) post byApr 14 2008

A wonderful (and wonderfully long) post by Dan Hill on how he and his team thought about and executed the Monocle web site.

None of what follows is rocket science, and it's not the place to look for thoughts on 2.0/3.0, social software, or urban informatics. That would be in the accounts of different projects. But if you're interested in the honest craft of website work, almost deliberately old-fashioned 'classical' web design -- and how to ally this with innovation in magazine publishing -- the following should provide a decent account of several of the key decisions in this particular project.

Dan's thoughtful approach should be required reading for anyone building media web sites.

Getting into Momofuku KoApr 04 2008

Frank Bruni, the food critic for the NY Times, wrote yesterday about the difficulty of getting a reservation at David Chang's new Momofuku Ko restaurant. Ko's online reservation system is the *only* way of procuring a seat at the tiny Manhattan restaurant...no walk-ins, no friends of the chef or celebs getting preferential treatment. It works more or less like Ticketmaster's online ticketing: you select the number of guests, it shows you the available reservation times (if any), you click on a time, and if that time is still available when you click it, only then does the system hold your choice while you fill in some information.

It's a simple system; seats for dinner are released on the site a week in advance at 10am each day and the people that click on their preferred times first get the reservations. Ko takes only 32 reservations each night and the restaurant is one of the hottest in town, which means that all the reservations are gone each day in seconds...sometimes in 2 or 3 seconds. Just like Radiohead tickets on Ticketmaster.

Except that diners are not used to this sort of thing. One of Bruni's readers got irritated that he got through to the pick-a-time screen but then when he clicked on his preferred time was told that the reservation was already gone. Someone had beaten him to the punch. So he emailed the restaurant for an explanation. The exchange between the restaurant and the snubbed patron should be familiar with anyone who has done web development for clients or any kind of tech support.

In a nutshell, the would-be patron said (and I'm paraphrasing here), "your system is unfair and broken," and the folks at Ko replied, "sorry, that's how the internet works". The comments on the post are both fascinating and disappointing, with many people attempting to debunk Ko's seemingly lame excuse of, well, that's how the internet works. Except that's pretty much the right answer...although it's clearer to say that that's how a web server communicates with a web browser (and even that is a bit imprecise). When the pick-a-time page is downloaded by a particular browser, it's based on the information the web server had when it sent the page out. The page sits unchanged on your computer -- it doesn't know anything about how many reservations the web server has left to dole out -- until the person clicks on a time. An anonymous commenter in Bruni's thread nails the choice that a web developer has to face in this instance:

This is a multi-user concurrency problem that all sites with limited inventory and a high demand (users all clicking the button all at the same time) have to deal with. It's not an easy problem to solve.

The easier method (which the Ko site has chosen) is to not "lock" a reservation slot until the very end. You submit your party size and the system looks for available slots that it knows about. It shows you the calendar page, with the available slots it knows about (if any). This doesn't update in real time because they haven't implemented it to know about the current state of inventory. This can be done, but it's more complicated.

The more complicated method is to lock a reservation slot upon beginning of the checkout process, with a time out occurring if the user takes too long to finish, or some other error occurs (in other systems this can be a blacklisted credit card number). If this happens, the system throws the reservation slot back into the pool. However, you need to give people a mechanism to keep trying for ones that get thrown back into the pool (like a "Try Again" button).

Building something like this not impossible (see Ticketmaster) but requires a much more real-time system that is aware of who has what, and what stage of the checkout process they're in - in addition to total available inventory. Building a robust system like this is not cheap.

Even then, you might get shut out. You submit your party size, everything is already gone, and you never get to the calendar page. It just moves up the "sold out" disappointment to earlier in the process.

A subsequent commenter suggests using "Web 2.0" technologies (I think he's talking specifically about Ajax) but as Anonymous suggests, that would increase the complexity of the system on the server side (unnecessarily in my mind) while moving up the "'sold out' disappointment to earlier in the process". Plus, that sort of system could put you "on hold" for several minutes while the reservations are taken by the folks in front of you until you're told, "too bad, all gone". I'm not sure that's preferable to being told sooner and may result in much more irritation on the part of potential diners.

In my opinion (as a web developer and as someone who has used Ko's reservation system from start to finish), Ko's system does it right. You're locked into a reservation by the system only when you've chosen exactly what you want. It favors the web user who's prepared & lucky and is simple for Ko to implement and maintain. That the logic used to produce this simple system takes three paragraphs to explain to an end user is irrelevent. After all, a restaurant dinner is easy to eat but explaining how it came to be that way fills entire books.

This might seem too inside baseball for most readers -- the number of people interested in new NYC restaurants *and* web development is likely quite small, even among kottke.org's readership -- but there's an interesting conflict going on here between technology and customer service. What kind of a problem is this...technological or social? Bruni's correspondent blamed the technology and much of the focus of the discussion has been on the process of procuring a reservation. But the main limiting factor is the enormous demand for seats; tens of thousands of people a week vying for a few hundred seats per week. The technology is largely irrelevent; whatever Ko does, however well the reservation system works or doesn't work, nearly all of the people interacting with the restaurant are going to be disappointed that they didn't get in.

It's been awhile since the last conversationMar 19 2008

It's been awhile since the last conversation about gender diversity at web conferences. Here's a particularly high profile example of more of the same: Google's just-announced Web Forward conference appears to have a single woman speaker out of 38 total speakers.

Lampoon of an hilariously crappy maintenance requestSep 24 2007

Lampoon of an hilariously crappy maintenance request web app at University of Pennsylvania.

Yes, I know that it says "Search Criteria Required!" at the top of the screen, in red letters, with an exclamation point. But that's just to fool you into thinking that search criteria are required. In fact, the only thing that's required (or even permitted!) for you to do at this point is to click on the large button labelled "Insert" at the top of the page.

New web site for Hoefler & Frere-Jones,Sep 06 2007

New web site for Hoefler & Frere-Jones, the noted and celebrated typeface designers, including a weblog. Subscribed. Oh, and the browser fonts of choice for the meticulous duo? "Lucida Grande, Lucida Sans, Verdana, Georgia, Helvetica, Arial" (thx, jonathan)

Jen Bekman updates us on how CarsonSep 05 2007

Jen Bekman updates us on how Carson Systems is doing on their efforts in gender diversity for their conferences. A: Much better. Whereas their Feb07 Future of Web Apps event had only one woman speaker, their upcoming London event features eight women. See also: gender diversity at web conferences statistics from Feb and Bekman's list of women speakers for your conference.

An interview with Paul Ford about theJun 12 2007

An interview with Paul Ford about the work that he's been doing at Harper's, specifically putting the magazine's entire archives online. "It's obviously a lot for one person working alone to bring hundreds of thousands of pages online while writing, editing blog content, programming a complex, semantic web-driven site, and providing tech support for an office."

Stuff from Steve Jobs' WWDC keynote thisJun 11 2007

Stuff from Steve Jobs' WWDC keynote this morning: new version of Safari for Mac *and* Windows (downloadable beta), developing for iPhone can be done with HTML & JavaScript...just like Dashboard widgets, new Finder and Desktop, and Apple's web site is completely redesigned.

Update: From the reaction I'm hearing so far, it's difficult to tell what was more disappointing to people: Jobs' keynote or The Sopronos finale. Also, a Keynote bingo was possible (diagonally, bottom left to top right)...no report yet as to whether anyone yelled out during the show.

Update: TUAW is reporting that someone in the crowd yelled "bingo" 35 minutes into the keynote, but if you look at the card, a bingo was only possible when the iPhone widgets were announced towards the end. Disqualified for early non-bingo! (thx, alex)

kottke.org tagsJun 08 2007

After working on this -- on again and off again, mostly off -- for much too long, I'm pleased to say that a significant chunk of kottke.org now has tags (around 5,100 entries are tagged, out of ~13,000). Right now, the only way to access them is through individual tag pages, but after all the bugs are ironed out, I'll be putting them in different places around the site (front page, main archive page, etc.).

Each tag page lists all the entries1 on the site that are tagged with that particular word...some good examples to start you off are: photography, economics, lists, infoviz, food, nyc, cities, restaurants, video, timelapse, interviews, language, maps, and fashion. Each page also has a list of tags related to that particular tag and further down in the sidebar, you'll find lists of recently popular tags, all-time popular tags, a few favorite tags of mine, and some random tags...lots of stuff to explore.

I've tweaked the design as well: the main column is a little wider, the post metadata look/feel is consistent among short posts and long posts, faint dotted lines now separate all entries, and per-entry tags were added to the post metadata. I'm testing all that out for eventual site-wide use. Questions, comments, bug reports, etc. are welcome...send them on in.

Update: I almost forgot, the nsfw tag.

[1] Not all the entries exactly. Until I figure out how to do some pagination, I've limited the number of entries to 100 for each tag page. The movies page was more than 1 Mb when all the entries were listed.

Made some long overdue changes to theMay 29 2007

Made some long overdue changes to the sidebar on the front page, including an even longer overdue update of the "sites I've enjoyed recently". I used to use that list for my daily browse but it fell into decay when I started reading sites in RSS. Now the list is a random sampling of sites from the current reading list in my newsreader. If things look a little weird, you may need to refresh the stylesheet (do a Shift-reload on the home page).

A bunch of presentations on how toMay 28 2007

A bunch of presentations on how to scale web apps, including Flickr, Twitter, LiveJournal, and last.fm.

Using CSS to consistently style forms buttonsMay 17 2007

Using CSS to consistently style forms buttons across IE, Firefox, and Safari.

CodaApr 24 2007

Panic has released Coda, a new web development app for OS X. Panic co-founder Cabel Sasser describes it thusly:

We build websites by hand, with code, and we've long since dreamed of streamlining the experience, bringing together all of the tools that we needed into a single, elegant window. While you can certainly pair up your favorite text editor with Transmit today, and then maybe have Safari open for previews, and maybe use Terminal for running queries directly or a CSS editor for editing your style sheets, we dreamed of a place where all of that can happen in one place.

Ever since I switched to a Mac, I've been seeking a suitable replacement/upgrade for Homesite. I limped along unsatisfied with BBEdit and am finally getting into the groove with TextMate, but the inter-app switching -- especially between the editor, FTP client, and the terminal -- was really getting me down. John Gruber has a nice preview/review of Coda:

Each of Coda's components offers decidedly fewer features than the leading standalone apps dedicated to those tasks. (With the possible exception of the terminal - I mean, come on, it's a terminal.) This isn't a dirty secret, or the unfortunate downside of Coda only being a 1.0. Surely Coda will sprout many new features in the future, but it's never going to pursue any of these individual apps in terms of feature parity.

The appeal of Coda cannot be expressed solely by any comparison of features. The point is not what it does, but it how it feels to use it. The essential aspects of Coda aren't features in its components, but rather the connections between components.

Panic's implicit argument with Coda is that there are limits to the experience of using a collection of separate apps; that they can offer a better experience - at least in certain regards - by writing a meta app comprising separate components than they could even by writing their own entire suite of standalone web apps. Ignore, for the moment, the time and resource limitations of a small company such as Panic, and imagine a Panic text editor app, a Panic CSS editor app, a Panic web browser, a Panic file transfer/file browser app - add them all together and you'd wind up with more features, but you'd miss the entire point.

Panic co-founders Steven Frank and Cabel Sasser both weigh in on the launch. Has anyone given Coda a shot yet? How do you find it? I'm hoping to find some time later today to check it out and will attempt to report back.

I'm not going to lie to you...Apr 23 2007

I'm not going to lie to you...I didn't read this whole thing, but I found the sprinkled-in UI redesigns of Amazon's book listings and other online retail interfaces interesting. (thx, drew)

Following up on my post about genderApr 20 2007

Following up on my post about gender diversity at web conferences, Jeffrey Zeldman of An Event Apart commissioned a study by hiring "researchers at The New York Public Library to find out everything that is actually known about the percentage of women in our field, and their positions relative to their male colleagues". "There is no data on web design and web designers. Web design is twelve years old, employs hundreds of thousands (if not millions), and generates billions, so you'd think there would be some basic research data available on it, but there ain't." I found the same thing when poking around for a bit back in February. They do have stats for IT workers in general...men outnumber women by over 3-to-1 and that gap is growing.

Update: NY Times: "Yet even as [undergraduate women] approach or exceed enrollment parity in mathematics, biology and other fields, there is one area in which their presence relative to men is static or even shrinking: computer science." (thx, meg)

Pagination and Page-View Juicing are Evil. "TheApr 19 2007

Pagination and Page-View Juicing are Evil. "The realistic ones at least admit that it's a cheap way to boost stats. The disingenuous (or naive) ones actually posit that they are improving readability and usability for their audiences by reducing scrolling. Because scrolling is so hard." See also my pagination tantrum.

A low wattage color palette for webApr 18 2007

A low wattage color palette for web designers. The palette is based on the Energy Star wattage ratings for colors. (via migurski)

WindMaker adds motion to a web siteApr 18 2007

WindMaker adds motion to a web site based on the current wind conditions at a place of your choosing. Here's kottke.org with NYC wind and with Chicago wind. (thx, jim)

No One Belongs Here More Than YouApr 09 2007

Miranda July, who you might remember from her film Me and You and Everyone We Know, has a book coming out in May, a collection of stories called No One Belongs Here More Than You. The book has a web site that's one of the most effective and creative I've seen in a long time. Here's a screenshot of one of my favorite pages, just to give you a taste:

No One Belongs Here More Than You

The really intriguing thing about the site is that it breaks pretty much every rule that contemporary web designers have for effective site design. The site is a linear progression of images, essentially 30 splash pages one right after another. It doesn't have any navigation except for forward/back buttons; you can't just jump to whatever page you want. July barely mentions anything about the book and only then near the end of the 30 pages. There's no text...it's all images, which means that the site will be all but invisible to search engines. No web designer worth her salt would ever recommend building a site like this to a client.

Yet it works because the story pulls you along so well; July's using the site's narrative to sell a book that is, presumably, chock full of the same sort of narrative. If you think the site sucks and quickly click away, chances are you're not going to like the book either...it's the perfect self-selection mechanism. The No One Belongs Here More Than You site is a lesson for web designers: the point is not to make sites that follow all the rules but to make sites that will best accomplish the primary objectives of the site.

John McCain is using Mike Davidson's MySpaceMar 27 2007

John McCain is using Mike Davidson's MySpace template (without attribution) and pulling some images directly from Davidson's server, which is a big no-no in webmaster land. So Davidson modified one of his images displaying on McCain's MySpace page to say that he'd reversed his position on gay marriage, especially "marriage between passionate females".

Men look at crotchesMar 14 2007

Among the many interesting things in Online Journalism Review's article about using eyetracking to increase the effectiveness of news article design is this odd result:

Always look crotch

Although both men and women look at the image of George Brett when directed to find out information about his sport and position, men tend to focus on private anatomy as well as the face. For the women, the face is the only place they viewed. Coyne adds that this difference doesn't just occur with images of people. Men tend to fixate more on areas of private anatomy on animals as well, as evidenced when users were directed to browse the American Kennel Club site.

That is absolutely fascinating. I'd love to hear an evolutionary biologist's take on why that is.

I'm also heartened by the article's first featured finding: that tighter writing, more white space, and jettisoning unnecessary imagery helps readers read faster and retain more of what they've read.

A nice presentation on web typography from SXSW 2007.Mar 13 2007

A nice presentation on web typography from SXSW 2007.

Here's some JavaScript you can use toMar 13 2007

Here's some JavaScript you can use to make your web site work on the Wii. "Wiimote keycodes can be detected by JavaScript in the Wii Opera browser [but] I could not find a JavaScript library that facilitates handling these input events, so I created my own"

New Yorker site redesignedMar 08 2007

The New Yorker redesign just went live. Not sure if I like it yet, but I don't not like it. Some quick notes after 15 minutes of kicking the tires, starting with the ugly and proceeding from there:

  • Only some of the old article URLs seem to work, which majorly sucks. This one from 2002 doesn't work and neither does this one from late 2005. This David Sedaris piece from 9/2006 does. kottke.org has links to the New Yorker going back to mid-2001...I'd be more than happy to supply them so some proper rewrite rules can be constructed. I'd say that more than 70% of the 200+ links from kottke.org to the New Yorker site are dead...to say nothing of all the links in Google, Yahoo, and 5 million other blogs. Not good.
  • The full text of at least one article (Stacy Schiff's article on Wikipedia) has been pulled from the site and has been replaced by an abstract of the article and the following notice:
    The New Yorker's archives are not yet fully available online. The full text of all articles published before May, 2006, can be found in "The Complete New Yorker," which is available for purchase on DVD and hard drive.
    Not sure if this is the only case or if the all longer articles from before a certain date have been pulled offline. This also is not good.
  • They still default to splitting up their article into multiple pages, but luckily you can hack the URL by appending "?currentPage=all" to get the whole article on one page, like so. Would be nice if that functionality was exposed.
  • The first thing I looked for was the table of contents for the most recent issue because that's, by far, the page I most use on the site (it's the defacto "what's new" page). Took me about a minute to find the link...it's hidden in small text on the right-hand side of the site.
  • There are several RSS options, but there's no RSS autodiscovery going on. That's an easy fix. The main feed validates but with a few warnings. The bigger problem is that the feed only shows the last 10 items, which isn't even enough to cover an entire new issue's worth of stories and online-only extras.
  • A New Yorker timeline. Is this new?
  • Listing of blogs by New Yorker contributors, including Gladwell, SFJ, and Alex Ross.
  • Some odd spacing issues and other tiny bugs here and there. The default font size and line spacing make the articles a little hard to read...just a bit more line spacing would be great. And maybe default to the medium size font instead of the small. A little rough around the edges is all.
  • The front page doesn't validate as XHTML 1.0 Transitional. But the errors are pretty minor...<br> instead of <br />, not using the proper entity for the ampersand, uppercase anchor tags and the like.
  • All articles include the stardard suite of article tools: change the font size, print, email to a friend, and links to Digg, del.icio.us, & Reddit. Each article is also accompanied by a list of keywords which function more or less like tags.
  • Overall, the look of the site is nice and clean with ample white space where you need it. The site seems well thought out, all in all. A definite improvement over the old site.

Thanks to Neil for the heads up on the new site.

Gender diversity at web conferencesFeb 22 2007

Every few months, the blogosphere addresses the matter of gender diversity of speakers at conferences about design, technology, and the web. The latest such incidents revolved around the lack of women speakers at the the Future of Web Apps conference in San Francisco last September1 and the Creativity Now conference put on by Tokion in NYC last October. Each time this issue is raised, you see conference organizers publicly declare that they tried, that diversity is a very important issue, and that they are going to address it the next time around.

With that in mind, I collected some information2 about some of the most visible past and upcoming conferences in the tech/design/web space. I'm reasonably sure that the organizers of these conferences were aware of at least one of the above recent complaints about gender diversity at conferences (they were both linked widely in the blogosphere), so it will be interesting to see if those complaints were taken seriously by them.

Future of Web Apps - San Francisco
September 13-14, 2006
0 women, 13 men. 0% women speakers.

Tokion Magazine's 4th Annual Creativity Now Conference
October 14-15, 2006
6 women, 30 men. 17% women speakers.

PopTech 2006
October 18-21, 2006
8 women, 30 men. 21% women speakers.

Web Directions North
February 7-10, 2007
5 women, 16 men. 24% women speakers.

LIFT
February 7-9, 2007
10 women, 33 men. 23% women speakers.

Future of Web Apps - London
February 20-22, 2007
1 woman, 26 men. 4% women speakers.

TED 2007
March 7-10, 2007
12 women, 41 men. 23% women speakers.

SXSW Interactive 2007
March 9-13, 2007
147 women, 378 men. 28% women speakers.
164 women, 373 men. 31% women speakers. (updated 2/22/2007)
165 women, 379 men. 30% women speakers. (updated 3/31/2007)

BlogHer Business '07
March 22-23, 2007
43 women, 0 men. 100% women speakers.

An Event Apart Boston 2007
March 26-27, 2007
1 woman, 8 men. 11% women speakers.

O'Reilly Emerging Technology Conference
March 26-29, 2007
9 women, 44 men. 17% women speakers.
12 women, 79 men. 13% women speakers. (updated 3/31/2007)

Web 2.0 Expo 2007
April 15-18, 2007
17 women, 91 men. 16% women speakers.

Future of Web Design
April 18, 2007
2 women, 12 men. 14% women speakers.
4 women, 16 men. 20% women speakers. (updated 3/31/2007)

GEL 2007
April 19-20, 2007
2 women, 11 men. 15% women speakers.
1 woman, 16 men. 6% women speakers. (updated 3/31/2007)

MIX07
April 30 - May 2, 2007
0 women, 4 men. 0% women speakers.
8 women, 89 men. 8% women speakers. (updated 3/31/2007)

The New Yorker Conference 2007
May 6-7, 2007
3 women, 21 men. 13% women speakers. (updated 2/28/2007)
6 women, 29 men. 17% women speakers. (updated 3/31/2007)

Dx3 Conference 2007
May 15-18, 2007
5 women, 48 men. 9% women speakers. (updated 3/2/2007)
5 women, 70 men. 7% women speakers. (updated 3/31/2007)

An Event Apart Seattle 2007
June 21-22, 2007
0 women, 9 men. 0% women speakers.
1 women, 9 men. 10% women speakers. (updated 3/31/2007)

From this list, it seems to me that either the above concerns are not getting through to conference organizers or that gender diversity doesn't matter as much to conference organizers as they publicly say it does. The Future of Web Apps folks seem to have a particularly tin ear when it comes to this issue. For their second conference, they doubled the size of the speaker roster and added only one woman to the bill despite the complaints from last time. This List of Women Speakers for Your Conference compiled by Jen Bekman is a little non-web/tech-heavy, but it looks like it didn't get much use in the months since its publication. Perhaps it's time for another look. (If you think this issue is important, Digg this post.)

Update: To the above list, I added An Event Apart Boston 2007 and corrected a mistake in the count for GEL 2007 (they had one more woman and one less man than I initially counted.) Ryan Carson from Carson Systems, the producers of The Future of Web Apps conferences, emailed me this morning and said that my "facts just aren't correct" for the count for their London conference. He stated that the number of speakers they had control over was only 13. Some of the speakers were workshop leaders (the workshops "are very different" in some way) and others were chosen by sponsors of the conference, not by Carson Systems. I'm keeping the current count of 27 total speakers as listed on their speakers page this morning...they're the people they used to promote the conference and they're the people at the conference in the front of the room, giving their views and leading discussions for the assembled audience. (thx, erik, mark, and ryan)

Update: I added the Future of Web Design conference to the above list. (thx, jeff)

Update: Hugh Forrest wrote to update me on the latest speaker numbers for SXSW Interactive 2007 (he keeps close watch on them because the issue is an important and sensitive one to the SXSW folks)...the ones on their site were less than current. In cases where counts are updated (and not inaccurate due to my counting errors), I will append them to the conference in question so that we can see trends. I plan to update the above list periodically, adding new conferences and keeping track of the speaker numbers on upcoming ones.

[1] Sadly, when I Googled "future of web apps women" while doing some research for this post, Google asked "Did you mean: 'future of web apps when'"?

[2] All statistics as of 2/22/2007. Consider the gender counts rough approximations...in some cases, I couldn't tell if a certain person was a man or a woman from their name or bio.

[3] This conference has released only a very incomplete speaker list.

Hey you, web designer! Looking for a job?Jan 29 2007

Serious Eats is looking for a web designer who's familiar with blogs, isn't afraid of a little PHP code, and is located in (or is planning on relocating to) NYC. Serious Eats is a start-up that is focused on sharing food enthusiasm through blogs and online community. You'll be working with a fine group of folks. SE is headed up by Ed Levine, who Gourmet editor-in-chief Ruth Reichl calls the "missionary of the delicious" and Meg Hourihan, who co-founded blogger.com and happens also to be married to me. Alaina Browne, formerly of A Full Belly and Mule Design, and Adam Kuban, pizza and burger expert, round out SE's crew of passionate food people.

Fringe benefits: you can't imagine all the culinary goodies that make their way into that office everyday. Meg comes home and casually says things like, "oh, we had a private tasting of the new Haagen-Dazs flavors in the office today" all the freaking time. If you're a web designer with an interest in food, this is your place.

Video: web designers Jeffreys Veen and ZeldmanJan 22 2007

Video: web designers Jeffreys Veen and Zeldman fight in Wii Boxing. More web designer Miis here and an explanation here.

Here's how MacRumors did their livecast ofJan 16 2007

Here's how MacRumors did their livecast of Steve Jobs' MacWorld keynote. At one point, the site had 213,000 simultaneous visitors.

Fuck, this pisses me off: the NewOct 10 2006

Fuck, this pisses me off: the New Yorker is splitting up their longer pieces into multiple pages (for example: Ben McGrath's article on YouTube). I know, everyone else does it and it's some sort of "best practice" that we readers let them get away with so they can boost pageviews and advertising revenue at the expense of user experience, but The New Yorker was the last bastion of good behavior on this issue and I loved them for it. This is a perfect example of an architecture of control in design and uninnovation. I want the New Yorker's web site to get better, not worse. Blech and BOOOOOOOOOOOOO!!!!

Update: Dan Lockton has some further thoughts on multi-page articles.

Update: The New Yorker seems to have reversed their opinion on the matter. Nice work.

Update: Nope, still busted. Crap.

Google code searchOct 05 2006

Google launched a new code search feature today. At least two sites already offer this functionality, but a great deal of attention follows Google wherever they go.

Code search is a great resource for web developers and programmers, but like the making available of all previously unsearched bodies of information, it's given lots of flashlights to people interested in exploring dark corners. Here are some things that people have uncovered already:

Got any other Google code search goodies? Send them along. If you find this interesting, Digg this story.

The National Park Service has made someSep 12 2006

The National Park Service has made some of their map symbols and patterns (lava/reef, sand, swamp, and tree) freely available for download in PDF and Illustrator formats. (via peterme)

How design worksSep 12 2006

Michael Bierut on his design process, written in plain language that the client never gets to hear (but maybe they should):

When I do a design project, I begin by listening carefully to you as you talk about your problem and read whatever background material I can find that relates to the issues you face. If you're lucky, I have also accidentally acquired some firsthand experience with your situation. Somewhere along the way an idea for the design pops into my head from out of the blue. I can't really explain that part; it's like magic. Sometimes it even happens before you have a chance to tell me that much about your problem! Now, if it's a good idea, I try to figure out some strategic justification for the solution so I can explain it to you without relying on good taste you may or may not have. Along the way, I may add some other ideas, either because you made me agree to do so at the outset, or because I'm not sure of the first idea. At any rate, in the earlier phases hopefully I will have gained your trust so that by this point you're inclined to take my advice. I don't have any clue how you'd go about proving that my advice is any good except that other people - at least the ones I've told you about - have taken my advice in the past and prospered. In other words, could you just sort of, you know...trust me?

It is like magic. Reminds me of something Jeff Veen wrote last year on his process:

And I sort of realized that I do design that way. I build up a tremendous amount of background data, let it synthesize, then "blink" it out as a fully-formed solution. It typically works like this:

- Talk to everybody I possibly can about the problem.
- Read everything that would even be remotely related to what I'm doing. Hang charts, graphs, diagrams, and screenshots all over my office.
- Observe user research; recall past research.
- Stew in it all, panic as deadline approaches, stop sleeping, stop eating.
- Be struck with an epiphany. Instantly see the solution. Curse my tools for being too slow as I frantically get it all down in a document.
- Sleep for three days.

Like I said when I first read Jeff's piece, in my experience, a designer gets the job done in any way she can and then figures out how to sell it to the client, typically by coming up with an effective (and hopefully at least partially truthful) backstory that's crammed into a 5-step iterative process, charts of which are ubiquitous in design firm pitches.

How to do a click heatmap onAug 23 2006

How to do a click heatmap on your site with JavaScript and Ruby. Includes source code. Very slick.

Nice interview with 37signals' Jason Fried by Khoi Vinh.Jun 05 2006

Nice interview with 37signals' Jason Fried by Khoi Vinh.

After having the same web site sinceJun 04 2006

After having the same web site since like 1985, Emigre has finally launched a redesign. The new site looks like it was done in 1998; the front page is all images, laid out in tables, and is invisible to search engines.

Because of the Eolas patent crap, MicrosoftMar 17 2006

Because of the Eolas patent crap, Microsoft is updating Internet Explorer so that you need to click to "activate" any Flash or Quicktime applet. There's a workaround that involves replacing all your <object> <embed> and <applet> tags with JavaScript functions that write those tags. This is going to make a lot of web sites a pain in the ass to use with IE and developers are going to have to modify a lot of code. What a nightmare. (thx, dunstan)

Cheaper airline ticketsFeb 23 2006

TechCrunch reports on FlySpy, a site that will help people buy the lowest priced airplane ticket for a given destination:

The way it works is that I give it a departure city and a destination city and optionally a departure date and length of stay. The search result, which returns very quickly, will present me with a graph of flight prices over the next 30 days so that I can quickly look at which days are the cheapest to fly. To book a flight I just click on the point in the graph. Simple.

That's a pretty useful UI innovation (especially if you're able to drill down into individual days to find the lowest fare on that day), but it doesn't help you much if your travel dates are inflexible. The killer airline reservation app that I've been wanting for several years would tell you when to buy your ticket for a particular flight. Airlines update their fares several times a day and hundreds of times over the course of a month. Depending on when you buy, it might cost you $250 or $620 for the same exact ticket.

What this hypothetical app would do is track fare histories and then release forecasts based on those histories. If you want a RT to SFO from JFK on 4/12/06 returning 4/17/06, the site would tell you to buy your ticket three weeks out or when the price hits $298, whichever comes first, but to never wait until the week before, when similar flights begin to sell out.

A thornier problem than the one FlySpy addresses, but it could save people a lot of money. (This would work for hotels and rental cars as well probably, although I don't think their prices fluctuate as much.)

Exciting new Web 2.0 product: JusFlam is "theFeb 20 2006

Exciting new Web 2.0 product: JusFlam is "the social network for people who enjoy Jesus, and flames, and rotating stuff". The beta seems to be down at the moment...it's throwing a "due to overwhelming server load, that is due to underwhelming development methodologies and system architecture, due to limited resources, due to limited business direction, due to giving away a complex web service for free with no feasible plan for revenue generation besides 'getting bought by google or maybe yahoo', we are unable to process your request at this time" error.

Microsoft to retire pile-of-crap web design program FrontPage.Feb 17 2006

Microsoft to retire pile-of-crap web design program FrontPage.

The cover for a 2004 novel called I,Jan 20 2006

The cover for a 2004 novel called I, Fatty bears a striking resemblance to that of Jeff Veen's The Art and Science of Web Design from 2000.

Khoi Vinh on the move...he's theDec 30 2005

Khoi Vinh on the move...he's the new Design Director for NYTimes.com. From the outside, it's one of the best jobs in web design and it's been filled well. (via waxy)

AIGA Voice has an interview with PeterDec 12 2005

AIGA Voice has an interview with Peter Morville about his new book, Ambient Findability. A question from the interview that everyone responsible for a web site should be asking themselves (emphasis mine): "Can [people] find your content, products and services despite your website?" Love that.

Web design contest offers the potential winnerDec 09 2005

Web design contest offers the potential winner a chance to "fire missiles remote-controlled by computer at a US military base in Iraq". (via tmn)

With AJAX MAssive Storage System (AMASS) aOct 20 2005

With AJAX MAssive Storage System (AMASS) a web page can store large amounts of data on a computer using hidden Flash applets. Brilliant hack, but seems like a potential security concern (an AMASS-like app could just fill up a hard drive without prompting, no?). I just looked at this briefly...would this allow one to run something like GMail offline? (I'm thinking not.) (via waxy)

Nifty "straight man" redesign of The Onion.Aug 31 2005

Nifty "straight man" redesign of The Onion. Khoi Vinh of Behavior explains how the design was realized. (via waxy)

This list of ten steps to buildingAug 24 2005

This list of ten steps to building a successful Web 2.0 company is really quite insightful. #3 is a favorite: "Launch. Now. Tomorrow. Everyday."

New design for A List Apart, theAug 23 2005

New design for A List Apart, the venerable Web design site, done with XHTML/CSS (of course) and Ruby on Rails. (via waxy)

Salon profile of 37signals and "the nextAug 10 2005

Salon profile of 37signals and "the next web revolution". Also noted (for the first time in public, I think): Adaptive Path's secret web app is "a tool to help bloggers measure traffic and other stats on their site [and] will be out by the end of the year".

Andy Baio dug up this circa-1995 versionAug 02 2005

Andy Baio dug up this circa-1995 version of BobaWorld, one of my earliest favorite pages on the web. Boy, that square imagemap at the bottom of the page takes me back.

Atom 1.0Jul 15 2005

Atom 1.0. The Atom format finally goes 1.0.

Creating styled checkboxes and radio buttons with CSS and JavaScriptJul 14 2005

Creating styled checkboxes and radio buttons with CSS and JavaScript.

How to style a restaurant menu with CSSJul 13 2005

How to style a restaurant menu with CSS.

Impressive demonstration of Ruby on RailsJul 11 2005

Impressive demonstration of Ruby on Rails. "How to build a blog engine in 15 minutes with Ruby on Rails".

Jeff Veen's The Art and Science ofJul 01 2005

Jeff Veen's The Art and Science of Web Design is 5 years old. To celebrate, he's made a proof of the entire book available for download.

Zeldman's observations about judging the May 1st RebootJun 24 2005

Zeldman's observations about judging the May 1st Reboot. Most of the entries lacked originality, had little content, and even less focus on the user. Sounds like many of the winners of interactive design annuals as well.

Giant-Ass Image ViewerJun 20 2005

Giant-Ass Image Viewer. Python script (+JavaScript and CSS) for cutting up and viewing large images, a la Google Maps.

Flickr switches from Flash to DHTML/AjaxMay 13 2005

Flickr switches from Flash to DHTML/Ajax for displaying photos and notes. You can now also put links in notes, which, damn, my mind just blew.

Yikes, looks like there's some problems withMay 08 2005

Yikes, looks like there's some problems with the Google Web Accelerator. It "clicks" every link, including those that might delete documents and such in web apps.

Macromedia may be a bit concerned aboutApr 20 2005

Macromedia may be a bit concerned about Ajax competing with Flash's XML socketing. "Kevin [Lynch] specifically wanted to explore the possibility of hooking into the Ajax system with Flash, via Flex."

Flash developers can now add an optionApr 08 2005

Flash developers can now add an option to their Flash movies to view the source.

kottke.org

Front page
About + contact
Site archives

Subscribe

Follow kottke.org on Twitter

Follow kottke.org on Tumblr

Like kottke.org on Facebook

Subscribe to the RSS feed

Advertisement

Ads by The Deck

Support kottke.org shop at Amazon

And more at Amazon.com

Looking for work?

More at We Work Remotely

Kottke @ Quarterly

Subscribe to Quarterly and get a real-life mailing from Jason every three months.

 

Enginehosting

Hosting provided EngineHosting