Since 1988, Martin Banks and I have been running media skills training courses. Early on, we introduced an 'architecture' for the process. We drew it on flipcharts for a few years then, in 2004, we formalised it and started giving it out as part of our wallet-sized plastic business card. The model acts as an 'aide memoire' for all who've attended our training.
A few weeks ago, I was rummaging (as you do) some
infographics - pictures that speak well over a thousand words - and took a shine to the interactive variety, where the graphic responds to the user's actions.
I'd just been doing some training work with
the Racepoint Group and, coincidentally, one of its US staff Kyle Austin wrote a blog post:
Are Infographics the New Slide Shows? Good point, I thought, having just taken someone through our 'architecture'.
So I set to work to convert our flat image into something a little more lively. It's aim is to refresh the memories of those who've attended our training and to give others an appreciation of how they might set about handling the media.
The first attempt was an animated .gif file with text boxes to expand on each element of the image. Horrible. Boring. Sequential. No user interaction. Didn't lend itself to the web. Etc.
I wanted an interactive infographic that would work in more or less any browser and not depend on the presence of JavaScript, Flash or any other kind of plug-in. Just HTML and CSS. (I'd done some simple stuff before,
here and
here, so I was optimistic that it could be done.)
The second attempt was a graphic that the user could mouse over, highlighting image elements and showing the relevant text in a nearby box. The size was determined by my computer screen, which was a bit stupid because many of the people I'd like to share it with might have a smaller screen - an iPad for example.
So I reworked it with the iPad in mind. The hover can be achieved with a finger, even on the smallest graphical element. And while I was resizing everything, I added drop shadows and rounded corners to the text boxes.
If you're interested, the end result is at How To Handle The Media
I hope you enjoy it.
PS If anyone wants the gory technical details of how to do this sort of thing, I'll pen another post. Just ask.
Recent Comments