Category Archives: dev

Interactive timeline

Interactive Timeline (personal project)


Late in 2013 Facebook went into overdrive with “lookbacks”, where a whole heap of events from the year were selected ( seemingly at random ), automagically collated, and posted to your own timeline. It got me to thinking about the whole retrospective thing and ways of approaching it for multiple platforms.

With the new website still in early development I also needed  a gap filler, so over the first week of Xmas holidays I slapped the layout and design together for an interactive timeline. I designed for tablet first and built the wireframe so it worked nicely on the iPad in Safari, partly a nod to the soaring stats for handheld surfsouthoz has seen over the previous 12 months, and partly as a teaser for direction the new site would be taking.  

With the container and 5 views working reasonably well after  a few days, I turned to the facebook page for content. Some months were better than others, but all in all it was surprisingly easy to cherry pick a few major happenings from each month.  It probably took a week or so to collate it and whittle it down, but I finally got it all in.   Last steps were yoinking the slider /scroller I’d built for a recent project and adding Swipe events.  

To my amazement I made my new year’s eve editorial deadline, and foisted the timeline on’s hungover and dehydrated audience  on New Year’s day. It was pretty well received and got some good viral Facebook share traffic, and the time on page from Analytics indicated people were actually spending some time digging through the pics and video.

I’ll definitely try and do another for 2014, but I’m secretly hoping I’ll be able to incorporate it into the relaunched design. 

But let’s not get ahead of ourselves…