Surf the Dream A discourse of links and articles from Justin Avery

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

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

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


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


Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.