After much chagrin about Google Reader’s demise, Feedly became my RSS reader of choice, if not only by the fact that they upgraded fast to meet the needs of Google users. Now I even like it better than Google Reader.
At the same time, Jonathan Richards, the Guardian’s interactive editor, was evaluating what would be needed to create “rich article pages” incorporating all the available media at their disposal.
“There was, I guess, an appetite to see how you might integrate those media, ie the visual and audio media, in a much more tightly integrated way,” said Richards. “So rather than doing things that would simply supplement a text page, how could they perform a more compelling and stronger function in the interactive and I guess that was the challenge that we set ourselves.”
As such, the media was conceived differently right from the start, said Richards. So instead of talking heads and general views of the area, they needed something to cater more specifically to the project’s needs: images and footage that would complement and supplement the traditional storytelling forms.
I’ve experimented recently with ways to create interactive visualizations using HTML5 and CSS3. Starting with a SVG based design, I used HTML/CSS to animate and create transitions for specific items of the visualization. SVG is quite useful, because we can have more control over the design, while establishing classes and id’s for elements that can become alive with CSS3 magic.
Here we have the phenological cycle for the Acacia longifolia, one of the most problematic invasive plant species in Portugal. How do I know that? It’s my current job. And like most scientific subjects, data and good visual elements are aplenty. This information and the images were provided by my colleague Cristina Morais, that included this calendar in her PhD thesis presentation.
I love a well designed calendar or any other time related object (I have deadline issues…)because, in spite of time’s linear, progressive motion, it’s also cyclical (…and hamster syndrome as well). I found some creative, stunning, stylish layouts and the radial stuck with me, since we’re conveying the idea of a cycle, after all. This here and this one too cleared any doubts.
The popup images are activated through a pressbox .js script, placed in the index.html file. Neat and simple.
Even so, my coding skills weren’t enough to create all the actions I wanted, and I failed to make it cross-browser compatible: it only works 100% on Firefox. Chrome and IE do not render the calendar as seen on the video above.
For this project I used Adobe CS6′s Photoshop and Illustrator (which could have been replaced by Inkscape and GIMP, both free powerful alternatives to the Adobe products), and edited a lot of code on Notepad++.
It was an interesting project, and I’m planning to do a few more. If you have any suggestions or ideas send them to me.
They used Flash but it incorporates some navigational devices used with HTML5/CSS3, like vertical scrolling. I got the tip they’re moving into that direction, and sometime soon maybe we’ll see pure HTML/CSS coded interactive narratives.
They incorporated 360º panoramas from the top of the tower and video. It’s simple, cool, I’m not a big fan of their design style but it works pretty well.