20

I went along to the fifth Barcamp Brighton on the weekend. It was a truly excellent event, hosted in The Skiff, a great coworking space. Alas, a creeping cold meant that I couldn’t stick around for too long, but I made sure to give a presentation before I bailed.

I didn’t prepare any slides. If I had, they would have consisted of screenshots and CSS, so I figured why not just show the actual sites and CSS instead? It was a fairly rambling, chaotic presentation but it helped me to clarify some ideas. Prem asked if I would reprise the presentation at Async—Brighton’s JavaScript meetup—on October 28th so that will give me a chance to marshall my thoughts.

In reiterating my point about fluid grids being a necessary prerequisite for responsive web design, I tried to take a long-zoom approach and went all the way back to John’s superb A Dao of Web Design article—now ten years old!

The tool problem

I still feel that most designers haven’t yet fully embraced the web as its own medium, choosing instead to treat it along the same lines as print design. Or, as Mark put it his excellent talk on designing grid systems, designing from the canvas in rather than the content out.

Far too early in the design process, a tool such as Photoshop or Fireworks gets opened up and a new file is created with an arbitrary width (960 pixels being the current width du jour). That process lends itself well to creating paintings of websites but it’s not a great first step in creating a living, breathing website. Experiments like Liz’s Evening Edition not withstanding, what I wrote back in 2006 still holds true:

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.

My point is that responsive web design isn’t something that can be tacked on to the end of an existing workflow. It requires a different mindset, one that considers the medium from the outset. If you’re currently thinking in proportions rather than pixels, the transition to responsive web design will be relatively painless. But if you’re stuck in the world of converting PSDs into web pages, you’re going to have a tough time.

All of those sites are built in a similar way. First, CSS is used to create the optimal layout e.g. three columns floated alongside one another. Then media queries are used to over-ride those float and width declarations so that the content is linearised.

That’s all well and good but, as someone correctly pointed out during the presentation, what about small-screen devices that don’t support media queries?

That’s an excellent question. The answer requires another shift in perspective. Instead of thinking of the widescreen version as the starting point, why not consider the small screen layout first?

In a way, this is an extension of Luke’s Mobile First exercise — thinking of the mobile experience before building the desktop site.

In his presentation at Over The Air, Bryan Rieger advocated this approach for media queries. As he correctly points out—and this is something echoed by PPK—what we’re talking about here is essentially progressive enhancement.

Instead of just using progressive enhancement to throw in some rounded corners, opacity or gradients, we can apply the same thinking to layout: start with the most basic CSS—colours, fonts, etc.—and then apply floats and widths according to the capabilites of the browser …as determined by media queries.

At this point, you might be wondering if I’m going to mention the elephant in the room. You know: the elephant …from Microsoft …elephant versions 8 and lower.

My first thought was to use conditional comments. All browsers get the same stylesheet but elephantine browsers get an extra one which contains the same float and width declarations that are contained in the media queries. But that violates the DRY principle: any time I make a layout change, I would have to remember to make the changes in two different stylesheets. Prem suggested placing an @import rule within the media query to pull in the same stylesheet that IE is getting via conditional comments …but alas, @import rules need to come first in a CSS document.

So, for now, users of Internet Explorer visiting adactio.com will just get the linearised content. I may decide to violate the DRY principle and use conditional comments at a later date.

Revisiting adactio.com

Over the years, I’ve resisted the temptation to do a complete redesign of my site. Instead, I’ve added different designs as options that can be selected from any page on the site. After all, isn’t the whole point of CSS that it’s separated from the structure? Changing the visual appearance shouldn’t necessitate changing the markup; that’s the lesson of the CSS Zen Garden.

So I’ve stubbornly refused to update my markup for almost ten years. But now, what with having written a book on HTML5 and all, I figured I could make a few changes.

The doctype has been updated. Elements that had previously been given IDs are now identified with ARIA landmark roles instead (and referenced in the CSS with attribute selectors). These days, I rarely use IDs for anything other than making document fragments addressable, so it was interesting to see how my past self did things differently.

My past self was also trying to be far too clever with the separation of concerns in the CSS. I was using three different stylesheets for each theme: one for colour, one for typography, and one for layout. In retrospect, this was a bad idea for two reasons:

I’m increasing the number of HTTP requests.

While it might be obvious that font-family declarations belong in the typography stylesheet and background-color declarations belong in the colour stylesheet, it’s not nearly so simple to figure out where margins and paddings should go. Is that layout? Is it typography?

It turns out that a more holistic approach to CSS is far, far easier to work with. It felt good to finally merge those separate CSS files into one.

Oh, there was one more good point raised at the Barcamp Brighton presentation… I had being going on about how assumptions can be dangerous—assuming that the user is visiting your site from a desktop machine, assuming that a large monitor size equates to a large viewport size, assuming that a large browser window means that large bandwidth is available, and so on. Somebody pointed out that, in applying my media queries using pixels, I was making assumptions about equating pixel width to viewable area. An excellent point! For that reason, all the media queries used in the different themes on adactio.com are triggered with ems rather than pixels.

For the record, here are some useful em widths that can be used as trigger points:

I’ll be fanning the flames once again for the Hot Topics panel. I’ll also be running a workshop on getting Semantic with microformats and HTML5. I love the fact that there are two workshops on HTML5 and yet there’s absolutely no overlap between the two—I’ll leave you to decide whether that’s a testament to the breadth of the HTML5 spec or an indication of just how much is encompassed by the word ‘HTML5’.

The price for the conference goes up on May 15th so you’d better get in there and grab a ticket now if you haven’t already. And just between you and me, if you use the promo code KEITH then you can get a whole hundred squid off the asking price.

If you’re already in London for @media Web Directions, consider sticking around that weekend for the BarCamp. Nothing has been announced other than the dates but watch this space.

Needless to say, I’ll be updating both here and on the wiki as the event comes together. And it is coming together very nicely: we have a great venue, we have plenty of bandwidth, and we have lots of interested geeks, hackers and programmers. The only thing I need to make sure I can get covered is the hackfuel: food and drink.

The total cost for food and drink will probably be somewhere between £2,000 and £3,000 but I’m hoping to spread that cost amongst a bunch of sponsors. I think £500 should be a nice sweet spot for sponsorship.

If you work for someone—or know of someone—that wants to support a fine event such as Science Hack Day and would consider £500 a small price to pay for the resulting whuffie, please get in touch and let me know.

As is now traditional, there will be a BarCamp in Brightonstraight after dConstruct. This year it’s happening at a new venue, the Old Music Library in the middle of town—right across from the Brighton Dome, venue for dConstruct. The first batch of tickets went on sale yesterday but there’ll be more to come (if you don’t fancy playing web booking roulette, a sure-fire way of getting a ticket is to contribute to sponsoring the event).

If you’re coming to Brighton for dConstruct, I highly recommend staying for the weekend and sleeping over at BarCamp.

If you’re not coming to Brighton for dConstruct, why not? Haven’t you seen the line-up? It’s going to be fantastic.

Take a look around you. What do you see that you would like to preserve for the future? Take a picture of it, upload that picture to Flickr and tag it with dconstructcapsule.

The ticket you could win is no ordinary ticket. It’s a VIP ticket that will get you into dConstruct itself, two nights in a luxury hotel in the centre of Brighton, and a place at the speakers’ dinner the evening before the conference.

Even without the competition aspect, I think this is a pretty nifty project. People have already posted some great items:

This used to be cool. I think it still is.

The infamous red ring of death. A symbol of recreation in the naughties and a beacon of utter despair.

…though my oboe is a product of centuries of instrument making techniques and technology rather than something new, it’s certainly something (along with the skills that made it) that I believe needs preserving for the future as an example of beautiful design and craft.

Clever future-people! Please clone this fruit—it’s a design classic (iconic styling, great usability), it’s nutritious, and it’s tastier than the bland efficiency-gruel you slurp down the rest of the space-week.

I didn’t manage to make it to the event for the kick-off, having spent the previous evening celebrating at the after-party and after-after-party that my talk was really over and done with. That meant that I missed some of the early speaking slots but I still managed to see some great talks (including Nat’s excellent IE6 bug-squashing quiz) and spend a pleasant evening playing CSS Specificity Snap and Semantopoly.

Despite the fact that the venue boasted eight separate locales for giving talks, speaking slots were at a premium, which is a testament to the enthusiasm of the attendees. I managed to grab a spot towards the end of the day two. My presentation was very hastily prepared—in fact, I was preparing it while giving continuous partial attention to Rebecca and Jessica’s excellent presentations.

While I had to travel quite for to attend the geek Summer camp that is South by Southwest, the next geek event I went to was a lot closer to home. BarCamp Brighton 2 was the perfect way to come down after SXSW without going cold turkey on passionate geekery.

My hat is off to everyone who helped put the event together and to the University of Sussex for agreeing to host such an unusual gathering. This was the fifth Barcamp I’ve attended and, as usual, it was simply fantastic. There were some excellent talks ranging from primatology to data visualisation. I did my bit by contributing to a panel discussion on portable social networks with Aral, Tom, Colin, Christian and Aleks, who covered the implications of social network portability for virtual worlds.

There was also plenty of hands-on hacking to be done thanks to a heavy arduino presence. I sat in on one session, managed to get an LED to blink and I was hooked. I now have my own little arduino kit, a bread board and a lucky bag of LEDs. Alas, know next to nothing about basic electronics so I’m really going to have to brush up on this stuff. It will certainly be a long time before I’ll be performing the kind of arduino/wiimote hacking that Nigel Crawley was doing.

There was more arduino/wiimote hacking to be seen at the Flash Brighton meetup a few days later. We were treated to a behind-the-scenes look at the exhibit by Rachel Beth Egenhoefer that’s currently running in the Lighthouse gallery in Brighton—in the same building that houses the ClearleftHQ. The show runs until April 5th. Be sure to check it out if you want to see the knitting equivalent of Guitar Hero.

We’re down to the last couple of talks at BarCamp London 3. I’m feeling remarkably awake considering how late I was playing Werewolf—it must be the presentations that are keeping me on my toes.

After a fun geek quiz in the style of QI, I participated in mass critique of the forthcoming BBC homepage redesign. The good news: all the functionality provided by JavaScript is still available using traditional full page refreshes. The bad news: it’s still fixed width—the number of pixels is different but the design decision is the same. It was very, very brave to show a redesign to this tough crowd but the ensuing discussion was enjoyable and thought-provoking.

Right now, Ian is giving a talk on data portability and that’s provoking even more discussion and debate.

It’s been fun but it’s time for me to make the long journey back to Brighton. I’ve had a great time. It was, like all the other BarCamps I’ve attended, very inspiring. Many thanks to BBC Backstage and to all the Google people who opened up their workplace to us and shared their facilities as well as their delicious and plentiful food.

When the talks wrapped up on the first day of BarCamp London 3, the evening events began. Our hosts, Google, sure know how to grease the gears of geek socialising; we were served a wide variety of good beer and wine, we were fed a thanksgiving turkey dinner, we were happy, happy geeks.

It wasn’t long before the happiness was replaced with fear, suspicion and paranoia. Yes, I mean Werewolf. I played in two games and moderated another two. Werewolf moderation brings out the asshole in me, but it usually makes for a good game experience.

The mauling was interrupted at midnight to enjoy extra treats from Google: waffles, crépes and a chocolate fountain. I thought the food at BarCamp Brighton couldn’t be topped but BarCamp London 3 has really raised the bar. This morning, after a good night’s sleep (I was glad I brought an inflatable mattress), breakfast included omelettes cooked to order and freshly squeezed orange juice.

As well as the culinary goodness, there are plenty of toys to keep us amused: guitar hero, Wii and a Segway. With our entertainment needs satisfied, we know return to the matrix of presentations with renewed vigour.

BarCamp London 3 is in full swing. I’ve put together a schedule of the talks. It’s marked up in hCalendar so everyone here can subscribe to it, stick it on their laptops, phones, iPods, or whatever, and then get updates as and when I edit the HTML.

The Google offices have been taken over for a grab-bag of great presentations. I sat in on Norm!’s Law, an introduction to storytelling, an overview of OpenSocial from a very jetlagged David Recorden and a treatise on website psychology from Gavin Bell. Then it was my turn.

I enjoyed talking about The Transmission of Tradition. I didn’t use many slides and they were just reminders for myself. I mostly just nattered on and punctuated my tale with the occasional tune or two. I really enjoyed it and the people who were gracious enough to listen to me seemed to enjoy it too.

And now I should get back to listening to and participating in the other talks. I ought to be heckling Norm! right now.

No sooner am I back from one London geekfest than I find myself getting ready to head back up for another. BarCamp London 3 is about to kick off, hosted by Google this time. If it’s even remotely as good as the previous two London BarCamps, it’s going to be great.

A BarCamp offers a nice opportunity to for me to break out of my usual subject matter. Instead of talking about Ajax, web standards, or microformats, I’m planning to take some of the material from my talk at the local £5 App event and condense it down into a study of how technology has altered the transmission of Irish traditional music. I’m hoping that this could be a good starting point for a discussion of ideas such as the public domain, copyright and the emergence of a reputation economy. Failing that, I’ll probably bring my bouzouki with me so I could just play some tunes.

Mostly I’m excited to see what other people have got in store. I’m constantly amazed by the quality of presentations I’ve seen at BarCamps. I feel kind of guilty that this will be my third London BarCamp—after all, it shouldn’t be the same faces every time—but, oh, I do love them so! I can always earn my keep by moderating a game of Werewolf or ten.

It’s been quite a few days here in Brighton. dConstruct passed by in something of a haze. I was so busy running around trying to make sure everything went smoothly that I didn’t pay all that much attention to the presentations. I should have just relaxed and enjoyed myself; everything went fine. But of course, anything could have gone wrong at any moment and that’s what kept me wound up.

I didn’t have a speaking slot this year so I had nothing to worry about. But I did introduce some of the speakers and I found that almost as stressful. I’ve come to the realisation that the amount of speaking time doesn’t matter that much; it’s the situation of standing on stage in front of an audience of peers that’s scary.

Of all the stages to stand upon, the Brighton Dome has got to be one of the best. It really is quite an amazing venue.

The day went off with nary a hitch and most people seemed to enjoy themselves. Some of the presentations divided opinion. The same talks that underwhelmed some people had others enraptured. I kind of like that. We tried to put together a mixed bag and I’d rather that a talk was loved or hated rather than being judged just average.

As I said, I didn’t have much chance to pay attention to the presentations though I made a point of catching Denise and George chatting on the sofa. I loved it. It was the perfect format for the middle of the day and the content was fascinating. I can understand if it wasn’t everyone’s bag (if your big company has sent you to a conference with an order to “go learn stuff” then you’d be sorely disappointed) but I thought it was wonderfully relaxed and entertaining. Or maybe I just enjoyed the F-bombs and C-grenades.

Once the conference was done (and the after party… and the after-after party) it was time for BarCamp Brighton. I got a little sidetracked by the Brighton Food and Drink Festival on the way but when I showed up I found the BarCamp spirit in full swing.

The venue was great, the food was superb and the presentations were fantastic. The plan was to just have ethernet internet access but Dave worked some of his Pier to Pier magic to provide rock-solid WiFi.
In short, the whole thing was wonderful. Matthew talked about Cornish politics, John told us how to make the perfect cup of tea, Mikel showed off the OpenStreetMap data for Brighton, Paul taught a magic trick and I talked with Tantek about portable social networks.

I missed the talk by Jon Linklater-Johnson but I caught with him afterwards to see his CSS specificity cards. He made a memory game out of matching the specificity of selectors. How cool is that?

Hats off to Glenn and the whole Madgex for a job well done. I was feeling pretty exhausted after dConstruct but BarCamp completely revitalised me. And yes, there was Werewolf a-plenty (I’ll never believe Natalie again).

With the out-of-towners coming to dConstruct and BarCamp, I wanted to make sure that everyone enjoyed their time in Brighton. I think everyone did. The weather was great, there was lots to do and there was a great buzz in the air.

I’m lucky enough to get to travel to quite a few geek gatherings in far-flung places. I really enjoy that. But for the past few days, Brighton has been the epicentre of geekdom. Welcoming my peers to my adopted hometown is a particular thrill. Brighton—if you’ll forgive the cliché—rocks.

I’m feeling a very strange mixture of excitement and apprehension this week.

As the days count down to dConstruct 2007 on Friday, I’m feeling like a little kid at Christmas time. I’ve been looking forward to this all year. Now, as my friends from distant shores begin to wend their way towards Brighton, I’m fit to burst with anticipation.

At the same time, I’ve been frantically preparing for the microformats workshop I’m doing with Tantektwo days before the conference. We’re planning to have a very hands-on practical day, light on slides but heavy on exercises. It makes a nice change from the DOM Scripting and Ajax workshops I normally do. They have a minimum level of complexity that doesn’t lend itself to hands-on exercises. The nice thing about a deliberately simple technology like microformats is that someone could potentially begin the day knowing nothing about microformats and end the day markup up hCards and hCalendars to beat the band.

I think the workshop will be good but the demons of doubt always descend at this point. I’m going to try to harness their insidious whispers to keep working on my material instead of letting them paralyze me into inaction.

Still, I’ll be glad when the workshop is done. Then I can really let my hair down and enjoy the conference… as well as all the other events going on in Brighton this week:

After many hours of Werewolf and a bit of late-night semantic geekery, I grabbed an hour or two of fitful sleep in the BT Centre in London.

This morning the BarCamp shenanigans kicked off with Simon doing some cheerleading for OpenID. I don’t think many people needed convincing; there’s a real momentum behind OpenID right now and it shows no sign of slowing.

Simon’s talk was followed by a session on Embeddable RDF and microformats. I was roped into fighting the microformats corner along with Brian. Much mutual good-natured ribbing ensued.

Round two of the match was fought after lunch. I moderated a microformats panel discussion with Brian Suda, Ben Ward and Chris Messina. We spread the good word on microformats and threw in a few demos for ilustrative purposes. It was fun.

Before long, it was all over except for the clean-up. Many geeks make light work, it seems.

All in all, it’s been a great BarCamp. I’ve had a wonderful time meeting a heck of a lot of really smart and talented developers. I managed to make it back down to Brighton which is where I am now recuperating.

Gavin Bell gave a great presentation called History, Time and the Internet. He packed in a ton of ideas and I’d love to follow some of them up some time. Marvelous stuff!

Jim Purbrick from Linden Lab gave a good in-depth look at some of the neat things you can do in Second Life with a bit of code. There’s definitely some cool stuff to be done using Web Services to tie items in Second Life to things in the real world.

Oh, and Jim announced the official location of the next Linden Lab office: Brighton.

Tom compressed his talk from The Future of Web Apps in San Francisco into a whirlwind of ideas around social software.

I left Tom’s talk to hear Aral talk about how he’s hacked together some extensions to the API for Twitter. Of course I twittered that I was going to the presentation and that notification appeared on-screen so it was all very meta.

There was a whole bunch of other good stuff including a well-prepared presentation from Andy. But eventually the talks had to stop and the pizza and beer had to begin.

Right now the BT Centre has become Werewolf Central. There are two or three concurrent games running at any one time. It’s three in the morning now and the games show no sign of stopping.

Ian opened up proceedings this morning and everyone introduced themselves. There’s quite a diverse and surprisingly international crowd of geeks here.

The presentation line-up seems to have self-organised nicely. If all goes to plan, I’ll be doing two talks today. I haven’t prepared much. Well, to be honest, I haven’t prepared anything but that won’t stop me blabbing on and on (it’s never stopped me before).

The talks are about to get started so I’d better go and decide what I want to check out. I’m looking forward to a good day of geekery followed by a long night of Werewolf.

Oh, microformateers: we’ve scheduled a panel for 17:10 local time (update: rescheduled to tommorrow at 13:30 so that Chris can make it) so pop into the IRC channel if you want to participate remotely.

BarCamp London is over. I had a really good time, for which I would like to thank Ian, Ben, and Murray ‘Gizzajob’ Rowan. I’m excited and energised by the stuff I saw over the weekend.

Niqui led a great discussion on Flash and accessibility… not an oxymoron. This discussion will continue long after BarCamp, I’m sure. Both Aral and Niqui are doing great work from within the Flash community and it’s important that the accessibility community can reach out to liaise with them.

I never did get ‘round to doing any more podcasting on the Sunday. I was too busy enjoying the presentations and talking to the other attendees. In the course of talking to people, I found some new APIs and saw some great mashups. By far the most fun mashup of the weekend was a hybrid of Pecha Kucha and del.icio.us.

Pecha Kucha is a presentation format that forces presenters to show twenty slides with twenty seconds per slide. Each presentation is exactly six minutes and forty seconds long. I first saw it in action at Reboot 8.

There was a Pecha Kucha session on the first day of BarCamp. On the second day, there was a session of Del.icio.us Pecha Kucha. This involved taking the last twenty links from someone’s del.icio.us account and displaying each one on the screen for twenty seconds while the account owner frantically tries to explain why they bookmarked it. Oh, and you’re not allowed to peruse back through your links beforehand.

I couldn’t resist so I just had to bear my online soul to the room. It was loads of fun. Watching other people run their links was equally fun. This was by far the most enjoyable Pecha Kucha experience I’ve had yet.

Still, my overriding memory of BarCamp will probably be of mob justice lynchings and murder in the night. Simon returned from FooCamp wildly excited about a social (or possibly anti-social) game called Werewolf. I won’t go into all the rules here but suffice to say it involves paranoia, psychology, lying, and treachery. What a great way to get to know people. We played from nine in the evening to five in the morning. So much for having a mini mashpit.

The excellence at BarCamp London continues. For a self-organised unconference, there’s some great planning in the schedule. I attended three microformats presentations back to back.

Frances Berriman got things started with a succinct introduction and explanation, followed by some discussion. I feel bad because I think I hogged the conversation… I tend to get very excited about microformats.

Glenn was up next with the practical examples. He showed and explained the d.Construct backnetwork. Then he followed that up with his experiences of using microformats. It was fascinating, and once again, the discussion afterwards was great.

By the time Drew was up, the level of complexity had been gradually increased. He talked about parsing microformats and did an excellent job of explaining some fairly technical stuff.

It was very inspiring. But then, I’m biased: microformats remind me why I fell in love with the Web in the first place.

The second day of BarCamp London is going great — I’m amazed a the energy and enthusiasm after a night of very little sleep for everyone. The lack of sleep can be attributed to Simon and his damn Werewolf game.

I’ve just seen the most wonderful presentation from the excellent Matthew Somerville. He works on They Work For You… and I just found out that he’s the guy who did the renegade accessible Odeon site!

He’s built a fantastic mashup of maps and train times. Maybe I shouldn’t be drawing attention to it because he’s getting the data by screen-scraping — because there is no National Rail API — but damn, this is sweet! You can find out when they’re due to arrive at a station. You can see the trains moving along the map. Click the checkbox to speed up the movement by ten.

See how Brighton is in the drop-down list of stations? Matthew added that in the middle of the presentation in response to my request. After all, I need to get back down to Brighton later today.