Tags: 2012

56

sparkline

Wednesday, February 15th, 2017

Porto at night.

Porto at night.

Wednesday, August 5th, 2015

If only all my mail were addressed with such beautiful lettering…

If only all my mail were addressed with such beautiful lettering…

Tuesday, March 17th, 2015

Filling up the whiteboard.

Filling up the whiteboard.

Monday, January 5th, 2015

Smoked mackerel udon.

Smoked mackerel udon.

Saturday, July 5th, 2014

If you can see this, my code is working.

If you can see this, my code is working.

Thursday, August 8th, 2013

The dConstruct 2012 website

I got an email recently from the guys at Cyber Duck asking me about the process behind the dConstruct 2012 website, beautifully designed by Bevan. Ethan actually used it as an example in his An Event Apart talk earlier this week. Anyway, here’s what I wrote…

The dConstruct conference takes place on the first Friday of September every year, and every year the conference has a different theme. That theme then influences the visual design of the site. To start with, we throw up a quick holding page and then, once we’ve got our speakers all set, we launch the site proper, usually a month or so before tickets go on sale.

At Clearleft, we believe very strongly in the universality of the web. We wanted the information on the 2012 dConstruct website to be available to anybody with an internet connection, no matter what kind of device or browser they’re using. That does not mean that the site should look and behave exactly the same in every browser or on every device. That isn’t practical. Nor is it desirable, in my opinion. Better browsers should be rewarded with a better experience. But every browser should be able to access the content. The best way to achieve that balance is through progressive enhancement. Responsive web design—when it’s done mobile first—is an excellent example of progressive enhancement in action.

The theme for dConstruct 2012 was “Playing With The Future”. It would be easy to go overboard with a visual design based on that theme, so we made sure to reign things in a bit and keep it fairly subtle. The colour scheme evolved from previous years, going in a more pastel direction. The use of Futura for headline text was the biggest change.

Those colours (muted green, red, and blue) carried through to the imagery. In the case of a conference website, the imagery is primarily photographs of speakers. That usually means JPEGs and sometimes those JPEGs can get pretty weighty. In this case, the monochrome nature of the images meant that we could use PNGs. Not only that, but through a little experimentation, we were able to get away with sometimes using as few as 16 colours for the PNG. That meant the file sizes could be nice and small. The average speaker photo was around 12K in weight.

Each speaker photo is 200x200 pixels in size. Now, you might think that we’d want to make those bigger as we moved up from small screen sizes to larger, desktop sizes. But actually, because the layout changes to put more of the photos side-by-side as the viewport gets larger, there was no need to do any clever responsive image-swapping. Instead, we spent that time getting the images as small in file size as we possibly could. The ImageOptim app for Mac is very handy for helping with this.

There are also some background images (for social media icons, background textures, and the like). These were all Base 64-encoded into the stylesheet to avoid extra HTTP requests.

The priority was very much on keeping things speedy. When talking about responsive design, there’s a lot of emphasis on layout but actually that was a relatively straightforward part of the 2012 dConstruct site: there’s nothing too complicated going on there. Instead, the focus was on performance balanced with a striking visual design.

On the individual speaker pages, there’s a bit of conditional loading going on. For example, most pages include a link to a video on YouTube or Vimeo. On larger screen sizes, there’s a bit of JavaScript to pull in that video and display it right on the page. Crucially, this JavaScript runs after the rest of the document has already loaded so it won’t block the rendering. The end result is that everyone has access to the video: on smaller screens, it’s available by following a link; on larger screens, it’s available in situ.

JavaScript is only ever used to enhance, never as a requirement for core functionality. The navigation, for example, has a nice toggle-to-reveal behaviour on small screens if JavaScript is available. But if JavaScript isn’t available or doesn’t load for some reason, then the navigation is simply visible by default. It’s important to consider safe defaults before adding behavioural enhancements.

In retrospect, it probably would’ve made more sense to simply inline the JavaScript at the bottom of each page: the external file isn’t very big at all, and that extra HTTP request could’ve been saved.

There were some other things that could’ve been done better: some of the images might have been better as SVG (the logo, for example). But all those lessons were carried forward and so the site for dConstruct 2013 is even snappier and more performant.

Monday, January 7th, 2013

New year, old year

2013 is one week old. This time of transition from one calendar year to another is the traditional time to cast an eye back over the year that has just come to a close. Who am I to stand in the way of tradition?

2012 was quite a jolly year for me. Nothing particularly earth-shattering happened, and that’s just fine with me. I made some websites. I did some travelling. It was grand.

I really enjoyed working on Matter by day and hacking away at relaunching The Session by night.

The trip to New Zealand at the start of 2012 was great. Not only was Webstock a great conference (and I’m very happy with the talk I gave, Of Time And The Network), but the subsequent road trip with Jessica, Ethan, Liz, Erin and Peter was a joyous affair.

Thinking about it, I went to lovely new places in 2012 like Newfoundland and Oslo as well as revisiting New York, Austin, Chicago, and Freiburg. And I went to CERN, which was a great experience.

But the highlight of my year was undoubtedly the first week of September right here in Brighton. The combination of Brighton SF followed by dConstruct was simply amazing. I feel very privileged to have been involved in both events. I’m still pinching myself.

Now it’s 2013, and I’m already starting to plan this year’s dConstruct: be sure to put Friday, September 6th, 2013 in your calendar. Before that, I’ve got the Responsive Day Out—more on that soon. I’ve got some speaking engagements lined up, mostly in the States in the latter half of the year at An Event Apart. Interestingly, apart from compering dConstruct and BrightonSF, I didn’t speak at all in the UK in 2012—the last talk I gave in the UK was All Our Yesterdays at Build 2011.

I’m going to continue hacking away on Huffduffer and The Session whenever I can in 2013. I find those personal projects immensely rewarding. I’m also hoping to have time to do some more writing.

Let’s see what this year brings.

Monday, December 17th, 2012

Andy Hume: CSS for Grownups, SXSW 2012 - YouTube

The slides and audio from Andy’s exceptional talk earlier this year at Southby, combined into one video.

It really is excellent, although he does make the mistake of pulling the “dogma” card on those who woud disagree with him, and he really doesn’t need to: his argument is strong enough to stand on its own.

Friday, October 26th, 2012

NodeCopter Brighton

Let’s spend the day after Full Frontal programming flying robots with JavaScript. Clearleft is sponsoring a drone; want to play with it?

Tuesday, October 2nd, 2012

The Charge of the Scan Brigade « ASCII by Jason Scott

Live in or near San Francisco? Interested in preserving computer history? Then you should meet up with Jason this Friday:

This Friday, October 5th, the Internet Archive has an open lunch where there’s tours of the place, including the scanning room, and people get up and talk about what they’re up to. The Internet Archive is at 300 Funston Street. I’m here all week and into next.

Wednesday, September 26th, 2012

Brian Eno & Peter Chilvers at The Apple Store, Regent Street

Well, this is quite something. Matt will be interviewing the creators of Bloom in London this Friday. You might have heard of that Eno chap.

Sunday, September 23rd, 2012

Rounding up dConstruct 2012

It’s been two weeks since the mind-blowing awesomeness of dConstruct 2012 and I’ve still got a brain full of the amazing knowledge bombs dropped by each and every speaker.

I’ve been keeping track of other people’s write-ups of the event too:

Hypernaked published a report.

Andrew Johns wrote down his thoughts, going through each talk in turn. He also wrote a follow-up post pointing out that one of the emergent themes of the conference was education.

Sjors Timmer wrote a review that cites Italo Calvino.

Happy Famous Artists pulled out three strands from the event:

  1. Digital is about beauty and about layers.
  2. The power of play.
  3. The interconnectedness of things through chance.

There’s a write-up over at info.nl called Playing with the future at the seams.

But I think my favourite write-up comes from Laura who did a report for Ubelly called Our Positions Of Power. It’s a thoughtful piece that pulls together multiple strands that emerged throughout the day. And you’ve gotta love the opening sentence:

After a weekend of reflection, I’ve decided that dConstruct 2012 had the best talks of any conference I’ve ever attended.

Some people took some great pictures at dConstruct. I like this set on Flickr.

Opening remarks Lethal glowsticks James Burke elicudates Still pondering what James said

Eva-Lotta drew some fantastic sketchnotes (as usual).

Seb Lee-Delisle: Pixels, Play, People & Lauren Beukes: Imagined Futures & Jason Scott: The Save Button Ruined Everything & Tom Armitage: Making Friends @ d.construct 2012 Tom Armitage: Making Friends & James Burke: Admiral Shovel and the Toilet Roll @ d.construct 2012

And Geri took a bunch of really nice pictures.

Seb Lee-Delisle Lauren Beukes Jeremy Keith

People said some very nice things on Twitter, Paul Swain wrote a very nice “thank you” post, and I even got a lovely postcard from an attendee.

Reading a lovely postcard from a @dConstruct attendee

If you want to re-live the magic, have a listen to the audio from dConstruct 2012.

Saturday, September 22nd, 2012

Thursday, September 20th, 2012

Playing with the future at the seams | Labs.info.nl

Yet another write-up of this year’s dConstruct.

dConstruct 2012 - a set on Flickr

A really great set of photos from this year’s dConstruct by Geri. Just look at the smile on my face!

Jeremy Keith

dConstruct 2012 | Happy Famous Artists

A nice write-up of dConstruct that focuses on three ideas that were threaded throughout the day:

  1. Digital is about beauty and about layers,
  2. The power of play, and
  3. The interconnectedness of things through chance.

Tuesday, September 11th, 2012

dConstruct 2012: the alternative theme was Education - andrewjohns.net

I like this! Andrew Johns found a thread in this year’s dConstruct that ran parallel to its official tagline of “Playing With The Future”: Education.

dConstruct 2012: A quick review - andrewjohns.net

Another really good description of this year’s dConstruct that describes each talk.

Playing With The Future – dConstruct 2012 | HYPERNAKED

A lovely write-up of this year’s dConstruct:

Curated well by the Clearleft team, its speakers are always intelligent, insightful, and on the whole, world-class. Pouring out insights through divergent thought, challenging norms and touting innovation.

Improving Reality 2012 : Joanne Mcneil

Note’s from Joanne’s presentation at Improving Reality.