Geek Ninja Battle Night

Press start

Despite what it might say on tonight’s bill, I won’t be talking about HTML5 or CSS.

I won’t be talking about techniques.

That’s because I believe that to avoid becoming intoxicated by technology, we should take a moment to consider the why before the how.

I’ve never been much of a gadget geek but there have been two devices that meant a lot to me. Lately it’s been my iPad (not my iPhone) and twenty years before that, my first Game Boy. I couldn’t put it down. I took it everywhere. I was obsessed by it. I spent money I didn’t have on games for it. (We had a Tory government and a recession in the early nineties too).

Aral themed tonight around fighting games and that means (for me at least) Mortal Kombat. The port of Mortal Kombat 2 onto the Game Boy wasn’t a great game, but it was memorable. It pushed against the Game Boy’s limits — often at the expense of gameplay. Sometimes the action would slow to a crawl, other times the controls become unresponsive. Despite the flaws, Mortal Kombat 2 on the Game Boy was an important artifact in mobile gaming history, although I never did make it to the final boss.

Yesterday’s Game Boys are today’s smart-phones and tablets. One day I put my Game Boy in a box (without removing the batteries) and I didn’t think about it again for twenty years. A few months ago, I found it and a stack of game carts. The Game Boy was dead, so all my games are useless. Content like save data and scores is lost, unless I buy a second-hand Game Boy. All I’ve got left is plastic.

I found a pile of 100Mb Iomega ZIP disks that day too. From the labels, they contained backups of my first websites. Without a drive to read them, all that content’s lost. All I have left is plastic unless I buy a second-hand ZIP drive. So that’s exactly what I did. I bought a drive on eBay and one week and £20 later I’d recovered my sites and copied them to a RAID and the cloud. It taught me a valuable lesson about why not to take data storage formats for granted.

What’s remarkable is that I could read (almost) everything on those disks. I say ‘almost everything’ because I couldn’t read Microsoft’s FrontPage extensions (remember how they used Java Applets as rollover buttons?) and a smattering of Flash content.

What lasted, what still works, what means something even today is the HTML. It transcended the media I stored it on and reads well on devices that I couldn’t have imagined when I wrote it. Devices like my iPad. We can’t always say the same about content that’s delivered via the native applications on my iPad.

Particularly on the iPad platform, we’re seeing publishers choose native applications to deliver their content — news, opinions, stories. Maybe it’s because they’re caught up in the excitement about a new platform? Maybe they’re following what their competitors are doing? More likely it’s because they’re clinging to the hope that native applications will help to maintain familiar business models. Whatever their motives, native applications mean packaging content into snapshots. Snapshots that rarely have archives so you better read it today, because it’ll be gone tomorrow. Contrast this with the publishers’ own websites where you’ll often find the same searchable content in HTML and with a URL that gives it — unless it’s the victim of criminal damage — permanence.

When I made those early websites that I rescued from a pile of ZIP disks, everything was “best viewed in Internet Explorer at 640x480px” because I didn’t know then that web design was any different from print. I shouldn’t be too ashamed as it’s what a lot of us still do.

It used to be enough to make a one-size-fits-all canvas. First 640px, them 800, then 1024. It felt comfortable, because we carried on treating a website design like a piece of artwork with fixed dimensions.

Today’s range of devices and capabilities mean we need to design for beyond the desktop, and for many that means adding separate ‘mobile’ or ‘tablet’ site designs. This is a mistake, for several reasons.

First, creating separate designs for different categories of device (smartphone or tablet), or specific devices (iPhone, iPad, Nexus, Tab, TouchPad, Xoom) won’t scale as the range and depth of devices grows. Like browser sniffing, that path leads to (at best) continual maintenance or (at worse) neglected device ghettos.

Second, like the publishing and media moguls who are struggling to adapt to changing business dynamics, those of us who create (what Jeremy Keith termed) “separate silos for ‘mobile’ devices” don’t ‘get’ the fluid and ever changing nature of the web.

Instead of thinking in terms of ‘mobile design’ or ‘iPhone, iPad or tablet design’, we need only think and talk about design that is flexible, adaptable and ‘responsive’ to whatever demands are made of it. I just call that web design.

Ethan Marcotte lit a fire under Media Queries almost a year ago and some of us have become very excited about his ‘responsive’ approach to design. A few weeks ago, I wrote that I didn’t care about responsive web design because web design that’s unresponsive isn’t web design:

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. Web design is responsive design, Responsive Web Design is web design, done right.

I wasn’t being intentionally contentious. I believe that we need more than Media Queries to make web design truly responsive.

We need to fundamentally rethink what web design means in (dare I say it) the post-PC era. That means finally embracing designs that are fluid in every sense and finding better ways to make and communicate them.

These transitions won’t be quick and they won’t be easy, for us or for the people we work with. There will likely be resistance. But change is happening and whether we like it or not, how we designed during much of the last decade simply isn’t relevant anymore.

Finish him!