Creating a timeline on your site

Today we had a client looking to represent some renovation work on a historic piece of pavement dating back to the 10th Century.

Before we embarked on sketching out the possible layouts for the time line we discussed the data/information that we needed to display to the user so that we could work out the most suitable layout. We then began considering a few of the possible variables around the time line and ended up with the following list ideas/concerns

• Timeline is only for this project currently, but we may want to reflect multiple projects on a single time line
• Although spanning 11 centuries, most of the restoration work for this project has been done over the past 20 years, so we don’t want the timeline to be too heavily weighted on one side
• The timeline needed to be accessible, from IE6(ergh) to smart phones and tablets
• Not Flash only (see above)
• Differentiate between content. Not just between the Projects but also between news stories, press releases, images and video

Once we had a better understanding about the information we were dealing with wet began to sketch out a few possible layouts for the information. Unfortunately (for us) the clients budget is not able to stretch very far, probably because they spend all their money or restoring the old, so we looked to draw inspiration from timelines that already exist…. and possibly frameworks that would assist in reducing the development/implementation time.

Timeline Inspiration

• MIT’s Simile Timeline – a great framework that is pretty easy to put into place.
• tribalddb.nl – These guys use a timeline for their whole website.
• AP’s News Timeline – I really liked the way you can separate the different content on the left, and the color visualisation
• Dipity Timline (see an example below) – Great because you only need to pass it a feed.

Other timeline ideas

We’re still working out which pieces can be taken from these examples and how to fit it together. If you have worked on a timeline in the past or have come across some good examples I’d love to hear about it. I’m in the process of adding comments, but for now you can email me at justincavery (at) gmail (dot) com.

Timeline Example

Dipity Example

SIMILIE Example

This was previously working on the site but for whatever reason it has stopped. While I’m looking at the reason why it stopped I thought I’d just include the code here to get you started.

HTML requirements

Javascript Requirements