De Voorhoede

front-end developers

De Hyperloop is een concept uit de hoge hoed van Elon Musk, de persoon achter Tesla Motors en SpaceX, voor supersonisch vervoer van mensen en goederen. In 2015 schreef SpaceX een ontwerpwedstrijd uit, waaraan de TU Delft meedoet. De Voorhoede ontwikkelde hiervoor een ‘experience’-website.

Minister Kamp wordt geïnterviewd tijdens de perspresentatie van de Delft Hyperloop. Op de achtergrond de ‘pod’.
Minister Kamp wordt geïnterviewd tijdens de perspresentatie van de Delft Hyperloop. Op de achtergrond de ‘pod’.

De uitdaging: performance, toegankelijkheid en shine in één

Zo’n experiencewebsite — waarbij de bezoeker aan de hand wordt meegenomen in een verhaal, met flinke afbeeldingen en soms video of animatie — is niet eenvoudig om te maken. De verwachtingen van klant, designer en bezoeker zijn hooggespannen. Het zijn de sportauto’s van het internet. Dan kan je denken aan muscle cars: rauw vermogen, loodzwaar en benzineslurpend. Maar is dat wel de sportwagen die we nodig hebben?

Helemaal in lijn met de pijlsnelle en energie-efficiënte prestaties van de Hyperloop willen wij een experiencewebsite maken die snel laadt, weinig bandbreedte gebruikt en werkt zoals een website hoort te werken. Lichtgewicht, zuinig en toch rauw vermogen? De Tesla Roadster onder de websites, als het ware.

De oplossing: Omarm de browser

Om zo’n website te bouwen is het belangrijk de capaciteiten van de browser goed in te schatten. Ja, de browser kan animaties tekenen, kan goed met grote beelden omgaan, kan snel zijn. Maar het zijn kwaliteiten die je tegen elkaar moet afwegen. Dat hebben we gedaan samen met de designers van UNITiD.

Een voorbeeld: we hebben lang geprobeerd om een nieuwe techniek te gebruiken voor de Amsterdam–Parijs-animatie. Die bleek te veeleisend te zijn voor de browser. Na uitgebreid prototypen besloten we terug te gaan naar de basis: statische beelden en transities, die slim gecombineerd dynamiek en snelheid suggereren.

Een andere afweging gaat over beeldkwaliteit versus bandbreedte. Op een experiencewebsite kan je geen concessies doen aan de kwaliteit van het beeldmateriaal, maar daardoor wordt een website al gauw ‘te zwaar’. Daarom zorgen we dat voor elk beeldformaat — van mobiel tot TV — een beeld van bijpassende afmetingen wordt gebruikt. Bezoekers met moderne browsers belonen we dankzij het nieuwe webp-bestandsformaat met nog kortere laadtijden.

Vijftal screenshots van de Delft Hyperloop website

Wat uiteindelijk een website kan maken of breken is hoe lang het duurt voor de bezoeker de website kan gebruiken. Bezoekers haken af bij te lang wachten. Tegelijkertijd weten we dat een website als dit niet vaak meermaals wordt bezocht. We kozen om daarom de eerste load wat te verzwaren en daarmee alle styling, instructies voor animaties en iconografie mee te sturen. De site is direct bruikbaar zo gauw hij in beeld verschijnt.

We laten de browser vóór ons werken. Licht, snel en robuust: klaar voor de toekomst.

Het resultaat

  • Experience website met rijke visuals, alles bij elkaar maximaal 1,5MB
  • Optimaal voor zowel mobiel (uitgekleed & doeltreffend) als desktop (een volwaardige experience)
  • Gevoel van snelheid, luxe en toekomsttechnologie komt terug door animatie en soepele navigatie