De Voorhoede

front-end developers

The Hyperloop is the brainchild of Elon Musk, the person behind Tesla Motors and SpaceX, that enables supersonic transport of humans and cargo. In 2015 SpaceX announced a design competition, in which the TU Delft participates. De Voorhoede developed an ‘experience’-website to support Delft’s effort.

Minister Kamp is being interviewed during the press presentation of the Delft Hyperloop. The ‘pod’ is in the background.
Minister Kamp is being interviewed during the press presentation of the Delft Hyperloop. The ‘pod’ is in the background.

The challenge: performance, accessibility and shine in one

An experience website — in which the visitor is lead through a highly visual story, sometimes with video and animation — is not easy to build. The client, designer and visitor all have high expectations. These websites are the sports cars of the internet. But instead of reimagining a muscle car — raw power, massive weight, gas-guzzling — we’d probably be better off with a different kind of sports car.

Perfectly in line with the Hyperloop’s high velocity and energy-efficient performance, we want to build an experience website that loads quickly, uses little bandwidth and works like an actual website. Lightweight, economical and raw power? The Tesla Roadster of websites, as it were.

The solution: embrace the browser

A proper assessment of the browser’s capabilities is important when building a website like this. Yes, the browser can render animation, work well with large images, and be nimble. But these qualities need to be weighed against one another. We did just that together with the designers of UNITiD.

As an example: for a while, we tried to use a new technique for the Amsterdam–Paris-animation. It proved to be too demanding for the browser. After extensive prototyping we decided to go back to the basics: static images and transitions, that when cleverly combined suggest speed and movement.

Another thing to consider is image quality versus bandwidth. For an experience website the quality of the visuals can not be compromised, but this soon makes the website ‘too heavy’. That’s why we make sure that for every size screen — from smartphone to television — an image with the matching resolution is used. By using the new webp file format, we reward visitors that use modern browsers with even shorter load times.

Five screen shosts of the Delft Hyperloop website

In the end, what can make or break a website is the time it takes for a visitor to be able to interact with it. Visitors tend to lose interest if the wait is too long. We also know that websites like these are not often visited multiple times. So, we opted to make the first load a little heavy but at the same time include all styling, instructions for animation and iconography. Now the website is immediately usable as soon as it renders on the screen.

We let the browser work for us. Lightweight, fast and sturdy: ready for the future.

The result

  • Experience website with rich visuals, maximum 1.5MB in size

  • Optimized for both mobile (with all essentials) and desktop (the full experience)

  • A sense of speed, luxury and future technology is achieved by animation and smooth navigation