Archive: June, 2010

There’s been a lot of map-related activity on the BBC recently. The series of documentaries called The Beauty of Maps was all too short.

Meanwhile, Radio 4 ran a ten-part series entitled On The Map. They would have disappeared down the Beeb’s memory hole but Brian did a little bit of digital preservation and passed them on to me. I’ve put them on Huffduffer. You can subscribe to a podcast of all ten episodes or listen to them individually:

1. The Map Makers
2. Mapping the Metropolis
3. Motoring Maps
4. Social Mapping
5. The Lie of the Land
6. World View
7. Off The Map
8. Whose Map is it Anyway?
9. Digital Maps
10. Maps of the Mind

If you’re in London any time before September 19th, be sure to check out the Magnificent Maps exhibition at The British Library. It’s free and it’s excellent.

I wrote a little while ago about one of the trends I saw emerging at An Event Apart, namely what the mighty Ethan has dubbed Responsive Web Design. With widespread browser support for media queries and the hype around the iPad and iPhone, there’s a perfect storm of interest in adaptive layouts.

Huffduffer and dConstruct were just the start: now Jon and Colly have both updated their personal sites to become beautifully adaptive and responsive to whatever user-agent their visitors are using.

This is true web design—design with a real understanding for the medium. I still maintain that rigidly-constrained graphics tools—i.e. all of them—are an impediment to moving the web forward in this direction. But the bigger impediment is in the mindset of those who still think of hypertext as something fixed and controllable, like a printed page (see also: every attempt at magazine apps on the iPad).

Back in 2006, I wrote about the unpushed envelope:

The ability to alter the presentation of a website without altering its structure should have opened up the floodgates of design creativity.

CSS hasn’t revolutionised web design. The reason lies not with the technology (which is revolutionary), but with the designers using it. Most designers have simply swapped the old technology (tables and font tags) for the new technology, without fully exploring what’s so completely new.

It has taken its own sweet time, but I think the sea change might finally be coming. Dave’s CSS Zen Garden and John’s A Dao of Web Design were the harbingers. Now the first pebbles are beginning to trickle down the mountainside of the web, heralding what I hope is an oncoming avalanche of beautiful, responsive, adaptive layouts.

It makes sense that this change is starting on personal sites; places that have always served as playgrounds and sandboxes for experiments that can then be rolled out in a more commercial setting. Steering larger websites down a new route will always be more challenging. Take the new layout changes on Flickr—they are beautiful changes …as long as your browser window is wide enough. I had to expand the browser window on my laptop in order to view everything on the Flickr homepage or else suffer an ignominious crawlbar.

Still, I’m confident that we’ll see the trend for adaptive layouts spread to larger sites. In the same way that Doug’s Wired redesign and Mike’s ESPN redesign proved the potential of CSS, some enterprising designers at a large site—like Flickr—will take up the challenge of leading the way with responsive web design.

Update: Ethan talks about responsive web design on The Big Web Show:

On Friday, June 25th, three things will happen:

1. Clearleft will spend the day having some lomography fun around Brighton with Lomokev.
2. Salter Cane will play a rocking concert with Caramel Jack upstairs at The Prince Albert pub on Trafalgar Street.
3. HTML5 For Web Designers will begin shipping—the book written by me, edited by Mandy, designed by Jason and published by Zeldman.

When I was at South by Southwest back in March, I got very inspired by the Open Science panel moderated by Tantek. You can listen to that panel for yourself:

Round about the 43 minute mark—when Natalie Villalobos is talking about all the fantastic APIs and datasets that are out there—is the moment when I leaned over and whispered to Riccardo:

We should have a Science Hack Day.

Three months later, on the 19th and 20th of June, Science Hack Day happened. I still can’t quite believe it.

The event was a great success, and more importantly, it was a lot of fun. But you can read all about that on the website, on Twitter and elsewhere. What I want to talk about is how Science Hack Day came together.

When I first blogged about the day, right after the Open Science panel at South by Southwest, I wrote:

I have no idea how to get a venue or sponsors.

The Venue

The first thing I did was to set up a wiki to get people brainstorming. Many of the proposed venues were places that had previously hosted BarCamps or other geek gatherings requiring plentiful bandwidth and/or sleepover capability. The Guardian offices came up quite early on. I hadn’t been there myself but I knew that it had been the venue for BarCamp London 6.

I got in touch with Matt McAlister at The Guardian who, in a previous life, helped organise the first ever UK Hack Day. He gave the green light and in no time at all, I was talking to Alex Hazell, Events Executive at The Guardian. Her experience in organising previous events was invaluable in figuring out how to approach potential sponsors.

The Sponsors

Here’s what you need for a hack day:

• physical space for two days,
• bandwidth for a large number of developers,
• food and drink,
• prizes.

The first two were taken care of. The second two require money. The prizes are less of a priority but food and drink is essential hack fuel. That’s where the sponsors come in.

Lunches and breakfasts could be provided by The Guardian catering staff but that requires paying for staffing costs as well as food. All in all, it’s about £2.5K for the number of people expected at Science Hack Day. That still left Saturday evening food. Pizza is the traditional dish of choice. £500 ought to cover it. Throw in another few hundred quid for prizes and that comes to about £3000.

Rather than approaching companies to sponsor the whole amount, Alex recommended that I try asking for around £500 from each company I got in touch with. That’s a good amount of money but it’s small enough that people might be able to approve it without having to go through lots of bureaucratic procedures within their companies.

That turned out to be a good policy and before long, quite a few companies had agreed to sponsor the event. Fortunately for me, The Guardian’s events team were able to bill them individually which meant I didn’t have to deal with that side of things. The Wellcome Trust, Nature, Thoughtworks, LCGOT and Elsevier were all invoiced separately for their contributions to the fund for canteen food and prizes.

The pizza money came from YDN. As Christian was going to be there anyway, it was convenient for him to pay for the pizza with his company card rather than chasing the paper trail of Yahoo’s invoicing system.

In retrospect, I probably could have got the lunches and breakfasts more cheaply by just getting sandwiches and pastries delivered but then I would have either needed sponsors that were capable of paying on the spot or I would have needed to pay for it myself and then reclaim it by invoicing sponsors.

Unrelated to Science Hack Day, my pal Murray from Global Radio got in touch to ask if I would come in to chat to his team about HTML5. I said I’d love to …if Global Radio fancied sponsoring Science Hack Day. I’m devious like that.

Murray got company approval and I left him to organise the booze for the event—£500 worth of booze. I thought that would be just about right. But I was thinking back to previous BarCamps, not hack days. It turns out that while beer is definitely required for lubricating late night games of Werewolf, it’s actually not all that important to hacking.

It seems obvious in hindsight, but what hackers need are stimulants, not depressants. Fortunately, there was plenty of tea and coffee on hand. By the end of the event, there was also a massive surplus of beer.

Ah well, you live and learn.

The final sponsor was BERG. Their contribution wasn’t as large as the others but it had the advantage of being given in cash. That meant I had a petty cash fund throughout the day for repeat trips to the nearest supermarket for crisps, chocolate, and fruit. The latter food group was important because it was one that I had overlooked.

So two valuable lessons learned were:

• Less beer, more juice and caffeine.
• Less junk food, more fruit.

But those are relatively minor points. On the whole, everything went incredibly well.

The Numbers

The total cost was around £4,000 but I reckon it would be possible to organise a two-day event like this for half that much by removing the staffing costs (and the drink costs) if you’re okay with sandwiches for lunch and you don’t mind not having many shiny prizes—we had Lego Mindstorms and telescopes for the winners.

About 120 people signed up on the wiki. Another 20 or so listed themselves as “maybe.” I figured there would be the usual drop-out rate so I was expecting 80 or 90 people to make it on the day. That turned out to be a fairly accurate assessment. By Sunday, the numbers were down to around 75 because of non-returners: people who went home, rather than sleeping over, and then didn’t come back in the next day. A lot of those people couldn’t make it back because of family commitments—Sunday was Father’s Day.

In the run-up to Science Hack Day, I wasn’t sure whether or not to create an EventBrite listing to manage attendance. But the wiki seemed to be working pretty well so I just stuck with that. Instead of emailing people, I used the Science Hack Day website and Twitter account to keep everyone up to date and to get some pre-event excitement going.

The Event

I had a lot of help and support. Jessica helped out for the duration of Science Hack Day—I couldn’t have done it without her. In the weeks and months before the event, Matt Locke made some valuable introductions Natalie Villalobos went above and beyond the call of duty in putting me in touch with potential sponsors. Through her connections, I had the unbelievable honour of playing a specially recorded message at Science Hack Day from SETI’s Jill Tarter—the real-life inspiration for Ellie Arroway in Carl Sagan’s Contact:

I’m still pinching myself about that. In fact, I’m still pinching myself about the whole event. How did I end up organising something like this?

I’m so glad that, straight after being inspired by the Open Science panel at South by Southwest, I blogged my crazy idea to create a Science Hack Day. By planting a flag in the sand like that, it stopped being just another bit of wishful thinking and starting to become real.

If I can do it, anyone can. And anyone should. There’s already a wiki page for other cities where Science Hack Days might be organised. You can help put one of those events together.

Get excited and make things …with science!

So Anand Giridharadas has written a piece about the word so, tracing its ascendency as a sentence-opener to Silicon Valley:

And “so” suggested a kind of thinking that appealed to problem-solving types: conversation as a logical, unidirectional process, proceeding much in the way of software code — if this, then that.

This logical tinge to “so” has followed it out of software. Starting a sentence with “so” uses the whiff of logic to relay authority. Where “well” vacillates, “so” declaims.

It declaims. That’s the reason Seamus Heaney chose it as the translation for the opening word of Beowulf:

Conventional renderings of hwæt, the first word of the poem, tend towards the archaic literary, with ‘lo’, ‘hark’, ‘behold’, ‘attend’ and — more colloquially — ‘listen’ being some of the solutions offered previously. But in Hiberno-English Scullion-speak, the particle ‘so’ came naturally to the rescue, because in that idiom ‘so’ operates as an expression that obliterates all previous discourse and narrative, and at the same time functions as an exclamation calling for immediate attention.

Listen for yourself:

The @media conference has been a constant star in the UK web standards community since 2005. This year, the baton was smoothly passed to those awesome aussies, John and Maxine of Web Directions, creating the hybridly-titled Web Directions @media that took place in London last week.

Before the conference proper, there were two days of workshops in the Hogwartsian location of the superbly-named Goodenough College. I spent a day on Getting semantic with microformats and HTML5. I think it went pretty well. I came to the conclusion that it’s easier to explain everything about microformats than to explain the new outline algorithm in HTML5. Luckily everyone had pocket books on hand. It took quite a while to fold them all but I think they helped.

The conference itself was of the usual high standards, although there was only so much I could see, given its dual-track nature. Everything was recorded though so the podcast will help take the sting out.

For my part, I moderated the now-traditional Hot Topics panel. It wasn’t quite as controversial as recent years but it was a thoroughly enjoyable discussion. My heartfelt thanks to the panelists, John, Hannah, Simon and Christian.

Now I’m back in Brighton but I’ll be heading back up to London on the weekend for Science Hack Day. It’s all set to be an excellent event. All of the requisite pieces are in place: bandwidth, food, drink, prizes, and plenty of smart people in a superb venue. If you haven’t added your name to the list of who’s coming, do it now.

Keep an eye on the website for more details in the run-up to the weekend—subscribe to the RSS feed. You can also follow @sciencehackday on Twitter but then you won’t get all the juicy details about playing with pollution data, documenting fictional APIs and developing synthetic biology.

T minus five days. I’ll see you on the launch pad.

I was in Boston last week for An Event Apart, the second of five instances of the travelling web roadshow touching down in the US this year. As with Seattle, all the talks were of a ludicrously high standard. Tickets are still available for the Minneapolis leg; grab ‘em while you can.

What’s fascinating about seeing all the talks together is finding the unspoken connections between them. Without any prior co-ordination, myself and Aarron had moments of crossover with our talks, Emotional Interface Design and Paranormal Interactivity.

Blenderbox have written a round-up of the themes from An Event Apart. This is the one that really stood out for me:

Your designs should embrace the diversity of browsing experiences offered by different devices.

There was plenty of talk about technologies like media queries and devices like the iPhone and iPad. All of it was galvanised together in Ethan’s superb A List Apart article, Responsive Web Design:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

Here’s my quick three-step guide to ensuring your websites work in just about any device:

1. Mark up your content with a logical source order.
2. Style your markup into a flexible—i.e. liquid—layout.
3. Use media queries to re-arrange the layout for varying viewport widths.

If you want some examples—and feel free to resize your browser window—peruse Huffduffer and Science Hack Day from myself, dConstruct 2010 from Andy and Talking Animal Blug from Patrick (actually, that last one uses JavaScript to get the same result but the principle is the same).

It seems that step two continues to be the sticking point for most web designers. We’ve had over ten years to get this right, yet everything that David Emery wrote in 2006 is truer than ever today:

There are very few legitimate reasons for using a fixed width site, the main one being concerns over the line length on a fluid width site; obviously as the site gets wider, the line length gets longer which is bad for readability. This is can easily be countered by using max-width, larger font sizes and so on but is really quite faulty thinking – if the solution is a fixed width site that’s sized for 1024×768 then if you’re window is any smaller then that then the line isn’t readable at all, which is obviously much worse.

I also think he was spot-on with his explanation for the prevalence of fixed-width layouts:

When you make a web site design (probably in something like Photoshop) it obviously starts off as static — you have no way of testing how it’ll stretch in a browser. You’ve got to picture how that’s going to work, and design accordingly.

Photoshop and Fireworks are great tools …for tweaking photos and creating icons, gradients and textures. When it comes to laying out web pages however, they are worse than substandard. They are actively harmful. They reinforce the incorrect idea that there is a way of representing the browsing experience in anything other than a browser.

What’s ironic is that designers who continue to shackle themselves to Photoshop and Fireworks do so because they claim that designing with HTML and CSS in the browser limits the design possibilities. And yet they are perfectly content to limit themselves to an environment where designs cannot be resized, cannot respond to varying text sizes and typefaces, and cannot convey even the most basic of interactions.

Meagan Fisher has some good advice on making your mockup in markup. And of course, Malarkey has plenty to say on this subject.

It was conferences-a-go-go in London the week before last. As Future of Web Design—which was, by all accounts, excellent—was winding down, UX London was kicking off. Fears of ashcloud disruption to both events remained happily unrealised.

I went along for the first day of UX London. All the speakers were excellent but it was a particular thrill to see the amazing Scott McCloud speak. I had high expectations and they were duly surpassed.

I didn’t attend any of the workshops on the subsequent two days. Instead, Clearleft kidnapped Dave Gray and whisked him off to Brighton. There we spent two days learning sketching-fu from the master.

It was very informative and a lot of fun. Dave is a superb teacher and by the end of the two days, we were all feeling a lot more confident in our abilities to communicate through drawings. I expect there’s going to be lots of future activity on display in the Sketchleft pool on Flickr.