Tags: barcamp

33

sparkline

Tuesday, October 3rd, 2023

BarCamp London XII

BarCamp London is back this year, the day after ffconf.

Tuesday, October 5th, 2010

Responsive enhancement

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 spoke about media queries. As you may have gathered from my recent entries, this is something I’ve been thinking about a lot lately.

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 AsyncBrighton’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.

I’ve written about the problems with our tools before and Stan has crafted the definitive call to arms for A Real Web Design Application so I’ll spare you another rant.

A new approach

At Barcamp Brighton, I encapsulated my thinking by saying:

Instead of thinking in terms of pixel perfection, we should be thinking of proportion perfection.

Then I showed a bunch of sites I’ve worked on that are using media queries to adapt to different screen sizes: Huffduffer, Salter Cane, St. Paul’s School and UX London.

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.

That’s what I did for the Science Hack Day website and now I’ve decided to take the same approach with adactio.com.

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:

  1. I’m increasing the number of HTTP requests.
  2. 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:

  • 40em =~ 640px
  • 50em =~ 800px
  • 64em =~ 1024px

Default

Adactio — default (1440) Adactio — default (1024) Adactio — default (800) Adactio — default (640) Adactio — default (480)

Tate Modern

Adactio — tatemodern (1440) Adactio — tatemodern (1024) Adactio — tatemodern (800) Adactio — tatemodern (640) Adactio — tatemodern (480)

Seaside

Adactio — seaside (1440) Adactio — seaside (1024) Adactio — seaside (800) Adactio — seaside (640) Adactio — seaside (480)

Zeldman

Adactio — zeldman (1440) Adactio — zeldman (1024) Adactio — zeldman (800) Adactio — zeldman (640) Adactio — zeldman (480)

Adactizilla

Adactio — adactizilla (1440) Adactio — adactizilla (1024) Adactio — adactizilla (800) Adactio — adactizilla (640) Adactio — adactizilla (480)

Sci-fi

Adactio — sci-fi (1440) Adactio — sci-fi (1024) Adactio — sci-fi (800) Adactio — sci-fi (640) Adactio — sci-fi (480)

Renaissance

Adactio — renaissance (1440) Adactio — renaissance (1024) Adactio — renaissance (800) Adactio — renaissance (640) Adactio — renaissance (480)

Hirnlego

Adactio — hirnlego (1440) Adactio — hirnlego (1024) Adactio — hirnlego (800) Adactio — hirnlego (640) Adactio — hirnlego (480)

Wednesday, April 28th, 2010

June

by Camper Van Beethoven—one of my all-time favourite albums—features the song June wherein David Lowery asks:

Are you weary of the lengthening days?
Do you secretly wish for November’s rain?

Not in the least, David, not in the least. In fact, I’m really looking forward to June, both for its lengthening days and its avalanche of geeky goodness. To whit:

Web Directions @media comes to London from June 8th to 11th. It is pretty much guaranteed to be awesome.

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 .

A week later, on June 19th, is when the geekery really hits the fan: Science Hack Day at The Guardian offices in London! If you haven’t already done so, add your name to the list of potential attendees. Trust me: you won’t want to miss this.

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 , please get in touch and let me know.

Saturday, August 8th, 2009

dCapsule

As is now traditional, there will be a BarCamp in Brighton straight 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.

Here’s one way to get a ticket; add something to the dConstruct time capsule:

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:

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

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

Howarth S2 oboe
…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.

time capsule banana
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.

Now it’s your turn. What would you add to the dConstruct time capsule.

Monday, September 29th, 2008

CSS Systems for writing maintainable CSS | Natalie Downe

It looks like Natalie's presentation at BarCamp London 5 was excellent.

Thursday, September 11th, 2008

Beauty at BarCamp Brighton

As soon as dConstruct was over, it was time for the next wonderful gathering of geeks: BarCamp Brighton 3.

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.

I gave a short talk called The Most Beautiful Woman in the World, an appellation once applied to Hedy Lamarr. I figured that my fellow geeks would enjoy the story of her oft-overlooked contribution to technology.

Sunday, April 20th, 2008

GameCamp | Technology | guardian.co.uk

Aleks and Bobbie are putting on GameCamp in London on May 2nd. Should be fun.

Monday, March 24th, 2008

Hardware

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 Clearleft HQ. The show runs until April 5th. Be sure to check it out if you want to see the knitting equivalent of Guitar Hero.

Sunday, March 16th, 2008

thecourtsofchaos » Blog Archive » BarCampLondon2 - Visualisation Presentation

A recap of an excellent presentation at BarCamp Brighton 2 on data visualisation.

Licence to Roam » BarcampBrighton - Portable Information

Liveblogged notes from a discussion I participated in at BarCamp Brighton 2 about Social Network Portability.

Sunday, November 25th, 2007

BarCamp ends

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.

BarCamp continues

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.

Saturday, November 24th, 2007

BarCamp begins

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.

Return to London town

No sooner am I back from one London geekfest than I find myself getting ready to head back up for another. 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.

Monday, October 8th, 2007

Friday, September 14th, 2007

Making The "Perfect" Cup of Tea » SlideShare

John Sutherland's excellent presentation from BarCamp Brighton.

Monday, September 10th, 2007

Morethanseven » Brighton Rock(s)

The slides from Gareth Rushgrove's presentation at BarCamp Brighton. It's all about Restful Rabbits.

Barcamp Brighton talk - Dracos.co.uk

The slides from Matthew Somerville's excellent BarCamp Brighton presentation: Is Cornwall part of England?

Sunday, September 9th, 2007

Brighton daze

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.

Cameron was as smooth, dependable and awesome as always. Tom excelled himself. Heck, all the speakers were on top form. Matt is giving himself a hard time but just check out his presentation: it’s a beautiful study in apophenia.

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.

Tuesday, September 4th, 2007

dConstructivism

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 Tantek two 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:

In the midst of all this merriment, conference attendees can also indulge in the dConstruct Photo Scavenger Hunt which starts on the 5th and ends on the 9th. To participate, take suitable pictures around Brighton and tag them with , , , , , , , and .

I don’t know what that last one’s all about.

If you’re coming to dConstruct, I’ll see you soon and together we can let the good times roll. As soon as I’ve done this workshop.