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

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

%MINIFYHTML88441703c2f3540f08fd4497e79b155b7%%MINIFYHTML88441703c2f3540f08fd4497e79b155b8%

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 justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter