Interactive Infographic: How To Handle The Media

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.

Card

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

IPad1

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.

3 thoughts on “Interactive Infographic: How To Handle The Media

  1. Hi David! Many many thanks for sharing this blog post over here and for giving us a little bit more background on to such lovely piece of work. I can imagine that site on “How to Handle the Media” would be incredibly helpful and very insightful for those of us who are in constant contact with mainstream media and who would need a rather quick and efficient way of keeping ourselves in track. I have been playing with it already and it looks wonderful with lots of sound and helpful tips on what to do and what not to ;-)) Going to spread it around quite a bit, for sure!
    By the way, would love to read another follow up entry where you can detail you how did it; have got a couple of thoughts on something I would want to do and would be interested.
    Thanks again for putting together such helpful resource and for making it available to all of us! Excellent stuff! 🙂

  2. Hi Luis. You’re very kind. As ever. And I appreciate your feedback.
    I’ll put together as simple a description as possible with lots of links to resources. You might be interested to know that none of it required expensive software. I used TextPad, the GIMP, Irfanview and PowerPoint (although I didn’t really need to use that – it happened to be on my computer.)
    Oh, and I checked it out with the iPad simulator that you so kindly linked me to: http://ipadpeek.com/
    More soon.

  3. Oh, that’s terrific! I guess I could be doing the same thing, then! Only I would need to find the options on the Mac for it. PowerPoint to Keynote and such, but I’m sure it would work all right! Looking forward to that follow up blog post with the resources included. Thanks again, David, for the follow up! Appreciated.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s