Responses by 51North.

Background: The Fields of Margraten is actually a remake of a project we did almost fourteen years ago: in 2007, we built a website using Flash, which was the go-to solution for interactive experiences and video content at the time. In 2020, The Netherlands celebrates 75 years of liberation from Nazi occupation, but due to the COVID-19 pandemic, all festivities were canceled. In order to preserve the valuable stories from the old Flash website, we took the existing content and developed a new concept around it. We redesigned and reformatted everything, using a timeline concept to make the experience more interesting and cohesive.

Larger picture: You could say the site is a part of a larger oral history project, keeping alive the stories of people who actually contributed!

Design core: The core feature of the website is the interactive timeline where you can watch and listen to actual eyewitnesses of the end of World War II in Margraten. Although emotionally charged, these stories give us a unique firsthand insight into the lives of these people, who  have now most passed away. These videos are supported by footage from the United States Department of War.

Favorite details: The biggest achievement was giving visitors the feeling they are actually going through an old book or an old archive, discovering untold stories of the events that took place during that time and feeling emotionally connected to them. This is what online storytelling is all about.

Challenges: The project was a tough nut to crack for many reasons: we were on a tight deadline and a limited budget. Furthermore, we had to think of a solution that would work on several devices—the new website is responsive—and we had to upgrade the raw material, which wasn’t of the highest quality.

The first thing we did was get rid of the budget and time constraint; we were lucky to be in a position where we could bend the rules a bit. Our team agreed that this should be a prestige project so all people involved could put in extra hours without a project manager watching the clock. Furthermore, due to the COVID-19 pandemic, some deadlines were postponed, which bought us some extra time.

Navigation structure: As the backbone of the website, the timeline immerses the visitors in the project’s historical atmosphere. We wanted a bold look and smooth transitions between the years. Each year contains information about key-events, eyewitness videos and pictures of the time period.

Technology: We build Fields of Margraten using Nuxt.js, powered by the JavaScript framework Vue.js. The website is statically generated, so there is no real-time CMS or database connection present. At the start of the project, we quickly concluded that a CMS would not be compatible with the timeline, since every year has its own layout and positioning of assets.

For the year-slider background transitions, we used a canvas to draw short video sequences between backgrounds. Initially we used a sprite sequence, but this was way too heavy considering the image sizes. All other animations and transitions were developed using CSS3 and GSAP. For the page transitions, we had to carefully position some of the elements using DOM queries and requestAnimationFrame to make it look like a seamless transition.