Last night, I spoke at the latest Opera back standards>next gig, hosted at MadLab in Manchester.

Chris Mills put the call out months ago, asking if I’d like to take part, and could I herd up anyone else to speak. I recommended my fellow skating (albeit inline-blader!) and Fudge front-ender Mike Byrne as he’s a lively character, and certainly knows his shit, and that made four. Chris kicked off, followed, by myself and Typography Online.

Next up, Opera’s own Patrick Lauke talked (and talked) about media queries and viewports, which is very topical to work we’ve been doing this last week. Finally, Mike rocked up and went balls deep with CSS3 animations and transforms, loads to learn.

So, as promised, here’s my slides, and here’s some of the example code… enjoy.

Example type effects with CSS3 code

• 3D text 1
• 3D text 2
• 3D text 3
• Retro 3D
• Inset 1
• Inset 2
• Neon
• Stroke (webkit)
• Stroke and glow (webkit)

This week Howie and I attended a new conference in Nottingham, New Adventures in Web Design, organised by Simon Collison, or Colly as he’s better known.

Since Colly is possible the nicest guy on the internet and well respected, finding quality speakers wasn’t going to be a tough job, and for the conferences first show, the list was impressive. There were gripes from some quarters that all these speakers have been seen before, it’s the usual industry pundits, but I think that’s just sour grapes and being picky for the sake of it. Out of the ten speakers, I’d only seen five before.

In an effort to make conferences affordable and accessible, the venue was Colly’s hometown of Nottingham, which is in a great location, allowing access to people travelling from all points of the UK, the likes of Cole travelling from near Edinburgh, or Remy from Brighton, plus of course the foreigners who always make it over.

We hung out with Chris Mills, Dan Donald, Rob O’Rourke and of course, my long term partner in crime, Phil Sherry. On a side note, it was Phil’s 40th birthday last week, and I needed to get him a present. What can you buy a loud mouthed smart arse who likes to make his opinion or cutting wit known, especially in a crowded venue? Why, a megaphone of course! The look on a few people’s faces (especially the ones who know Phil) when we unveiled it before the conference kicked off was utter gold. Any situation is instantly made ten times more funny by adding a megaphone. Even the bouncers in the boozer the night before had to agree.

The Speakers

Dan Rubin – The New Language of Web Design
Cool, calm, collected, with a great delivery, Dan was an inspired choice to kick things off. His talk was about the language we use to define our trade, and how it’s about time this language matured and became “ours” instead of borrowing phrases or meaning from other trades, such as “page”, “fold” and “bleed”.

Mark Boulton – A New Canon
Mark talked about the need for a New Canon, a new set of rules for design interactive content in today’s digital age. Screen sizes and content delivery devices are all different sizes and shapes, meaning a lot of old ideas and methods are clunky. We need to design from ‘content out’ – not ‘canvas in’ as traditionally is done – to create connectedness and bind the content to the device. Mark’s delivery was a little nervous to begin, as he himself has acknowledges on tweets, but he soon found his stride. I’d not seen Mark talk before, and admire his design and typographical approach, so found this enjoyable.

Sarah Parmenter – Crafting User Experiences
I missed Sazzy‘s talk at DIBI, having stayed in a Build track, so it was a first for me. Sarah focused on the more emotional level of design and UX. Rapid cognition, sensation transference and how to connect on an emotional level to influence actions and reactions. A few good branding examples involving Coke and Pepsi showed where she was heading, and the colour chart that maps colours to different emotions around the world was great (for instance, while red may mean love in the West, it’s green in some Eastern countries). Unfortunately, I think the session lost it’s way a little towards the end, a few more strong examples of execution would have been good as Sazzy alluded to how you could use the emotional ties in UX for a shopping cart system, but while the ballon and card marketing for her agency was good, but I’d have preferred a more recognised brand, and not self-focused.

Refreshments –

Elliot Jay Stocks – With Great Power Comes Great Responsibility
I like Elliot. He’s one of these people who can design, program, draw, play musical instruments and basically – I think – turn his hand to anything creative. He’s also really bloody modest. His session was a rant, a rebellion against the over use of the Web 2.0 look that is prevalent in online design. He calls it the “distraction of the real”, trying to make everything look like a real object by overuse of bevels, shadows and no real consideration to content. Good examples about traditional design styles, a look at print design, humour, typography and actually admitting that “giving in was ok” when a client wanted some of these drop shadow and real adornments, based on their audience. He’d get on well with our Creative Director who bloody hates the over embellishment by designers who’ve learnt “on the job”.

Jon Tan – Language and the Lizard Brain
A comment Jon‘s friend made to him, about the brain having a small area that literally had no language. This struck a chord with Jon, and he talked about connections on an emotional level, and how we can elicit response from colour and shape, without knowing meaning. He used a couple of typographical examples for this with the words love and hate (written in a foreign language) in fonts that said exactly the opposite. He showed how the designer for Blue Note records could design a cover that spoke volumes about the audio content of the record, despite not particularly liking jazz, because someone had written what kind of emotional response and feeling the record should produce. He even wove in a Bruce Lee slide and quote to illustrate his points. Good stuff!

Q&A session 1 –
A few questions that had been sent in via the twitter back channel, and a few from the crowd.

Lunch –
Interesting point about lunch. Because the conference was running a little behind schedule, Colly and the organisers had been following the back channel on Twitter – #naconf – and adjusted timings accordingly, cutting things short when people were complaining about being hungry around 1ish. Very smart.

Tim Van Damme – Designing On Solid Foundations
Tim tackled the issues of  one hit wonder, pixel heavy sites compared to relatively clean and minimal design on sites that keep you coming back for more. Calling us all Web Bums, for doing the same kind of job and getting paid as we do for free for our own projects, he urged us to make lists about the Good and Bad after a project, see where we can refine our processes. He talked a lot about best approaches for handling clients and the process in general. Tim’s delivery was a bit stilted, not because English is not his native tongue, but because it felt like this talk was brand new, and he was still getting to grips and trying it on.

Greg Wood – Art Direction & Editorial Design on the Web: Does it Work?
One of Greg‘s first slides had us laughing, about being able to piss a 50 mile bike ride, and his slides were all beautifully presented. Greg set out to illustrate the connection between seeing and experiencing, and how good art direction will connect and resonate with a reader with greater impact. And he was right, as he backed it up with stats from his own personal test with styled and unstyled content. Very interesting results, and I know Howie really got a lot from this talk. I think this may have been Greg’s first talk to a big audience, as he began brightly, but his delivery dried a little as he neared the end. Biggest reason for this, I reckon, was that he literally read out what was on the (well designed) slides. Still, the actual message and stats were very enlightening.

Veerle Pieters – Unraveling the Mysteries of Inspiration
Veerle‘s choice of subject was going to cause problems. Inspiration is unmeasurable and almost indefinable, you set the conditions up time and time again, sometimes you get it, sometimes you don’t. Her artwork and illustration was beautiful, and I found her lilting accent a little hypnotic, but it certainly did not get in the way of the delivery. Veerle talked her way through a piece of work, how she got started, how she was inspired, how she mixed it up to change track and put her mark on it. Good slides but nothing earth shattering. I think the best takeaway from Veerle’s session was the sources of her inspiration, her Firewall. She chose a tough subject to articulate, and that did show at times.

Refreshments –

Andy Clarke – Once Upon a Time In The West
Like him or loathe him, Malarkey can tell great story. Confident, well dressed and sharp wits and words, he is a great speaker. I’ve seen him twice before at Speak the Web and DIBI, and enjoyed them immensely. This talk was different. There wasn’t one slide with code on. There was no rant about supporting IE and designing in a browser. He talked about telling a story, using comic books formatting to speed up, slow down and give sense of size and space through clever boxing of content. He did apply this to how design can be expansive and let the brain fill in the blanks and how this may work on new devices like the iPad, but generally, we were there to think a little differently than we may normally do, sans grids.

Brendan Dawes – Produced for Use
I’ve known Bren for about 15 years. I’ve seen him on his soap box and riffing in a studio and on stage, but bloody hell he was on fire at #naconf. Bren’s been trying to declutter his life, and get rid of consumer products he doesn’t use, but get excited about the inherent beauty in products that do their job well. Crap tea strainers and paper clips from different countries, delivered in his “favourite uncle” style, I tell you, he had us all in stitches. Stand out line was when advocating a bit of digital play time, he said “Yeah, it’s in Flash, and guess what? Nobody died!” to which we gave him a round of applause. Bren’s approach to work is very creative and not tied to a platform or medium. He just makes things. A few glimpses at actual live projects and his latest acquisition, a Maker Bot, added oomph to his ranting, and showed he’s not full of shit. Great pick to be on last, he really gave the conference a massive, massive finish.

Q&A session 2 –
Again, a few questions that had been sent in via the twitter back channel, and a few from the crowd.

Thank you and goodbye –

After party –
The after party was at Escucha (Spanish for “listening”) where we got to catch up with all the online friends you don’t see often, or have yet to meet. Great bunch of people, from luminaries like Jon Hicks (taller than I thought) and Elliot mixing it with the crowd and chatting, to a bunch of Irish design students, who had the balls to introduce themselves and listen intently to industry advice.

Thoughts –
Colly has undoubtedly given the best inaugural birthing to a conference he possibly could (sorry DIBI, he just about pinched your newly acquired crown!) A brilliant community feel, great mix of speakers, lovely venue and exceptionally good price point made it all very worth while. If I could change anything, I’d move the date, as so soon after Christmas, some people’s pocket have taken a pounding, but I am really looking for a reason to be pick on here. I’m very much looking forward to next years event, and seeing how other people can up their ante in the aftermath of such a high quality event.

Thank you Colly and team, it was awesome.

Links –
Flickr group
Twitter stream

Not really a massive surprise, but probably had to be done in the light of the WebM video codec. H.264 faced no real pressure from OGG, as OGG was shit.

Read more on TUAW

You may have read about my frustrations about the current HTML5 <video> implementation, it’s short-comings and general deflating-balloon sad-trombone-ness.

Enter JW Player, and their HTML5 beta.

The JW Player for HTML5 is a fully skinnable and configurable player based on the new <video> tag found in HTML5. It is built using javascript (jQuery) and enables a seamless fallback to the popular JW Player for Flash. Currently, our HTML5 player is in Beta. Certain functionalities that we consider essential are missing in this Beta version and will be included in the 1.0 release, which we anticipate to be this summer. We encourage you to provide us with feedback on this beta version so that we may incorporate it into the 1.0 release. If you are a developer interested in learning more, please visit the Developer Site.

So I’m pretty damn excited to see this, because as one of their working examples, they show an example with just an MP4 file. Just a single MP4 file! It’s like they read my whinge!

We’re already using the JW Player on the D&AD site, but not at version 5 yet. However, for the coming revisions, we’ll be updating and serving MP4 video to iPads, iPhones and iPods via JW Player for HTML5 in the near future (providing the geeks are happy with everything where they’re concerned!) The JW Player uses the same skins from the Flash Player with the HTML5 player, meaning continuity without bloodshed. Nice.

Colour me happy.

After my last post about HTML5 video and thinking everyone’s getting ahead of themselves, I’d like to point out I’m not that stupid that I was going to ignore it completely, until I’d had a chance to try it out in a real world work environment situation. I can now ignore it. For a few years/implementations, at least.

It had been weighing on my mind that one of clients has a lot of video, and a lot of their audience are Mac users. This will probably mean there’s a high percentage of iPhone users, and in the coming months, iPad users.

So I’d been thinking about wrapping the Flash video player we have with the <video> tag and seeing how we go. A bit of an experiment, being eager to use these HTML5 elements because they show so much promise of doing things “the right way”, without kludgey plug-ins and so forth. So armed with a chapter on multimedia from messers Bruce Lawson and (the real) Remy Sharp from their forthcoming HTML5 book, I embarked on a journey of discovery.

The good news. Getting up and running, playing video and setting the poster frame was ridiculously easy. Having the chapter to hand was fantastic, because a reference source is needed with anything new. Very happy to see the video running in WebKit browsers, nice playback bar (Safari’s looks a little more cultured (figure 1) than Chrome’s basic big bar (figure 2)), but the video didn’t look quite as good stretched as Flash in Safari (you could see some cross hatch type lines were the scaling was implemented), but seemed better in Chrome. Not a show-stopper.

Right, cool, lets push this further. I want to style that playback bar. What’re the CSS classes and IDs? Oh. I have to “roll my own” in JavaScript? Are you kidding me? This is the beginning of the bad news.

<rant>

That’s right. If you want to customise the playback bar in anyway, you have to write it. In JavaScript. I don’t do much JavaScript, in fact, very bloody little, and I was very disappointed in this. I guess I was hoping for a bunch of default elements I could target, move and style. Still, I guess it won’t be long til some clever sod has written a js-playback bar generator online, where you can choose all your desired elements and attributes. A cookie for the first one, from me.

Ok, so slightly disheartened, we go looking at how the video reacts in other browsers, and it’s fall backs etc., aka, the bad news steps up a gear.

Here’s where I misunderstood something about <video>, the fall back content you put in between the <video> tags is only there for browsers that do not understand the <video> tag. It is not there for browsers that do not understand the video codec. Let me repeat that so we are clear. If the browser understands <video> but does not support your codec (h264 in my case), the browser does NOT fall back to the Flash code or instructions and links you may have put inside the tag. Once I’d understood this, I kinda went “oh yeah, that makes sense.”

What does not make sense is that at the moment, is how browsers that don’t support h264 behave. Opera still shows the play bar, and holds the poster frame (figure 3) which for all intents and purposes, will make the user thinks the video is still going to load. There’s no alert and no warning. Firefox is a little smarter, and knocks back the poster frame to an opaque black, and puts a cross in the middle (figure 4). No real description of what’s happening, but at least the user is told that something is amiss. To my mind, this would be a perfect time to use that fall back content that’s in between the <video> tag, but aimed solely for older browsers.

So I started googling and asking a few knowledgeable people on twitter about this, and it appears this is the way it is. Rich Clarke of HTML5 Doctor fame agrees that yes, it sucks at the moment, but that’s the way it is. Tom Leadbetter, who wrote this piece on HTML5 video for HTML5 Doctor, says he can’t see if he’s missing anything, but did point me to a method of JavaScript browser sniffing to write in the correct code at run time. WTF!? 2010 and we’re back to using browser sniffing.

Rich says he’d like to see OGG win, as do all of the Opera crew I know, but I have to be brutally honest, I hope it doesn’t. No hardware acceleration on playback or encoding, shit meta-data containers, lower quality picture quality to file size ratio… it’s like saying I’d like to see everyone driving a Trabant. I think it’s a disgrace that these browsers that don’t support the given codec can’t do anything better about handling it. And before you accuse me of being biased against OGG/Opera, if Safari can’t handle being fed *only* an OGG file, with no h264 file, then it better do a better job of handling it gracefully.

So it appears, that at the moment, if you have a handful of videos, and you can encode to both OGG and h264 formats, and don’t want to style a playback bar, <video> does a great job. If however, you’re maintaining a client’s site that has over a thousand videos, and possibly no way of getting your hands on the originals that the h264 videos were encoded from to encode an OGG alternative, and you want to style a playback bar to fit in with your site’s branding, you’re in for some tears.

</rant>

On a lighter note, I will, however, highly recommend Bruce and Remy’s book, Introducing HTML5. I’ve been lucky enough to unofficially review a few chapters from Bruce, and I really like what I’ve read, and it’s practical. It’s aimed at people who’re crafting away with HTML4 or XHTML, with hands-on examples and where needed, theoretical discussions of unimplemented tags or methods. We shall be buying a copy for the JP74 offices as soon as it’s published.

Figure 1. Safari

Figure 2. Chrome

Figure 3. Opera

Figure 4. Firefox

Time for another conference road trip!

The inaugural DIBI Conference took place at the Sage in Gatehead on the 28th April, with a fantastic crop of speakers and promising bunch of attendees, judging by the twittering.

DIBI’s format is a little different than a traditional conference, being a two track event. DIBI, which stands for Design It. Build It., was aimed at both developers and designers, with two sets of sessions running all day. Attendees could chop and change and “jump tracks” as they liked, and since a lot of the crowd were front enders, this seems quite a logical thing to do.

The journey up involved the usual road-tripper Chris Mills, but we picked up Dan Donald too, and headed up to crash at Phil Sherry‘s house, since he’s now resident in Gateshead. Yes, this small fact did make the trip more appealing!

We went straight to the venue when arriving, to pick up Phil, who’d been on an HTML5 Doctor course, taught by another mate of ours from Northern Digitals, Rich Clark. A quick wave/face pull at the window to put everyone off their stride, we then disappeared back upstairs to grab a drink. Here we met Gavin, Ellie and a few more of the DIBI organisers. I’d met Gav briefly at Speak The Web, but he was happy to chat with us while we quaffed a drink. This attitude from the organisers was there every moment of the conference, you could go ask them anything, and they were more than accommodating. Big props to them for this, as it made the whole gig feel a lot more accessible. Paul from Technique in Manchester also caught up with us for a pint, whom I’d met at a Transmission event in Manchester, and was to stick around with us for the next day.

Back to Phil’s to dump our gear, then after a veggie curry and a few cans, we headed off to The Forth to meet another mate from school who Phil and I hadn’t seen in around 15 years. There was no mistaking Simon Slater when he walked in, he’d hardly changed a bit! So we stayed in the excellent Forth pub for a few and caught up with him.

On to the pre-party, which was on the Tyne at Pitcher and Piano. Up the stairs, blag Si in at the door, get the beers in. Then start craning around to see who’s about! The pre-party was pretty well attended and it wasn’t long before we were bumping into twitter contacts and putting names to faces. The atmosphere was really laid back, and I think this helped the approachability for everyone.

I think we partied a little too hard at the pre-party, as I kinda remember heading to bed at 3.30am, and didn’t really arise ’til after 9am…

Anyway, hungover, and late to the conference, we skipped the keynote and Wolfram lecture, going straight for coffee and muffins, pocketing many little bags of Haribo for sugar fix rushes throughout the day.

I decided to go for the Build It track to kick off, the first session of which was run by Elliott Kember on jQuery. I’ve used jQuery a total of once, since our nerds at JP74 prefer MooTools (they can actually code javascript!), so there’s no need for me to get involved really. I learnt a lot in Elliott’s class, but it was not without it’s floors. There was a lot of code, but no visual examples of what was happening, and I think it may have been technically aimed a little low for some of the attendees, but his style and enthusiasm was irrepressible.

Next up, nearly half the hall exited for Sarah Parmenter‘s iPhone design session. I was too hungover, and felt well up on the HIG rules for iPhone interaction, so decided to stay for the Last.fm vs Xbox360 class. This was wryly and dryly delivered by David Singleton, who nearly thrashed my head when he said it’d be more technical than Elliott’s jQuery sesh. He lied, though not on purpose. It was about scaling the API and hardware to meet demand of an Xbox version of the Last.fm service. Really insightful process and decision making about how many features you can cull in moments of intense use before a user drops your service. Good stuff.

Lunch, burger, juice, coffee, more chat, meet more faces, both old and new.

Design track for this afternoon, as the speakers all looked excellent.

Tim Van Damme. Photo by @drbparsons

First off was Tim Van Damme, recently of Gowalla fame, urging us to keep evolving with not only our design, but the tools we use to create our designs, lest we become lazy monkeys. Good thinking, excellent art, Tim’s talk was enjoyable, although he himself admitted it was brief. Gavin stepped up and asked plenty of good questions to finish the session.

Next up was Simon Collison. I’d seen Colly talk at Speak The Web, and both his presentation and delivery were excellent. A very measured speaker, it serves to underline he knows what he’s talking about. This session drove at the principles of designing to communicate, highlighting basic rules, methodology and why we do things a certain way. Well worth a watch when the sessions are streamed on the DIBI site.

Short break, laugh that Phil fell asleep twice in that last sesh, cans of Red Bull.

Dan Rubin took the stage to host a talk on usability testing, in which he sighted two examples of real live client work and how they made a difference. Really insightful stuff, I thought Dan’s talk was excellent. Usability is something we should all do more of, but tend not to because of the perceived time it takes. Dan explained how they mocked up sites with a static PNG graphic as the background, then skeleton HTML & CSS to map out buttons on the page. Users were told it wasn’t finished, so only certain buttons worked, which kept expectations in check, and the format made updates and tweaks near immediate, ready for the next test subject. Not rocket science, and something you may think was a bit “ghetto” if you ran a usability session this way, but proved that the big boys have to Blue Peter their way through a job too!

Time for the tour de force that is Andy Clarke, with his Hard Boiled Webdesign. I’d seen malarkey’s talk before at Speak The Web in Leeds, but damn, I was quite happy to see it again. Andy is at ease under the spotlight, and knows what he’s talking about, which makes compelling viewing. The talk urged front end developers to start using the CSS3 progressive fanciness now, because if we didn’t, these cool things like border radius and animation would not make it into a browser spec. The W3C is holding everyone back, browsers include and work on things that devs start to use regularly, which then in turn become ratified into the spec. Excellent working examples, rallying of the troops and generally inspirational. I possibly enjoyed it more the second time round as I was ready to pay attention at the right times!

More refreshments, then time for a musical interlude from Sancho Plan. An interesting mix of live music triggering animations in a live on-screen virtual world. My ears were enjoying the music, whilst the brain was working out how to do what they’re doing. My route, use Director to catch MIDI triggers from the instruments to fire off animation sequences for sprites on the stage. If you understood that, that was the gig. Good, not offensive in anyway, but not my music of choice.

One last speech, by a usability company called What Users Do, which was interesting, but not as engrossing or hands on as Dan Rubin. This was followed by one last Sancho Plan performance, plenty of thank you’s from the organisers, and directions to the after party.

The after party was at Sea, over the other side of the Tyne, and the beer was free. All night. And there was free pizza. From Pizza Hut. Someone had our number and knew exactly what we liked! Everyone got together and exchanged views on how the day had been, high points, low points (if any) and got a chance to say hello to anyone you’d missed during the day.

I also gave a mate of mine who collects Sega Mega Drive games a ring and dragged him down for a beer. I’d talked to Ian online, swapped games and knowledge and envied his game collection, so it was great to meet him in person and to talk about more than just games too.

The after party was well attended, but people started to drift out and leave after the pizza, and we moved onto the Quayside for a swift pint with a few of the speakers. Colly, incidentally, is more than happy to chat with most people, about design and football (Notts County in particular) which was ace. The stragglers carried on the chatter and said good byes, we hopped a taxi and headed back to Phil’s, and I do remember getting to sleep shortly after 1.30am. Quite sensible.

So, to summarise. DIBI was excellent. The venue was class, easy to get to (though the walk with a hangover up all those steps would have me believe otherwise), the speakers were excellent. The crowd was fantastic, and you may have realised from some of this write up, the people you meet at conferences are just as important, if not more so, than the people you go and see. The conference itself was so professionally ran, so much so that it belied the fact it was the first DIBI. The team have ran many conferences before, and it moved smoothly.

Tickets are onsale for DIBI 2011 in June, and I’ll be there.

I’m really pleased to say that the whole Liverpool session of Speak The Web went down really well.

I managed to get through 30 minutes without committing social hari kari or making too bigger tit of myself. Pat Lauke was in full on Opera and HTML5 brainwash form, but energetic and interesting enough to be different from Chris Mill’s session at Leeds. The coup de grâce was obviously Simon Collison of Erskine Design, with his In the Pursuit of Magic presentation, and fair play to him for being drugged up but persevering and putting on a really thoughtful and inspiring presentation.

I really enjoyed my 30 minutes of fame and cannot believe how quick the time flew by. Starting at slide 1, with a counter at 00:01, it’s quite scary, but I felt that after a few slides I got into step quick enough. I’d seen Andy Clarke at Leeds, and had heard that Elliot Jay Stocks and Andy were coming to the Liverpool session. No pressure then! Fortunately, I’d had a few beers with Elliot in Manchester a couple of weeks before, and he turned out to be a thoroughly down-to-earth nice bloke, and we share a lot of common ground with our musical tastes.

There were *loads* of things I’d tried to remember to say, but completely forgot, but also quite a bit I just threw in on the spot. Preparation made this possible, and knowing your subject material!

A bit about why I chose my subject matter, to give you some idea of the decision making as a speaker. When writing the presentation, I didn’t know how the room was going to be split, in terms of designers, front end devs and coders, which is why I asked for a quick show of hands. That made it clear that front end devs were out in force, so hopefully I pitched that well.

I was also aware that I was merely the warm-up act for this gig, and it was my first time speaking at a conference for a long time, so I couldn’t afford to be too esoteric or banal (no, I’m not suggesting Colly was!) but knew I had to be fairly straight forward, but be competent in what I was presentating.

So thank you very much to Dan Donald and Rich Clark for organising the Speak The Web events and inviting me to be part of it all, and thanks to everyone who said hello on the evening, and to all those who’ve followed me on Twitter. I hope you stick around…

Here’s my presentation from the night, and you’ll find Pat and Colly’s on the slideshare.net site.

One thing I really like about talking to some of the Opera guys I know, is that they will take the time to consider another viewpoint. Whilst they’re all about the open web, they realise they need to listen to people who are making and creating content for clients, but face real world restrictions like time and budget. I know. Ridiculous…

I run a business (well, Pete does most the business end stuff, but you know what I mean) and all this talk about HTML5 <video> tags has kinda riled me a little bit, because it’s getting so much exposure, and to be honest I think it’s already shot itself in the foot.

I emailed Bruce Lawson my points of view after we had a rapid fire exchange via Twitter. I was playing devil’s advocate a little bit by countering OGG/h.264 with a flippant “Flash video FTW” type of comment, but that led to a good exchange, with Bruce citing accessibility options in the new <video> tag as a major bonus. However, Bruce slept on it, and asked me the next morning if he could write it up as a blog post, because in his usual musings he doesn’t get to give my perspective much thought.

Currently, the best way to serve video online is via Flash. That’s a given. With the advent of HTML5, a new tag was born to specifically handle video. This would play video natively in a browser, with no need for plug-ins, and allow interaction with Javascript, standard CSS controls and further advancements like annotations etc. It does sound really good, and certainly one of the areas of HTML5 I’m looking forward to exploring. There was quite a bit of coo-ing over this Sublime video page, which is a good indicator of how it’s going, but as Tom Leadbetter points out, it doesn’t work in Firefox. WTF?

This is because there was a small issue of which codec the browser vendors would support for the <video> spec. Apple and Google favoured the h.264 codec, while Opera and Mozilla favoured the open-source OGG video standard.

Of note, Apple faced a similar decision when choosing to create the Apple Lossless codec. They chose not to use FLAC, which is an established lossless format, and opted to make their own. I remember reading at the time that it may be to FLAC not being immune to unforeseen patent issues in the future, which funnily enough is very similar to the OGG video format right now.

Right at the first hurdle, we’re getting shafted, because this means if I want to make video available for all visitors, I need to encode two versions.

If that were for a few videos of my band (what band? I can’t play *anything*) or of my family, it wouldn’t be an issue really, leave ‘em encoding over night, upload and use twice as much space, and reference both files in the <video> code.

But for a business, this means I have to charge a client twice for encoding the same piece of video, and if they’re dealing with a lot of video footage, the time plus storage aspects have just been doubled. This is just crazy. A savvy client will decline the niceties of doing the right thing of going with HTML5 and say encode it once and deliver with Flash. Job done.

Oh, but the iPhone and iPad don’t support Flash!

Think around the problem. Flash can stream h.264 .mp4 files, and the very same .mp4 will run in the Quicktime player on the iPhone, so it appears we’re covering a lot of bases with just using h.264.

Furthermore, the h.264 standard is supported by both dedicated hardware encoders and embedded chip sets for decoding, like in set top boxes or mobile handsets. More on the mobile in a bit, but the hardware encoding is the *only* way to go for anyone dealing in large amounts of video. YouTube anybody? Combined with the smaller file sizes and comparable if not better quality, it’s no wonder Google chose h.264. (I was going to link to Chris DiBona’s blog and the relevant article, but it’s a bad UX with the menu *under* the Google Ads box, and I couldn’t be arsed digging. face palm.)

“Oh, but not everyone is Google.” No, no they’re not. But other people use video too. One of our clients who do use a lot of video is D&AD. A quick look through the 2009 Awards submissions shows not only four or five dedicated video sections, but browsing round other areas, such as installations reveals more video. There’s gonna be a lot of media on there, and that’s just 2009… there’s 323 videos for that year alone, with a total of over 1,500 videos for five years of awards. This figure is only gonna go upwards as the 2010 awards are added, and the years before 2005 are added as D&AD work their way back through previous awards for a more complete history.

Going back to mobile again, this is one area of the internet use we’ve seen absolutely massive growth in over the last few years. The market is enormous, and it’s spreading across the globe and bringing access to those without computers or landlines, with enterprising individuals in Africa renting time out on mobiles for internet access.

A growing number of mobile devices are sporting h.264 hardware chipsets as standard, the iPhone, T-Mobile G1 and Android are notable examples. The explosion of mobile browsing is driving the adoption of the h.264 standard as a hardware spec, and I think that’s going to be quite the defining factor.

I would have thought Opera with it’s Mobile and Mini browsers would be an excellent match up for these new devices, but OGG does not reap the benefits of these hardware accelerators. Opera won’t support h.264 due to “obscene patent licensing costs” (which have yet to be levied for content creators, but it’s still $5 million for a browser to include a h.264 decoder. Thank you for the correction, Bruce), yet they themselves will license out their browser technology to companies like Nintendo… I mean, Firefox, fair enough, it’s open source. Obviously, I do not have the faintest grasp of the in’s and out’s of such dealings, or the figures involved. This is almost thinking out loud from me, and can probably be answered quickly by one of the Opera crowd.

Anyway, if you’ve stuck with me this long you deserve a round of applause. Golf clap. The long and short of it is that I can’t see HTML5 video becoming a real-world standard for online video for a while, until these codec issues are sorted out and there is a clear winner. Certainly for me as a professional dealing with clients concerns and costs, we have to be realistic and say at the moment, we’re going to use Flash. And that’s a real shame, as a lot of work has been done to bring HTML5 into the world, and there’s so much to look forward to, but this situation just boils my piss.

Now please excuse me while I go sell that garden ornament Lawson his hub-caps back…