Web Timelines

Edinburgh International Children’s Festival
and IASH

We have recently been helping some local organisations to celebrate some very important milestones. We have been down memory lane, designing and developing web-based, interactive timelines!

This type of project can be challenging, as it does not follow the typical web page format and require a feeling of fluidity and immersion. There is also more than your standard number of pages to work with – for example, we needed a page for each of IASH’s 50 years. As well as that, we also had a large amount of media per page to work with – from downloadable programmes to videos and images, each year had a different level of media from the next. And it was important to handle that media in a way that would be easy for users to engage with as well as fit comfortably on all screen sizes, no matter what amount of media there was.

Edinburgh International Children’s Festival

Firstly, the Edinburgh International Children’s Festival approached us to help mark their 30th anniversary. This was a great project to be involved in, working closely with the team at Imaginate to showcase their incredible 30 years of history, archives and shows, in a new and engaging way.

The biggest challenge, was to come up with a creative solution for the inconsistent amount of copy or images per year – some years had many images, others only had a couple, for example – and it was important that each year to look and feel the same, and look good on every screen size. This was achieved by breaking all the elements up into fixed or flexible sections – the timeline acts as a navigation and is so is fixed to the top of the page, each year is displayed as a banner just below the timeline and is also fixed. All images are displayed in a gallery block on the right hand side of the page, and the copy block on the left, these are flexible blocks depending on the amount of content. They can be split to cover a third, half or two thirds of the page.


Most recently, we worked with IASH (The Institute for Advanced Studies in the Humanities) at the University of Edinburgh to celebrate their 50th year. IASH wanted a web based timeline to commemorate the occasion and a way for its fellows past, present and future to look back on the institute’s long history and achievements.

This again, was a fantastic project to be involved with and one that came with its own set of unique challenges. The biggest one being how to fit fifty years in some form of navigation, elegantly, and easy to read/use on all screen sizes. We achieved this by breaking up the fifty years into decades. A navigation block is fixed to the top of the page and is split into six decades (1970s – 2020s) each decade then has a sub-nav, which shows the individual years. This format then gave us a lot of room to play, visually, and we were able to really show off the colours and patterns evocative of each era.

The overall feel of the website is tactile and cosy, like reading a book. Which is something that was very important to the members of IASH, who think of IASH as a “serene, walled garden” a place to “think and learn, away from the outside world.”

The timeline has been the focal point for IASH’s internal celebratory campaign, since its launch in September 2019. We really enjoyed working on this project, as it allowed us to design and develop with a very unique demographic in mind. This was a site not built to sell or communicate a direct message, but for people to simply interact with and enjoy – something a little bit different for us! “It was an absolute pleasure working on the project this summer with your team” – Dr Ben Fletcher-Watson of IASH.


Throughout the course of both the IASH project and the EICF Imaginate project there were significant technical challenges to be overcome. On both projects, we had to figure out how to import, process and display their content in a way that was engaging, but also functioned well. For example, some years on the timeline had more images than others, so we had to make sure our gallery was responsive enough to cope with this issue – it had to look it’s best regardless of number of images and size of screen. Finally, the Children’s Festival timeline was launched at a parliamentary reception within the Scottish Parliament. The timeline was displayed on large (like, really big) touchscreen monitors, which to our horror were using Internet Explorer to display the new timeline. We had to ensure that the finished timeline was not only touch compatible, but that it functioned well in older browsers.