Wednesday, February 15th, 2017
Wednesday, August 5th, 2015
Tuesday, March 17th, 2015
Monday, January 5th, 2015
Saturday, July 5th, 2014
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.
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.
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.
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.
Let’s see what this year brings.
Monday, December 17th, 2012
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
Tuesday, October 2nd, 2012
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
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:
Sjors Timmer wrote a review that cites Italo Calvino.
- Digital is about beauty and about layers.
- The power of play.
- 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.
If you want to re-live the magic, have a listen to the audio from dConstruct 2012.
Saturday, September 22nd, 2012
Aw, this is so nice!
Thursday, September 20th, 2012
Yet another write-up of this year’s dConstruct.
A really great set of photos from this year’s dConstruct by Geri. Just look at the smile on my face!
A nice write-up of dConstruct that focuses on three ideas that were threaded throughout the day:
- Digital is about beauty and about layers,
- The power of play, and
- The interconnectedness of things through chance.
Tuesday, September 11th, 2012
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.
Another really good description of this year’s dConstruct that describes each talk.
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.
Note’s from Joanne’s presentation at Improving Reality.