Report from @media conference in London

The @media conference, or Web Directions as it is officially called these days, was once one of the pinnacles of web development. The celebrities of the web community gathered once a year and confirmed their positions as generals in the web standards war. In 2006 my colleague Roger Johansson from 456 Berea Street was one of the speakers. Five years later, a lot has changed in the web industry.

Several names from the previous era remain in the scene. Members of the old guard such as Andy Clarke, Bruce Lawson and Jeremy Keith are still here, reinforced by young and talented professionals in the field. But the war is almost over since most vendors embrace web standards today. Microsoft are also doing their part with Internet Explorer 9, even though that version only has partial implementation of JavaScript and CSS3 so far.

This means that the brilliant minds can focus on other stuff. But what will that be? The conference was mainly about HTML5, CSS3 and mobile development.

Roaming the Queen Elizabeth Hall.

First we attended a full day workshop on building mobile apps, led by Jonathan Stark. There are divided opinions on whether to do pure native apps or go for web apps, but we went for hybrid apps which is basically web files bundled in a native executable. I like this approach, since we’re getting the best from both worlds.

But there is usually a bit of black magic involved. To keep your sanity while developing I recommend using the helper tools available. One of the most popular is PhoneGap, an open source native app wrapper which enables support for native devices such as camera and accelerator. Unfortunately PhoneGap requires XCode, which only runs on Macs. But there is a workaround where you upload the code to a server, compile it and later download the compiled files.

There was also a bit of talk about nifty plugins such as JQTouch, which provides a mobile look-and-feel GUI to your markup. I picked up some useful gems regarding designing for touch screens which may come in handy.

Andy Clarke holding the second day keynote.

On the first conference day, Tom Coates held an inspiring keynote about the extreme rate of expansion on the web. The first HTML page was written in 1991. Present day, 20 years later, Google has indexed 28 billion web pages and digitized 15 million books (of the total 130 million). And most of the material has of course been published in the last ten years, as the nineties had a quite modest internet population compared to today.

As Tom put it, “All this magic has been happening in the last 10 years, and you’re all part of changing the world”. Ten years ago, there was no Facebook, YouTube, Twitter, RSS feeds and other things we like to take for granted today.

The awesome Bruce Lawson (without viking helmet).

One of the most anticipated sessions was Bruce Lawson on HTML5 video. The new <video> element is native and thus accessible by keyboard as well as controllable by JavaScript and CSS. The <track> element and vtt-files (Web Video Text Tracks) can be used for accessible subtitles. You can also use media queries to, for example, send low resolution video to mobile units:

This is a great step forward, but unfortunately the biggest problem is codec support. The different browsers have varying support for formats such as mp4/H.264, WebM and Ogg/Theora. The same problem goes for audio with formats such as mp3, Ogg/Vobis and wav. Until there is better unification we have to fix it with multiple source elements.

He noted that HTML5 seems to have severe latency issues, so it’s probably not good enough for advanced WebGL stuff, but hopefully this will be addressed soon.

Brian Suda, Bruce Lawson, Jeremy Keith, Relly Annett-Baker and Douglas Crockford.

Douglas Crockford, the legendary creator of JSON and more, began to spoke about wicked JavaScript techniques including node.js, but somehow managed to turn it all into a session of IE bashing.

Lea Verou spoke about CSS3 gradients and showed some kick-ass examples. Linear, radial, you name it. Have a look at her gradient demos and view the code if you’re brave enough.

Addy Osmani showed a million links to JQuery frameworks, where I think Modernizr is one of the most useful.

Jeremy Keith ended the first day with a hot topics panel featuring Bruce Lawson, Douglas Crockford, Brian Suda and Relly Annett-Baker.

The second day started with a keynote by Andy Clarke. He demonstrated Animatable, a free tool which runs in the browser and offers help while creating animations. As a demo they recreated the Mad Men intro using CSS3 transforms, transitions and animations.

Michael Mahemoff held a presentation about HTML5 offline. The main topics were web storage (local storage as well as session storage), WebSQL database and the Application cache.

Nicole Sullivan talked about performance of CSS3 and HTML5. A good point was that selectors are parsed from right to left, so div.classname is slower than .classname. Other things to avoid were box-shadow, rgba-transparency and the attr-selector.

I also attended “Rockstar graphics with HTML5” by Dave Bulmer. A lot of canvas and CSS3 comparisons were made and he believed SVG to be on its way out.

All in all, a very interesting conference and I learned a lot. But the best part of conferences usually happens between the sessions, for instance the short discussions with other professionals in the same field of work. A few minutes with the right person can be very inspiring and provide new perspectives.