Tags: 2012

10

sparkline

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.

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.

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.

Austin Apart

I’ve just been to Austin for An Event Apart. This was my ninth visit to Austin but the first time that it wasn’t during South By Southwest.

I liked it. I did not miss the throngs of marketers. Also, I was able to actually do things that require a lot more effort during Southby, like going to see movie (whilst having dinner and a few beers) at an Alamo Drafthouse—an excellent experience that I highly recommend. They have a code of conduct that would make Mark Kermode proud.

It was really nice to spend some time with some Austinites: the local Happy Cog crew, the Paravel gang, and teacher extraordinaire Sam Kap.

The conference was, as always, excellent.

Jeffrey's introduces me Back of the class

What was really great was seeing themes emerge and recur over the course of the two days. I remember this happening a couple of years back, when many of speakers started talking media queries (culminating with Ethan coining the term Responsive Web Design). This time, the recurring themes were pretty clear: process and workflow.

There was plenty of nitty-gritty design and development knowledge bombs too, but it was really great when Sarah, Andy, Ethan and myself all talked about the importance of style guides and pattern libraries in our work. Samantha’s style tiles got multiple shout-outs too.

The speakers at An Event Apart don’t collude and coordinate before the event, but I’m sure it must have looked as though we had been sent on stage with a mission to continue Anna’s excellent work.

Now that An Event Apart Austin is over, I’ll be heading back to England’s rainy shores. But before I do, I’m going to soak up another day or two of sunshine in Arizona, visiting the in-laws.

We were all set to spend yesterday evening watching the stars from one of Kitt Peak’s telescopes. Alas, the thunderclouds put paid to that. But we did get to have a look around Kitt Peak, which was quite marvellous.

Kitt Peak

I took some pictures. It would’ve been cool to have checked in on Foursquare there but a) there’s no reception way out there and b) they ask you to switch off your phone …not all the telescopes are optical.

dConstructickets

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.

Conditionally loading content

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.

Announcing dConstruct 2012

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.

Sharing pattern libraries

I’ve been huffduffing talks from this year’s South by Southwest, revisiting some of the ones I saw and catching up with some of the ones I missed.

There are some really design and development resources in there that I didn’t get to see in person:

One talk I did get to see was Andy’s CSS for Grown Ups: Maturing Best Practices.

CSS for Grown Ups: Maturing Best Practices on Huffduffer

It was excellent.

You can have a look through the slides.

He talks about different approaches to creating maintainable CSS for large-scale projects. He touches on naming conventions for classes, something that Nicolas Gallagher wrote about recently. And while he makes reference to SASS and Compass, Andy makes the compelling point that’s what more interesting than powerful tools is the arrival of powerful approaches like SMACSS and OOCSS.

Over and over again, Andy makes the point that we must think in terms of creating design systems, not simply styling individual pages—something that Paul has also spoken about. One of the most powerful tools for making that change in thinking is in the creation of style guides for the web and Paul has even created blog dedicated to the BBC’s style guide.

Andy referenced the BBC GEL style guide in his talk but pointed out that because it’s published as a PDF rather than markup, it isn’t as powerful as it could be—there’s inevitably a loss of signal when the patterns are translated into HTML and CSS. Someone from the BBC was in the audience, and in the Q and A portion, acknowledged that that was a really good point.

After the talk I got chatting with Lincoln Mongillo who worked on the recent responsive redesign of Starbucks.com. He mentioned that they created a markup and CSS style guide for the project. “You know what would be really cool?” I said. “If you published it!”

Here it is. It’s a comprehensive library of markup patterns; exactly the kind of resource that Anna wrote about in 24 Ways.

In my experience, creating a pattern library for any project is immensely valuable, whether you’re working in a team of two or a team of two hundred. I’ve found they work well as the next step after Style Tiles: a way of translating the visual vocabulary of a site into markup and CSS without getting bogged down in the specifics of page structure or layout (very handy for a Content First approach). The modularity of a pattern library enforces a healthy .

I’m really pleased to see more and more pattern libraries being made public. That’s one of the reasons why I shared my pattern primer and Dan shared his Pears theme for Wordpress:

Breaking interfaces down into patterns has been immensely helpful in learning and re-evaluating the best possible code to implement them.

But Pears isn’t about how I code these patterns—it’s a tool for creating your own.

I love that. These style guides and pattern libraries aren’t being published in an attempt to provide ready-made solutions—every project should have its own distinct pattern library. Instead, these pattern libraries are being published in a spirit of openness and sharing …a way of saying “Hey, this is what worked for us in these particular circumstances.”

For that, I am very grateful.

The Southby and the Southby

If attending a web conference is like going to a concert, South by Southwest in Austin is like Glastonbury: a massive multi-track event where the people on stage aren’t as important as tracking down the friends you know are somewhere in the crowd.

An incredible amount of work goes into the event. When Jessica and I showed up in Austin last Thursday evening and headed straight to The Wholly Cow for a burger, there was a group of Southby volunteers at the next table, planning the next day’s activities like soldiers on the eve of battle. Make no mistake, South by Southwest is a triumph of planning and execution on a scale I can’t even begin to comprehend. I’m always amazed when I see Hugh wandering about looking cool as a cucumber—I’d be freaking out if it were me.

The interaction portion of South by Southwest has been getting bigger with each passing year. For a while this was a source of pride, then nervousness, and now …well, now it has become something quite different to what it once was. It’s not simply that the crowd is larger; the crowd is different.

Where once the core audience was made up of web-loving geeks, now the overwhelming majority of attendees are there to hawk their product/app/start-up by whatever means necessary. I tried to take a live-and-let-live attitude with those people, but it’s hard for me to maintain that attitude when I find them actively repulsive. I mean, honestly, it was like wading through a sea of spam.

I was chatting with Aaron in Austin airport afterwards and he said he was trying to take a City And The City approach to unseeing the douchebag world, but that’s difficult when they keep breaching by thrusting flyers and schwag into your face when you’re just trying to get into the Austin Convention Center (though you could potentially spend the entire event without ever entering that building, what with the panels spread out amongst many venues across town).

I did attend some great panels at South by Southwest, and I did have a great time meeting up with old friends and making new ones. But I felt like I had to work quite hard at it this year. I had a constant feeling of FOMO from all the talks I was missing and there were lots of friends who were also at the event that I didn’t even see once the whole time. So if you weren’t in Austin and you were watching from afar via Twitter, don’t worry: even the people who were at South by Southwest weren’t at South by Southwest.

Evan had a similar experience and I think he’s right about why there are so many desperate marketers showing up:

I think that’s largely Twitter’s fault; the company’s breakout at SxSW 2007 has made success at the event a Philosopher’s Stone for startups world-wide. Unfortunately, most of these folks have missed the subtle fact that Twitter wasn’t successful because it was at SxSW, but because it was useful and interesting to the kind of people who go to South by Southwest. The same goes for other South By success stories: Foursquare, Lanyrd. In other words: if you don’t appeal to that audience, dropping a trillion-dollar marketing bomb on downtown Austin for a week in March won’t make you Twitter. It’ll just make you poorer.

To be honest, I’m not sure I can justify another trip to South by Southwest if it means paying for an overpriced hotel room and wading through all the Conference Center crap to find the gems hidden within. But Evan points out the problem with simply giving up on the event:

South by Southwest has been a huge boon to the technology community. It deserves a better response than a sniffy adieu.

He’s right …but I’m not sure there’s anything that the event organisers (or the subset of attendees who aren’t meatspace spammers) can do about it. South by Southwest has become an unstoppable juggernaut.

And what rough beast, its hour come round at last, slouches towards Austin to be born?

Y’know, I’m okay with South by Southwest being a different kind of event now than it once was. I’m glad that it’s successful. And it’s not like there aren’t plenty of other excellent events for web geeks.

If I don’t end up returning to South by Southwest, I’d definitely miss it. And I would definitely miss Austin. I’m looking forward to going back to that most excellent town for An Event Apart in July—it will be my first time being there when it’s not South by Southwest.

An Event Apart, by the way, had an excellent one-page advert running on the back cover of the chunky South by Southwest printed program. It simply said: One Track.

South by CSS

South by Southwest has become a vast, sprawling festival with a preponderance of panels pitched at marketers, start-ups and people that use the words “social media” in their job title without irony. But there were also some great design and development talks if you looked for them.

Samantha gave a presentation on style tiles, which I unfortunately missed but I’ll be eagerly awaiting the release of the audio. I also missed some good meaty JavaScript talks but I did manage to make it along to Jen’s excellent introduction to HTML5 APIs.

Andy’s talk on CSS best practices was one of the best presentations I’ve ever seen. He did a fantastic job of tackling some really important topics. It’s a presentation (and a presenter) that deserves a wider audience, so if you’re involved in putting together the line-up for any front-end conferences, I highly recommend that you nab him.

Divya put together an absolutely killer panel called CSS.next, all about how CSS gets specced and shipped, and what’s coming down the line. All of the panelists were smart, articulate, and well-informed. The panel was very enlightening, as well as being thoroughly enjoyable.

And then there was the Browser Wars panel.

This is something of a SXSW tradition. Arun assembles a line-up of representatives from browser makers—Mozilla, Google, Microsoft, and Opera—and then peppers them with some hardball questions. Apple is invited to send a representative every year, and every year, Apple declines.

There was no shortage of contentious topics this year. The subject of Google Dart was raised (“Good luck with that,” said Brendan). There was also plenty of discussion about the recent DRM proposal submitted to the HTML working group. There was a disturbing level of agreement amongst all the panelists that some form of DRM for video was needed because, hey, that’s just the way things go…

As an aside, I must say I found the lack of imagination on display to be pretty disheartening. Two years ago, Chris was on the Browser Wars panel representing Microsoft, defending the EOT format because, hey, that’s just the way things go. Without some form of DRM, he argued, we couldn’t have fonts on the web. Well, the web found a way. Now Chris is representing Google but the argument remains the same. DRM, so the argument goes, is the only way we’ll get video on the web because that’s what the “rights holders” demand. And yet, if you are a photographer, no such special consideration is afforded to you. The img element has no DRM and people are managing just fine, thank you. Video, apparently, is a special case …just like fonts. ahem

Anyway…

The subject of vendor prefixes also came up. Specifically, the looming prospect of non-webkit browsers parsing -webkit prefixed properties was raised.

I saw a pattern amongst all three subjects: the DRM proposal, Dart, and browsers implementing another browser’s vendor prefix. All three proposals were made to address a genuine problem. The proposals all suffer from varying degrees of batshit craziness but they certainly galvanised a lot of discussion.

For example, Brendan said that while Google Dart may not stand a hope in hell of supplanting JavaScript, some of the ideas it contains may well end up influencing the development of ECMAScript.

Similarly, Mozilla’s plan for vendor-prefixing certainly caused all parties to admit the problem: the W3C was moving too slow; Apple should have submitted proprietary properties for standardisation sooner; Mozilla, Microsoft, and Opera should have been innovating faster; and web developers should have been treating vendor-prefixed properties as experimental features, not stable parts of a spec.

So the proposal to do something batshit crazy and implement -webkit-prefixed CSS properties has actually had some very positive effects …but there’s no reason to actually go ahead and do it!

I tried to make this point during the audience participation part of the panel, but it was like banging my head against a brick wall. Chaals kept repeating the problem case, but I wasn’t disputing the problem; I was trying to point out that the proposed solution wouldn’t fix the problem.

It was a classic case of the same kind of thinking we saw in the SOPA proposal:

  1. Something must be done!
  2. Implementing -webkit prefixes is something.
  3. Something has been done.

The problem is that it won’t work. Adding “like Webkit” to the user-agent string will probably have much more of an effect and frankly, I don’t care if any of the browsers do that. At this point, a little bit more pissing into the bloated cesspool of user-agent strings is hardly going to matter. A browser’s user-agent string isn’t an identifier, it’s a reverse-chronological history of the web. Why not update the history booklet to include the current predilection amongst developers for Webkit browsers on mobile?

But implementing -webkit vendor prefixes? Pointless! If a developer is only building and testing their sites for one class of device or browser, simply implementing that browser’s prefixed CSS is just putting a band aid on a decapitation.

So I was kind of hoping that Mozilla would just come right out and say that maybe they wouldn’t actually go ahead and do this but hey, look at all the great discussion it generated (just like Dart, just like the DRM proposal). But sadly, no. Brendan categorically stated that the proposal was not presented in order to foment discussion. And in follow-up tweets, he wrote that he actually expected it to level the mobile browser playing field. That’s an admirably optimistic viewpoint but it’s sadly self-delusional.

And what will happen when implementing -webkit prefixes fails to level the playing field? We’ll be left with deliberately broken browsers.

Once something ships in a browser, it’s very, very hard to ever remove it. During the Dart discussion, Chris talked about the possibility of removing Dart from Chrome if developers don’t take to it. Turning to the Microsoft representative he asked rhetorically, “I mean, do you guys still ship VBScript?”

The answer?

“Yes.”