Four Big Ideas from Web Directions South 2012

It happens each October. Spring hits Sydney town, the flowers bloom and the Sydney Convention & Exhibition Centre takes on the pungent aroma of all things web. Yes, Web Directions South 2012 has come and gone for another year.

Two weeks later, here are the talks that I’m still thinking about.

Lea Verou’s Ten Things (@leaverou)

Lea Verou

I heart Lea. She’s one of those super-rare web people with both serious technical skills AND a wonderful eye for design.

Last year she gave a series of great talks titled “CSS3 Secrets: 10 things you might not know about CSS“. Any front-end person who watches this talk will find something useful in there, and frankly, I would have happily enjoyed that talk again ‘live’, as opposed to that grainy video I originally watched.

But that’s not Lea’s style. She nonchalantly rolled out ‘ANOTHER 10 things you might not know about CSS’ and promptly had hardcore CSS ninjas audibly ‘whoooaaaing’ and passing out in aisles.

For me, the diamond was her demo using background-attachment:local. Now I don’t mind admitting I didn’t even know this CSS value existed, let alone seen it applied in a useful real-world application.

Google's scrollbar alternativeCue Lea, who pointed out that Google Reader’s content panels use a subtle shadow effect at top and bottom (see image right) to indicate when content is out of sight – an elegant alternative to scrollbars. Note how the shadow disappears as you reach the end the available content.

While Google needs JavaScript to execute this little trick, Lea showed us how to use background-attachment:local to create the effect in pure CSS. If you’re intrigued, she outlines it in her blog here too.

And that was but one of her ten death-defying CSS wonders.

Another interesting sidebar: Lea noted that IE10 actually supported more of these bleeding-edge specs used in her demos than any of Chrome, Safari, Firefox or Opera.

There’s a sentence I never expected to write — but hats off to MS.

Ben Hammersley (@benhammersley): The Field, the Flower and the Stack

@benhammersleyIf I were to write an action spy thiller where the protagonist was a rugged but charming web geek, I suspect that character might be very like Ben Hammersley. Imagine Doctor Who meets Daniel Craig.

Damn it, even his bio makes a cracking fireside read: Wired editor-at-large, the Prime Minister’s Ambassador super hero for tech city, Afghanistan war zone blogger, BBC and Guardian reporter and O’Reilly-published author.

And like any action hero worth their salt, Ben laughs at danger. Walking straight off a 19-hour flight, Ben talked for a hour without the aid of a single slide. Nevertheless, he held an audience with 140-character attention spans enthralled for an hour. That’s no mean feat.

Ben’s talk was ‘big picture’. It’s almost a cliche to talk about living in times of ‘unprecendented change’ but it’s easy to forget that only five years ago few of us had usable news and communications in our pockets. Now we’re rarely more than three feet away from our data lifeline.

It’s not just us geeks either. Chances are, your non-techy friends, your hairdresser, the guy at the sandwich shop, maybe even your dad carries the power of Facebook and Ebay on their person at all times.

In Ben’s view, that makes us the first generation of cyborgs — probably ‘slightly rubbish cyborgs’ but cyborgs none the less.

The thing is, in keeping with Moore’s Law, our cyborg parts keep doubling their power every 18 months or so, and governments don’t know how to deal with the changes that come along with this power.

At no time in history did arrows ever get twice as pointy over 18 months. Telegram networks didn’t double their range in a year. Horses didn’t double their top speeds.

Governments simply don’t work on those timescales. They think in 3-5 year terms that institute 10-20 year programs, and they’re ‘scared out of their tiny minds’ (Ben’s words) trying to adjust.

This is why we keep seeing government over-reactions like SOPA and PIPA.

As the designers and builders of this new world, it’s our job NOT just to make it, but to explain it, and advocate for it. Ben asks ‘How do we build cool stuff without freaking people out?’

Josh Clark (@globalmoxie)

Jon Kolka

Josh Clark gave us two, bouncily engaging talks, but it was his ‘Beyond Mobile’ talk that really caught my attention. As web builders it’s easy to think about the web and it’s interfaces as a vast collection of screens and buttons.

Josh focussed on the growing UI world outside this classic paradigm, and how people are designing for them.

He covered a lot of ground, but some of his coolest examples included:

1) SkinvadersTable Drum: We’ve all seen touch-based drumming apps before, but Table Drum makes the real-world your UI.

Rather than only playing the phone interface directly (which you can), Table Drum lets you tie real world items — glasses, books, cutlery — to particular drum sounds. For instance, striking your coffee cup might activate a high-hat while your book is the kick drum, and so on.

Welcome to augmented audio!

2) SkinvadersSkinvaders: Skinvaders is an innovative kids game for iPad. It uses live video of your face as the playing surface for the game. Creatures colonize the surface of your skin while you battle to keep them at bay.

3) Grab MagicGrab Magic : Grab Magic is a project from Aral Balkan designed to give people super powers.

Cobbling together a projector, an iPhone, a computer and a Kinect, Aral built a system that allows you to literally grab a frame from the screen and throw it onto the phone screen.

Tony Stark eat your heart out. And this was all built in less than a day.

Jon Kolko (@jkolko) – Designing for Social Innovation

Jon KolkoIf the web is built by geeks, then the natural question geeks ask is ‘How?’.

  • How can we access this database?
  • How should we structure this navigation?
  • How do we optimize this code?

‘How’ might be the question of scientists and it’s often our ‘home’ question.

‘Why’ is the question of philosophers, and is possibly one we ask less often.

  • Why are we building this?
  • Why is this a good idea?
  • Is it a good thing?

In his closing keynote, Jon Kolko from the Austin Center for Design (AC4D) challenged us to think more often about these whys.

Like the diligent technicians in a Bond villian’s volcano lair, we don’t ALWAYS think to ask ‘So, boss, umm … why are we building this space-based death ray again?’. We might think ‘Woah, this death ray hardware is sweeeet! I’m totally gonna put a lightning bolt on the side!’.

To illustrate the point, Jon talked about the McDonald’s website as an example of excellent design execution. He followed this with two graphs showing the McDonalds shareprice since the 1960s and the rise of diabetes rates in the US. They mirror nicely.

Does this mean McDonald’s is solely responsible for the US diabetes problem? Of course not, but Jon argued it is certainly an ‘amplifying factor’.

As a counterpoint, Jon talked about some of the programs his students had created to tackle social problems.

One of these programs was ‘Hour School‘ by Alex Pappas and Ruby Wu.

Hour School is an online service that enables the chronically homeless to teach others about the things they know about. It turns out that often these people have high-level skills from their former lives — anything from motorcycle repair to foreign languages to system administration.

Giving them the identity of ‘teacher/expert’ was often enough to kickstart other positive life changes.

This idea of ‘aiming design at social problems’ really resonated with me.

As web people, we all have a set of powerful skills and tools, we have global reach and scale. There are so many problems out there, big and small. Who knows, maybe you could solve one of them?

Those were the four talks that stuck with me, but I could have talked about many others. Even the coffee queues are always good places to pick up tips and fresh inspiration.

Either way, Sydney is mostly glorious in springtime and John and Maxine always pull together an amazing event. If you can afford to block out a couple of days in your October calendar, you won’t regret it.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Deaf

    Can all of those videos be used in YouTube with good quality captions? Many millions of deaf and hard of hearing people cannot benefit from them unless they are accessible. Thanks!