Journal tags: dconstruct2012

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.

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.

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

And Geri took a bunch of really nice pictures.

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.

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

It’s been an exciting day at Clearleft Towers. Tickets for this year’s dConstruct went on sale today.

Sales are going briskly. At the end of the day, two thirds of the tickets were gone.

Needless to say, I think you should grab yourself a ticket. But then, I would say that, wouldn’t I? I think the line-up is bloody brilliant: James Burke! Lauren Beukes! Jason Scott! Unnecessary exclamation points!

But before you slap your virtual money down via the Herculean challenge of Google Checkout, let me reiterate what I wrote on the dConstruct website: dConstruct is not a conference of practical web design and development tutorials.

The presentations may not contain any practical tips you can take back to work on Monday morning but you will gain insights into the direction our digital technology is taking.

If you’re looking for practical know-how, I highly recommend the workshops. The actual conference day, however, is all about challenging your brainbits and making you think.

In this interview with .net magazine Andy does a good job of explaining where dConstruct is coming from, man, and what you can expect on the day:

While other conferences try to educate and inform, dConstruct aims to enlighten and inspire – to challenge the way you think about design and technology as it applies to our industry. It’s basically brain candy for a curious mind.

If that sounds like something you’d enjoy, get a ticket. I predict they’ll probably be gone by the end of the week.

Bevan did a great job on the dConstruct website. I tried to help him out along the way, which mostly involved me doing a swoop’n’poop code review every now and then.

I was particularly concerned about performance so I suggested base-64 encoding background images wherever possible and squeezing inline images through ImageOptim. I also spotted an opportunity to do a bit of conditional loading.

Apart from the home page, just about every other page on the site features a fairly hefty image in the header …if you view it in a wide enough browser window. If you’re visiting with a narrow viewport, an image like this would just interfere with the linearised layout and be an annoying thing to scroll past.

So instead of putting the image in the markup, I put a data-img attribute on the body element:

<body data-img="/img/conference.png">

Then in a JavaScript file that’s executed after the DOM has loaded, I check to see if the we’re dealing with a wide-screen viewport or not. Now, the way I’m doing this is to check to see if the header is linearised or if it’s being floated at all—if it’s being floated, that means the layout styles within my media queries are being executed, ergo this is a wide-screen view, and so I inject the image into the header.

I could’ve just put the image in the markup and used display: none in the CSS to hide it on narrow screens but:

1. that won’t work for small-screen devices that don’t support media queries, and
2. the image would still be downloaded by everyone even if it isn’t displayed (a big performance no-no).

I’m doing something similar with videos.

If you look at a speaker page you’ll see that in the descriptions I’ve written, I link to a video of the speaker at a previous conference. So that content is available to everyone—it’s just a click away. On large viewports, I decided to pull in that content and display it in the page, kind of like I’m doing with the image in the header.

This time, instead of adding a data- attribute to the body, I’ve put in a div (with a class of “embed” and a data-src attribute) at the point in the document where I want to the video to potentially show up:

<div class="embed" data-src="//www.youtube.com/embed/-2ZTmuX3cog"></div>

There are multiple video providers—YouTube, Vimeo, Blip—but their embed codes all work in much the same way: an iframe with a src attribute. That src attribute is what I’ve put in the data-src attribute of the embed div.

<div class="embed" data-src="//player.vimeo.com/video/33692624"></div>

Once again, I use JavaScript after the DOM has loaded to see if the wide-screen media queries are being applied. This time I’m testing to see if the parent of the embed div is being floated at all. If it is, we must be viewing a widescreen layout rather than the linearised content. In that case, I generate the iframe and insert it into the div:

(function(win){
    var doc=win.document;
    if (doc.getElementsByClassName && win.getComputedStyle) {
        var embed = doc.getElementsByClassName('embed')[0];
        if (embed) {
            var floating = win.getComputedStyle(embed.parentNode,null).getPropertyValue('float');
            if (floating != 'none') {
                var src = embed.getAttribute('data-src');
                embed.innerHTML = '<iframe src="'+src+'" width="320" height="180" frameborder="0"></iframe>';
            }
        }
    }
})(this);

In my CSS, I’m then using Thierry Koblentz’s excellent technique for creating intrinsic ratios for video to make sure the video scales nicely within its flexible container. The initial video proportion of 320x180 is maintained as a percentage: 180/320 = 0.5625 = 56.25%:

.embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.embed iframe {
    position: absolute;
    top:  0;
    left: 0;
    width: 100%;
    height: 100%;
}

The conditional loading is working fine for the header images and the embedded videos, but I still feel a bit weird about testing for the presence of floating.

I could use matchMedia instead but then I’d probably have to use a polyfill (another performance hit), and I’d still end up maintaining my breakpoints in two places: once in CSS, and again in JavaScript. Likewise, if I just used documentElement.clientWidth, I’d have to declare my breakpoints twice.

Paul Hayes wrote about this issue a while back:

We need a way of testing media query rules in JavaScript, and a way of generating events when a new rule matches.

He came up with the ingenious solution of using transitionEnd events that are fired by media queries. The resulting matchMedia polyfill he made is very clever, but probably overkill for what I’m trying to do—I don’t really need to check for resize events for what I’m doing.

What I really need is some kind of otherwise-useless CSS declaration just so that I can test for it in JavaScript. Suppose there were a CSS foo declaration that I could use inside a media query:

@media screen and (min-width: 45em) {
    body {
        foo: bar;
    }
}

…then in JavaScript I could test its value:

var foovalue = window.getComputedStyle(document.body,null).getPropertyValue('foo');
if (foovalue == 'bar') {
    // do something
}

Of course that won’t work because foo wouldn’t be recognised by the browser so it wouldn’t be available to interrogate in JavaScript.

Any ideas? Maybe something like zoom:1 ? If you can think of a suitable CSS property that could be used in this way, leave a comment.

Of course, now that I’m offering you a textarea to fill in with your comments, you’re probably just going to use it to tell me what’s wrong with the JavaScript I’ve written …those “comments” might mysteriously vanish.

I was up in the big smoke last week for UX London. It was excellent: a thoroughly superb line-up of smart speakers and lovely attendees. Kate did a great job of making sure everything ran smoothly.

But there’s no rest for the wicked. With UX London done, Clearleft is gearing up for the other two events we’ve got lined up: Ampersand in June—there are still some tickets available—and dConstruct in September.

We sneakily soft-launched the dConstruct website while we were manning the front desk at UX London. It was put together by our current intern, Bevan Stephens, and as you can see, he’s done a superb job. I offered some guidance on the mobile-first approach which he implemented beautifully.

I’ll write some more later about some of the specifics of the site, but for now, I just want to say: check out that line-up!

Usually Andy is responsible for putting together the roster of speakers but this year it was my turn. It was a lot of work and I have a renewed appreciation for the great job Andy has done every year in putting together a kick-ass conference. I’ve always felt that one of the strengths of dConstruct is the way the day is curated.

There’s a lot to live up to: seven years worth of fantastic talks. But I couldn’t be happier about the line-up we’ve got for dConstruct 2012:

One of my favourite writers, Lauren Beukes; local genius Seb Lee-Delisle; brilliant London lads Tom Armitage and Ben Hammersley; my hero Jason Scott; brain-the-size-of-a-planet Scott Jenson; my super-smart friends Ariel Waldman and Jenn Lukas; and, wait for it …James. Fucking. Burke.

Your reaction to that last one will either be “who?” or “OMGWTFBBQ!” depending on your age and/or penchant for the greatest popular science television shows ever broadcast.

I realise it’s a very self-indulgent line-up—I’ve basically put together my wish list of the smartest, funniest, most eloquent people I know, but it’s all in service of the theme for this year: Playing With The Future.

(Yeah, I came up with that one. Can you tell?)

Lest there be any misunderstanding about the kind of event dConstruct 2012 will be, I’ve written a few words about what to expect:

The presentations may not contain any practical tips you can take back to work on Monday morning but you will gain insights into the direction our digital technology is taking. You might just find yourself showing up at work on Monday morning with an altered perspective on the world.

Tickets go on sale at the end of May. They’ll be a very affordable £130 plus VAT.

Oh, and did I mention the workshops that will precede the day of the conference? Ethan Marcotte, Remy Sharp, Lyza Danger Gardner, and Jonathan Snook: Kick. Ass!

I am so ridiculously excited. I cannot wait until September!

I hope to see you there.