Tags: sanfrancisco




I’ve just come back from a multi-hop trip to the States, spanning three cities in just over two weeks.

It started with an all-too-brief trip to San Francisco for Science Hack Day, which—as I’ve already described—was excellent. It was a shame that it was such a flying visit and I didn’t get to see many people. But then again, I’ll be back in December for An Event Apart San Francisco.

It was An Event Apart that took me to my second destination: Austin, Texas. The conference was great, as always. But was really nice was having some time afterwards to explore the town. Being in Austin when it’s not South by Southwest is an enjoyable experience that I can heartily recommend.

Christopher and Ari took me out to Lockhart to experience Smitty’s barbecue—a place with a convoluted family drama and really, really excellent smoked meat. I never really “got” Texas BBQ until now. I always thought I liked the sauced-based variety, but now I understand: if the BBQ is good enough, you don’t need the sauce.

For the rest of my stay, Sam was an excellent host, showing me around her town until it was time for me to take off for New York city.

To start with, I was in Manhattan. I was going to be speaking at Future Of Web Design right downtown on 42nd street, and I showed up a few days early to rendezvous with Jessica and do some touristing.

We perfected the cheapskate’s guide to Manhattan, exploring the New York Public Library, having Tiff show us around the New York Times, and wrangling a tour of the MoMA from Ben Fino-Radin, who’s doing some fascinating work with the digital collection.

I gave my FOWD talk, which went fine once the technical glitches were sorted out (I went through three microphones in five minutes). The conference was in a cinema, which meant my slides were giganormous. That was nice, but the event had an odd kind of vibe. Maybe it was the venue, or maybe it was the two-track format …I really don’t like two-track conferences; I constantly feel like I’m missing out on something.

I skipped out on the second day of the conference to make my way over the bridge to Brooklyn in time for my third trip to Brooklyn Beta.

This year, they tried something quite different. For the first two days, there was a regular Brooklyn Beta: 300 lovely people gathered together at the Invisible Dog, ostensibly to listen to talks but in reality to hang out and chat. It was joyous.

Then on the third and final day, those 300 people decamped to Brooklyn’s Navy Yard to join a further 1000 people. There we heard more talks and had more chats.

Alas, the acoustics in the hangar-like space battled against the speakers. That’s why I made sure to grab a seat near the front for the afternoon talks. I found myself with a front-row seat for a series of startup stories and app tales. Then, without warning, the tech talks were replaced with stand-up comics. The comedians were very, very good (Reggie Watts!) …but I found it hard to pay attention because I realised I was in a living nightmare: somehow I was in the front-row seat of a stand-up comedy show. I spent the entire time thinking “Please don’t pick on me, please don’t pick on me, please don’t…” I couldn’t sneak out either, because that would’ve only drawn attention to myself.

But apart from confronting me with my worst fears, Brooklyn Beta was great …I’m just not sure it scales well from 300 to 1300.

And with that, my American sojourn came to an end. I’m glad that the stars aligned in such a way that I was able to hit up four events in my 16 day trip:

Science Hack Day San Francisco

When I organised the first ever Science Hack Day in London in 2010, I made sure to write about how I organised the event. That’s because I wanted to encourage other people to organise their own Science Hack Days:

If I can do it, anyone can. And anyone should.

Later that year, Ariel organised a Science Hack Day in Palo Alto at the Institute For The Future. It was magnificent. Since then, Ariel has become a tireless champion and global instigator of Science Hack Day, spreading the idea, encouraging new events all over the world, and where possible, travelling to them. I just got the ball rolling—she has really run with it.

She organised another Science Hack Day in San Francisco for last weekend and I was lucky enough to attend—it coincided nicely with my travel plans to the States for An Event Apart in Austin. Once again, it was absolutely brilliant. There were tons of ingenious hacks, and the attendees were a wonderfully diverse bunch: some developers and designers, but also plenty of scientists and students, many (perhaps most) from out of town.

Hacking Hacking Hacking Lunch outdoors

But best of all was the venue: The California Academy of Sciences. It’s a fantastic museum, and after 5pm—when the public left—we had the place to ourselves. Penguins, crocodiles, a rainforest, an aquarium …it’s got it all. I didn’t get a chance to do all of the activities that were provided—I was too busy hacking or helping out—like stargazing on the roof, or getting a tour of the archives. But I did make it to the private planetarium show, which was wonderful.

Hacking Hacking

The Science Hackers spent the night, unrolling their sleeping bags in all the nooks and crannies of the aquarium and the African hall. It was like being a big kid. Mind you, the fun of sleeping over in such a great venue was somewhat tempered by the fact that trying to sleep in a sleeping bag on just a yoga mat on a hard floor is pretty uncomfortable. I was quite exhausted by day two of the event, but I powered through on the wave of infectious enthusiasm exhibited by all the attendees.

Sleeping over Sleeping over

Then when it came time to demo all the hacks …well, I was blown away. So much cool stuff.

Ariel and her team really outdid themselves. I’m so happy I was able to make it to the event. If you get the chance to attend a Science Hack Day, take it. And if there isn’t one happening near you, why not organise one? Ariel has put together a handy checklist to get you started so you can get excited and make things with science.

I’m still quite amazed that this was the 24th Science Hack Day! When I organised the first one three years ago, I had no idea that it could spread so far, but thanks to Ariel, it has become a truly special phenomenon.

Stargazing Planetarium

August in America, day twenty-one

I played truant from UX Week this morning to meet up with Mike for a coffee and a chat at Cafe Vega. We were turfed out when the bearded, baseball-capped, Draplinesque barista announced he had to shut the doors because he needed to “run out for some milk.” So we went around the corner to the Code For America office. The place had a layout similar to what we’ve got planned for the new Clearleft building so I immediately starting documenting it with pictures (although it probably looked like I was just trying to sneakily take pictures of Tim O’Reilly).

Office space Office space

After catching up with Mike, I rendezvoused with Jessica back at the hotel and we headed out for lunch at Mel’s diner. The espresso milk shakes there are a must-have on any San Francisco trip I make.

Espresso shakes

Then it was a race against time to try to get to the Mission Bay Conference Center to catch Sophia’s talk at UX Week. She ran the gist of the talk by me yesterday and it sounded great. Alas, I missed the first half of it, but what I caught was reaffirming much of what I was hammering home in my workshops yesterday.

UX Week wrapped up with the inimitable Ze Frank. As I said to Peter afterwards, he’s always reliable but never predictable.

Having said my goodbyes and my thanks to the lovely UX Week people, I met up with Jessica again for a feast of sushi at Hana Zen, right by the hotel. That’s three nights in a row that we’ve had really good asian cuisine downtown: Thai, Chinese, and Japanese.

We finished the evening in good company at the home of young Master Ben, observing the ritual of games night, sipping beers, and resisting the temptation of the cheese.

Tomorrow we depart for Chicago. Farewell, San Francisco; lovely to see you again, as always.

August in America, day twenty

As predicted, today’s schedule of two back-to-back half-day workshops at UX Week was indeed quite exhausting. But it was also very rewarding.

Every time I run a workshop, I always end up learning something from the experience and today was no exception. The attendees were a bright bunch with lots of great questions and discussion points.

Workshopping Workshopping Workshopping Workshopping Workshopping Workshopping

Once the workshops were done, I felt pretty exhausted. Jessica and I had a quiet night sampling the culinary delights of M.Y. China conveniently located just across the street from our hotel so I could collapse into bed at the end of the day.

August in America, day nineteen

Tomorrow I’m going to be spending all day teaching workshops at UX Week: two back-to-back half-day workshops on Responsive UX. So today I took it easy in preparation for what will probably be a knackering day tomorrow.

Jessica and I moved from Tantek’s place to a downtown hotel near Union Square; like I said, despite the fact that UX Week goes on for four days, they only provide speaker accommodation for three, guaranteeing that speakers won’t be around for the whole event. Very odd.

We checked into the hotel, grabbed some sandwiches and sat out in Yerba Buena park, soaking up some sun. It was a bright blue clear day in San Francisco. After that strenuous activity, we went for a coffee and strolled along Embarcadero, finishing the day with some excellent Thai food …just a harrowing walk through the Tenderloin away.

Now I’m going to fret over my workshop material and have a restless night of stress dreams. Wish me luck!

August in America, day eighteen

UX Week kicked off today. It’s a four-day event: one day of talks, followed by two days of workshops, followed by another day of talks. I’ll be spending all of the third day doing workshops back-to-back.

Bizarrely, even though it’s a four-day event, they only offer speakers three nights of accommodation. Seems odd to me: I would’ve thought they’d want us to stick around for the whole thing.

So, as I don’t get my hotel room until tomorrow, today I had to make my way from Tantek’s place in the Haight all the way over to the Mission Bay Conference Center—a fairly long MUNI ride. Alas, that meant I missed Steven Johnson’s opening talk. Curses!

Fortunately I did make it time for Ian Bogost’s talk, which was excellent.

In the afternoon, I walked over to Four Barrel, the excellent coffee shop that was celebrating its fifth birthday. They had a balloons, a photo both, a petting zoo, games, and best of all, free coffee. Tom popped by and we had a lovely time chatting in the sun (and drinking free coffee).

Seeing as I was in the Mission anyway, it would’ve been crazy not to have a mission burrito, so a trip to Papalote quickly followed. Best of all, Erin popped by. Then, as we were heading home via Dolores Park, we met up with Ted. Just like I hoped!

August in America, day sixteen

Today was mostly a travel day. The flight from San Diego to San Francisco is a short hop, but when that flight is delayed by two hours, you’re going to spend far longer than intended within the confines of an airport. That’s what happened to me and Jessica today.

Still, it’s not a bad airport as airports go. And as airports go, it went.

With the delayed departure, the flight itself, and then the taxi ride in from the airport, by the time we finally made it to Tantek’s place it was late afternoon. But we were still made it in time for our dinner date with Cindy and Matt, and Daniel and Sharon.

We uber-ed over to Daniel and Sharon’s place (“to uber” is a perfectly cromulent verb in this town). For once, it was a bright, clear day in San Francisco and we were treated to the gorgeous view of the city laid out below us as we went from the Haight to Bernal Heights.

The last show of the year

I flew out to San Francisco last week for An Event Apart. This was the final event (apart) of the year so it was something of a bittersweet affair. This year the line-up for AEA was—with some minor modifications—consistent from city to city:

  1. Seattle
  2. Boston
  3. Atlanta
  4. Minneapolis
  5. Washington DC
  6. San Francisco

It was like a travelling roadshow, a carnival of web geekery. Next year’s AEA line-up will be very different from city to city, showcasing lots of new speakers, so last week’s San Francisco gig felt like the last concert of a tour before the band breaks up.

Well, we went out with a bang. It was a great conference. But then, every AEA this year has been pretty great (see my account from Boston, for example). I saw so many great presentations and met so many lovely people.

Me and Anton Chloe and me An Event Apart Hanging out with Tessa at the back of the room Me and Jason Media Temple party Me and Jason Fyza and me

With An Event Apart San Francisco falling in December, I was able to extend my travel time into a Christmas-time trip to Jessica’s family in Arizona …but not before spending a week in San Francisco.

I love that town. Admittedly that might be because there’s so many people I know that live there but it’s just a fun place to be a tourist. Coffee at Four Barrel, a Mission burrito, coffee at Blue Bottle, pizza in North Beach, beers at Toronado, wine-tasting in Napa—and all of it culminating in a once-in-a-lifetime trip to The French Laundry.

I put together a Map Tale of my trip, which turned out to be a great way of jotting down my experiences at the end of each day (or at the start of the next day if the day’s exertions proved too much).

hCard Wizard

The microformats meetup in San Francisco after An Event Apart had quite a turnout. The gathering was spoiled only by Jenn getting her purse stolen. Two evenings earlier, Noel had been robbed at gunpoint. San Francisco wasn’t exactly showing its best side.

Still, the microformats meetup was a pleasant get-together. Matthew Levine pulled out his laptop and gave me a demo of the Lazy Web in action…

On the first day of An Event Apart, I twittered a reminder that my liveblogging posts were filled with hCards. Christian asked how I added the hCards and I replied that, while I just add them by hand, some kind of “wizard” for adding simple hCards to any textarea would be very welcome.

Less than 48 hours later, Matthew had whipped up exactly what I asked for. It’s a bookmarklet. Drag it to your bookmarks bar and click on it whenever you want to add a simple hCard. It uses JavaScript to create a faux window with a form where you are prompted to enter given name and family name. You can also add a middle name and a URL.

This is just a small subset of all the properties available in hCard so it isn’t suitable for detailed hCards. If you’re creating the markup for a contact page, for example, you’d be better off with the hCard-o-matic. But this little bookmarklet easily hits 80% of the use cases for adding hCards within body text (like in a blog post, for example).

This is a first release and there will inevitably be improvements. The ability to add XFN values would be a real boon. Still… that’s really impressive work for something that was knocked together so quickly.

If you want to use the bookmarklet (regardless of what blogging engine or CMS you use), drag this to your bookmarks bar:

hCard Wizard

An Event Apart, Day Two

The second day of An Event Apart San Francisco is drawing to a close. The day opened with my talk, Patterns in the Process. You can download the slides if you like—Creative Commons licensed, as usual—but just looking at the slides is like trying to listen to a presentation by putting a glass against the wall of the building next door.

When I was giving my talk, I thought it was kind of rambling and incoherent. But it went down well and lots of people told me they liked it afterwards so I’ll put my self-criticism away.

I was glad to have my talk over and done with. I was able to relax and enjoy the other presentations. The very high standard set on the first day was upheld. I was completely blown away by Jeff’s fantastic smörgåsbord of storytelling and data viz porn: I think I had a little design orgasm in my brain.

At one point during his talk, Jeff showed this very site! He then proceeded to show the style-switching in action by switching to the Zeldman theme …while I was sitting next to Zeldman! When I think back to ten years ago when I was reading Webmonkey and Ask Dr. Web, I never, ever, ever thought I would find myself in this situation.

I’ll be leaving San Francisco tomorrow with a warm glow and good memories. Before that, I’ll be heading to the microformats meetup at the food court of the Westfield Center this evening. If you’re around, maybe I’ll see you there.

An Event Apart, Day One

The first day of An Event Apart is wrapping up in San Francisco. The quality of talks has been outstanding. Now I’m really bricking it about my talk tomorrow morning. The bar has been set ridiculously high.

I’ve done my best to liveblog throughout the day. Inevitably there will be mistakes and omissions in these second-hand reports but here they are:

  1. Understanding Web Design by Jeffrey Zeldman
  2. The Lessons of CSS Frameworks by Eric Meyer
  3. Storytelling by Design by Jason Santa Maria
  4. Web Application Hierarchy by Luke W.
  5. Shepherding Passionate Users by Heather Champ
  6. The Framework Age by Liz Danzico
  7. Implementing Design: Bulletproof A-Z by Dan Cederholm

I’m kind of wiped out from all the typing. I probably won’t be able to manage a second day of liveblogging. I can’t wait to have my talk out the way and enjoy the rest of the speakers.

The Framework Age

Liz Danzico is talking at An Event Apart San Francisco about frameworks. Not CSS frameworks, not JavaScript frameworks, not Rails, not Django, but websites as frameworks. These days we’re designing frameworks for user interaction rather than static artefacts.

Liz tells a story about Miles Davis who showed up at the studio with six slips of paper listing the six musicians he wanted to play with on his record. Over the course of one day, these people who had never played this music together recorded a whole album. Davis wanted to capture something called creative instability. Kind of Blue came out of this framework that he created.

Liz wants to talk about frameworks that are uninscribed and detectable cues that loosely govern a set of actions. These are interaction frameworks, frameworks that shape how people behave.

Back to music. Classical music uses classical notation. If you can’t read notation, you can’t make sense of it so it’s kind of elitist. It also provides rules like tempo and key. If you step outside these boundaries, you are deviating from the notation. Also, every note is accounted for in the notation. You can’t improvise it. Jazz notation is different. It provides chord progressions. It’s up to the musician to improvise around this framework. Modal jazz is even more abstract. That’s what Miles Davis invented that day in the studio. Kind of Blue was created out of just a scale.

On the web, we’re making the same transition from classical to jazz. We’re improvising. We’ve moved from a hard-coded system of building pages to an open system of creating participatory environments.

But this kind of tension is nothing new. It’s being going on for years. There’s been a long-running tension between orality and literacy. The printing press destroyed a lot of oral tradition but we still use word of mouth to pass on urban legends and recipes. Liz mentions Alex Wright’s observation in Glut that we are seeing a resurgence in this kind of oral tradition online. Even though we’re writing in blogs and mailing lists, we’re not so much publishing as talking.

There’s evidence of improv online. Exquisite simplicity was how pianist Bill Evans described Miles Davis’s framework of six slips of paper.

Quoting from The Paradox of Choice, Liz shows how the default settings can make a big difference (in the number of organ donations, for example, which could be opt-in or opt-out). Geni has some smart default settings. Same with Tripit. All you need to do is forward an email and it will take care of the rest. Focus on creating smart defaults.

In improv, you need to involve the audience. It’s important to adapt to what your audience is doing. Here’s an example from architecture: there was a fountain that was built in Washington Square Park in New York but before they got ‘round to turning it on, people started using it as a seating area. When the city tried to turn on the fountain, people revolted. The fountain is dry to this day and is used for public theatre.

Referring to the redesign of the Wordpress admin, Liz points out that it’s really important to involve users in the design process. There’s a difference between asking your audience what they think of a system compared to looking at how they are actually using that system.

Listen and watch. That’s another lesson we can take from music and apply to the web. When you’re playing with other people, not only do you have to listen to what the other people are doing, you have to watch them too. It’s the same with architecture. Desire paths are created by people actually using a space. They show clearly where paths should be built. Eyetracking can reveal the desire paths of users interacting with an application. There are other tools like User Voice which can involve the audience. Observe. Listen. Pay attention.

A common technique in Jazz is call and response when musicians play off one another. You see this online in reviews where the reviews start reacting to each other rather than the original item being reviewed. Allow users to build on one another.

User-centred design and participatory design are great ways of involving the users in the design process but that’s still different to actual use. It’s time for a new way of working: designing for improvisation (but remember that no one single process will ever be successful). Our design process should reflect the trend towards user participation that we’re seeing on the web. People’s tolerance for improvisation is increasing and our role as framework providers should reflect that.

Web Application Hierarchy

Luke W., master of forms, is at An Event Apart San Francisco to tell us about hierarchy in web apps. He asks whether visual hierarchy matters and how we can construct a visual hierarchy.

Let’s face it, people don’t read everything when they get to a web page. Instead, they look around frantically until they see something that looks vaguely like what they’re interested in and then click on something to find out if that’s what they want, hitting the back button if it isn’t. We have an evolutionary capability to assess things quickly and tune stuff out.

The are three design considerations with web apps:

  1. Organisation. The structure of the app.
  2. Interaction. The behaviour of the app.
  3. Presentation. How your app looks to the audience.

The presentation layer should communicate how a web app works (interaction) and where stuff is (organisation). The presentation has two components:

  1. Visual organisation.
  2. Personality.

We focus a lot on communicating What is this?, How do I use it?, Why should I care?

Luke shows a screenshot of a very generic looking interface with no real visual hierarchy. No one can tell what it does. By reorganising the page elements, it becomes clearer what the application does. All that’s changed is the hierarchy.

He shows another example: Yahoo Desktop. The old design was very flat, everything was emphasised equally. The redesigned version has emphasised the labels “Search” and “Browse”.

In another example, a listing site, we see that de-emphasising page elements is as important as emphasising. There’s no point in having everything competing for attention.

Having shown us the benefits of visual hierarchy, Luke is going to show us how.

We make sense of the world in terms of relationships. We don’t know when we smell because we’re used to the smell, but other people notice because our smell stands out. It’s much the same with sight. We can associate or disassociate things using contrast, distance and size. We can use contrast in visual weight to guide the eye and create a flow. A screenshot of the Apple website demonstrates a considered creation of flow (compare that to a site where everything has equal weight—your eyes can’t focus on any one thing).

With cheap storage and open-source development environments, the barriers to entry for creating a web application are approaching zero. With so many web apps out there, how do you communicate at a glance what your app does?

When we design web pages, we concentrate on how a page fits into the structure of the site (is it a “parent” page or a “child” page, for example). But increasingly we should be thinking about how our pages fit into the structure of the web. Most people will probably arrive at a web page directly, through a search engine or content aggregation tool, rather than by drilling through the structure of your site.

Enough about the importance of letting people know what they can do on a web page. The next step is to make good on that promise and allow people to do what they came to do. Let people get straight to what they want to do. Don’t put any roadblocks in their way.

Luke’s talk is filled with excellent examples to convey his points but of course, given the visual nature of what he’s talking about, I can’t really do them justice here. You had to be there.

Storytelling by Design

Jason Santa Maria is here at An Event Apart San Francisco to give a design counterbalance to Eric’s code-filled talk.

He kicks off with a heavy question: the meaning of web design. We often talk about the tools like grids and typography but we often overlook the storytelling aspect. Usually we’re trying to accomplish a narrative through design, such as a visitor to a site buying a product.

From an early age, we’re taught to recognise stories. We learn to recognise stories from pictures before we can even read. This is graphic resonance. The game Haunted House on an old-school Atari. It’s fear personified, jokes Jason of the pixelly 8-bit images. The graphics don’t tell you much but if you look at the packaging, it sets the mood for the game.

The designer is the narrator. Jason shows the Tufte visualisation favourite of Napoleon’s invasion of Russia. It tells a dramatic story (and conveys lots of information) through design. You can see more modern versions of storytelling through graphic design in magazines like Wired. They vary the layout and the design direction to set a mood for the article. The design helps reinforce the story. But when these articles move online they are all served up in the same template. We’ve distilled our stories down to content.

David Carson says Design can’t not communicate. No matter what you put on a page, you are communicating something. A lot of the time we aren’t thinking about this and that means our stories are lacking. Take a look at all those Web 2.0 logos to see homogenisation in action. It’s pretty much the same with page layouts. Why are we plagued with this sameness?

Who’s heard people say, Most web designers aren’t designers or We’re limited to just five typefaces. It’s such bollocks. You can still tell a story. For many years, print design also had a very limited amount of typefaces but they still came up with great stories through design. Are we just not trying hard enough on the web?

Jason tackles the same chestnut that Jeffrey mentioned: Where are the examples of iconic web design? asked Armin Vit. But it’s apples and oranges to compare print (or any other medium) with the web. It’s a different medium. Here are things that distinguish the web:

  1. The metaphorical page. When we design, we usually do it on a physical medium like a cave wall or a paper page. Figuring out how to convey lots of information in a limited space is not a new problem. There are always constraints. Usually these are physical constraints, like the physical dimensions of say, a book. But what about a web page? There’s no limit to the height of a web page. Web pages can extend beyond the boundaries of the viewport. That gives us a license to talk more.
  2. Ubiquity and WYSIWYG. A magazine doesn’t change from printing to news stand to reader. But a web page can change. We can switch off images or style sheets. Not only can things change through user input, the designer can change the scope of the page.
  3. Collections of pages. With a book, you can tell a lot about the amount of information it contains just by looking at it. It has attainability and grasp of depth. You don’t get that with a web site.
  4. Layout. is a very valuable tool for layout. It’s a pleasing relationship that’s found in nature. We can develop a system based on it. There’s also the rule of thirds. Books are usually held at the same distance in the same way. That’s certainly not true with web sites when they’re viewed on different devices. Ratios and the rule of thirds break down because we cannot predict the dimensions of a web page. So how is it fair to compare the two media.

Jason has found some sites that are telling interesting stories through design. No one belongs here more than you. Fray. A Brief Message. The Principles of Beautiful Web Design.

Jason realised that he was in the same boat as the rest of us. So recently he redesigned his website to try to tell better stories. He has a basic template but he customises the design for each article he publishes, changing colours, fonts, images, even layout. It’s a simple system for quick art direction. We want to publish quickly online and that can be a big hindrance to customising visual design.

It’s always difficult to describe new technologies. We can always fall back on storytelling though. Early photography was described as telling stories with light. No one needs to know about the underlying technology. On the web, we’ve figured out the technology to a large extent: formats, etc. Design for the web has chiefly been driven forward by technology rather than message. Maybe it’s time to go back and start asking what are the stories we are trying to tell. The form of design should be driven by the story.

The Lessons of CSS Frameworks

Eric Meyer is going to talk about CSS frameworks here at An Event Apart San Francisco.

He did a Google search for “CSS Frameworks” and put together a list of the big players. It’s a list of nine frameworks. Eric wants to know two things: what are they doing the same and what are they doing differently.

Let’s get one question out of the way, the question which one is right for you? Answer… none of the above. It’s like templates. There’s nothing wrong with templates but you don’t put together your client’s site based on a template, right? They can be a good starting point for ideas but you do your own designs. If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.

Eric put together a grid of features and which frameworks support those features. Every framework does reset, colours, and fonts. The fact that every framework has a reset is evidence of the frustration we all feel with the inconsistencies between browsers. The rules for colour tend to be much more minimal. Font styling, on the other hand, is more fully-featured generally. Whereas the colour might just be set for the body element, font sizes and faces are specified throughout. Usually that font face is Helvetica. Most frameworks steer away from trying to style form elements. Almost all of them do layout, usually combinations of columns. Four of the nine frameworks included print styles. Three of the nine included hacks.

Font sizes

Four of the nine frameworks are setting font sizes on the body with pixels. Tripoli uses Richard’s 62.5% rule. Eric points out how using a 76% rule on the body can lead to inconsistent font-sizing between browsers because of the inconsistencies of rounding off font sizes. Only two of the frameworks aren’t using unitless line-heights. Generally you want a line height of 1 to get propagated down the document tree rather than simply the computed value of 1em in pixels. You don’t want a 40 pixel element having a line height of 12 pixels.

Heading sizes

Most of these frameworks, with the exception of YUI, are setting heading sizes in some form or another. The only place where you’ll see a heading size go below 1em is in a browser style sheet. In the frameworks, no heading size, even h6, goes below the size of body text, 1em. Blueprint and Elements set pretty large sizes on h1 and h2. The other frameworks cluster around the same size range, never getting very big or very small. Eric averaged out all the measurements to get the average size for h1 and h2.

Naming conventions

Where frameworks are using IDs or classes, what names are they using? Four of them use psuedo-namespaced class names beginning with grid- or container- or span- (which you would apply to a div!?). You’re supposed put classes in your markup like grid-3 or span-5 or whatever. This seems pretty complicated. Three frameworks use more intuitive names like page, header or main. In fact header, main and footer are universal IDs across the three frameworks.

Style inclusion patterns

Some of the frameworks have a single short style sheet that you point to from your markup, which then links off to separate style sheets for fonts, colours, layout, etc. But most of them use separate style sheets and you must link to each one in your markup. Eric reckons that this is because IE for Windows will cache the first style sheet you point to with a link element but not any subsequent style sheets with @import.

What the hack?

There are two kinds of hacks:

  1. Hacks that point to failings in CSS like self-clearing floated elements and things like pseudo-padding.
  2. Hacks for Internet Explorer 6.

Some cool bits

Some of the frameworks provide compressed versions for production use to keep file size down.

Three of the frameworks had debugging styles that you could “turn on” to say, display the grid in the document.

YAML provides a draft file which is like a template style sheet. The selectors are written out but the declarations are left empty. This could be a handy training tool (fill in the curly braces).

960 provides “sketch” files: PDFs of the grid for you to print out and scribble on.

Thus endeth Eric’s roundup of CSS frameworks.

Supernova 2008

. A cathedral to geekdom. The aisle of divides the city in two. The spire of the soars through the fog. The city rests on the , a bedrock as safe and secure as the new economy. Erstwhile home to the gold rush of ‘48, San Francisco is now the epicentre of a whole different land grab.

I showed up on the weekend and spent a few days with Cindy checking out the street art in San Rafael, sampling some excellent sushi and making a fool of myself on the Wii. By Monday morning I had transferred over to Port Zero and together with Tantek, I headed out to the opening of Supernova 2008.

This was a very different conference to my usual diet of design and development. There was a definite whiff of “thought leaders” in the air, tinged with the odor of entrepreneurs and consultants. The day got off to a good start with the inimitable Clay Shirky followed by Esther Dyson. Things took a bit more of a corporate twist when Rob Iannucci from Nokia began boasting of the company’s market share. My usual reaction to hearing these kinds of statistics is the same as seeing the latest music or movie charts — to me, it all just reinforces .

The downward spiral continued with a panel devoted to television and advertising, two crappy flavours that taste crappy together. I don’t hate these subjects because they are outdated and doomed;I hate them because they are boring. Once again, Buzzword Bingo saved the day. At least three people in the front row (myself, Tantek and Kevin) were shooting buzzword fish in a buzzword barrel to save us from having to gnaw our own legs off.

Then, just when I thought that things couldn’t sink any lower, Arrington The Hutt waddled on stage, sucking the last remaining vestiges of cool from the room, leaving only a slime trail for attendant VCs to eagerly lap up. But at the last moment, the day was saved with the utterance of those two magical words: “free booze.”

Day two was very different. It started off with one of the best panels I’ve ever had the pleasure to attend. BJ Fogg expertly moderated the clumsily-titled People: What We Know, and What it Means? featuring Charlene Li, Eszter Hargittai and Elizabeth Churchill. Not only were all three excellent speakers, but they also brought a wealth of research with them to support their findings on user behaviour. The panel was entertaining and stimulating; the perfect antidote to the previous day’s channelling of by Rob Iannucci, who was convinced that all motivations were transactional in nature …a creepy, misguided viewpoint that completely fails to account for the rich tapestry of emotions that drives our activities.

The afternoon was taken up with a themed track of talks called Open Flow which had been put together by Tantek. In a nod to the spirit of openness, he projected a backchannel onto the wall: any Twitter postings containing the words “supernova2008 open flow.” Ariel and I rickrolled it just once or twice.

Tantek took the moderation reins for a panel entitled Whose Social Graph?, a title that prompted an absent Zeldman to propose a breakout session on advanced webcockery, my favourite comment of the day. The panel featured Kevin from Google and Dave Morin from Facebook, very deliberately separated by Joseph from Plaxo. Tantek pulled up David’s blog post entitled It Seems that Google and Facebook Still Can’t Get Connected and watched the sparks fly. Arguments around privacy and terms of service were tossed back and forth between Dave and Kevin until Dave finally played the lawyer card and refused to discuss the situation any further.

I was due to moderate the final panel and, much as I like to stir the shit when I’m the gamesmaster, I knew I could never follow the perfect shitstorm that Tantek had so cleverly whipped up. I could, however, have some fun.

A few times during his panel, Tantek confused Google’s Friend Connect with Facebook’s Friend Finder …or maybe it was Frend Feed? Anyway, it’s an easy mistake to make. It seems that most of the hippest new technologies are named by simply combining positive-sounding words like “connect”, “friend” or “open”. So while the other panels were still going on, I hacked together The Social Buzzword Generator (it seems to have tickled the funny bone of at least one journalist at the Wall Street Journal).

When it was time for my panel, I debuted the buzzword generator and also pulled up buzzword bingo, encouraging the audience to play along with both toys. The panel was called Bottom-Up Distributed Openness and I had Tantek, David, Chris and Leah lined up. The order of the line-up reflected the age of each technology I had them speak about:

  • Tantek described microformats—three years old this week.
  • David talked about OpenID—less than two years old.
  • Chris gave the skinny on OAuth—a specification since November.
  • Leah described oEmbed—just a few weeks old.

I was interested in finding the commonalities and differences between all these communities. As we delved into the inner workings of each one, it became clear that they were all “open” but to a deliberately limited degree. But that’s no different than, say, the open source movement. It’s clear that Linus Torvald’s contribution to Linux is going to count more than a complete stranger’s. I posited the idea that it was no different for each of the panelists in their respective communities. The term “benevolent dictatorship” was tossed around. A comment on Twitter summmed it up nicely: Open is as open does.

All in all, it was a good panel and a good day. Best of all, there was a visual journalist on hand throughout the afternoon, doodling all the ideas and connections that were flowing.

So Supernova was a bit of a mixed bag overall but when it opened up to real people who genuinely had something worthwhile to say, rather than company shills pitching their products, it really shone. Kevin put a lot of work into organizing this conference and it was a pleasure to be a part of it. In some ways, Supernova is the perfect reflection of San Francisco …warts and all.

City Hopping

Now that I’m done travelling for pleasure, it’s time for me to travel for business again. I’m heading out to San Francisco for the Supernova conference. Tantek has roped me into moderating a panel called Bottom-Up Distributed Openness.

I’ll be showing up in SF next Friday. Until then, I’ll be in Nashville for the somewhat embarrassingly-titled Voices That Matter conference where I’ll be delivering a half-day workshop on Ajax and a presentation on microformats.

While I’m in the heartland, I’m planning to treat myself to a new mandolin. Then I can bring that mandolin with me when I go to Copenhagen at the end of the month for Reboot 10 where, if my proposal is accepted, I’ll be talking on The Transmission of Tradtion. The video of my talk from last year, the pretentiously-titled Soul is available for your viewing pleasure. I’ll see about getting it transcribed and added to the articles section here.

All that’s ahead of me. Right now I need to prepare myself for the long and tedious trip across the Atlantic. See you in Nashville, San Francisco or Copenhagen.

Foo camping

The day that I was flying to San Francisco, Simon and Nat were flying to New Zealand for Kiwi Foo and Webstock so we shared a bus to Heathrow. They both look knackered because they had attempted to “get on New Zealand time” by staying up all night. We parted at the airport: See you in Austin I said. Good luck decentralising the social graph he replied.

Since arriving in San Francisco, I’ve spent most of my time trying to meet up with as many people as possible. A hastily-convened microformats/geek dinner helped to accomplish that.

Now I’m in Sebastopol for the SG Foo Camp. The letters SG stand for Social Graph, which is unfortunate—I’m not a big fan of that particularly techy-sounding term. That said, I’m really looking forward to hearing more from Brad Fitzpatrick about the new Social Graph API from Google. It isn’t the first XFN parser but it’s the only one with Google’s infrastructure. The data returned from spidering my XFN links is impressive but the fact that it can also return results with inbound links is very impressive, although it takes significantly longer to return results and often times out.

For most people, today’s big news was Microsoft licking its lips at Yahoo but that was completely eclipsed by the new API for me. While I was waiting at Tantek’s for Larry and Chris to drive by and pick us up, I spent my time gleefully looking through the reams of information returned from entering just one URL into the API. Just now, I was chatting with John Musser from Programmable Web and we were thinking up all the potential mashups that this could open up.

I’m not going to build anything just yet though. I’m far too tired. I need to find a nice quiet corner of the O’Reilly office to unroll my sleeping bag.


It’s time for my next Stateside trip. Tomorrow I’ll be making the long haul from Heathrow to San Francisco.

But this time, I won’t be staying in town. On Friday, I’ll be heading upcountry to join a gathering of ridiculously smart people for the Social Graph Foo Camp. I’m already feeling intimidated—I hope I’ll be able to bring something useful to the table even though my area of expertise feels woefully inadequate: hCard, XFN, and that’s pretty much it.

I’ll be spending ten hours on an airplane and then three days sleeping on O’Reilly’s floor. Between the flight and the camping, I’ll get a day or two in San Francisco, which I’ll probably spend running around like crazy trying to see my friends.

Mind you, most of my web design friends won’t be there. They’ll all be up in Canada living the designer cliché, snowboarding on the slopes of Whistler. Ah, how I wish I could be in both places at once! I’m sure Web Directions North will be amazing. I had a great time there last year. I still get a kick out of watching this little bit of mischief in the snow.

Return from San Francisco

With a mixture of regret and anticipation, I boarded my flight from San Francisco back to London. I was looking forward to getting back to Brighton and seeing Jessica again. But I had such a good time in San Francisco, it was hard to leave.

It’s funny to think that up until this year, I had never been to Shaky Town. And now I’ve just returned from my third visit. I was ostensibly there for the Voices That Matter conference but if truth be told, I probably wouldn’t have attended the conference if it weren’t for the location—especially considering the speakers’ fee (or lack thereof).

During the conference proper, I was staying at a very pleasant hotel downtown. That was bookended with a few days on either side staying with Tantek. I couldn’t have asked for a better host. He showed me around the neighbourhood, shared his WiFi and generally showed me a good time.

The day before I skipped town, I went along to the geek picnic that Ariel organised in South Park. Nibbling on a nice selection of cheeses while Hugh McLeod churned out a cornucopia of cartoons, we enjoyed the last of the Summer sunshine in the epicentre of the geek mindhive.

That evening, I attempted to repay Tantek for his kindness by cooking up a pot of my signature chili while he organised guests for a little dinner party—the second in as many days. My last two evenings in San Francisco were spent eating good food, sipping good wine and enjoying really good company. It’s always fun to hang with the people who make the web apps I use—Blaine from , Leah from , Ted from Satisfaction—ply them with booze and then slip in a feature request or two.

All in all, this trip to San Francisco was the perfect mixture of seeing old friends and making new ones. Thanks to New Riders for giving me the opportunity to visit one my favourite places and thanks to everyone else for making me feel so welcome. As always, visual documentation is provided for your viewing pleasure.