Website Port of Amsterdam

The case
Category
Design / UX
Launch date
Challenges
The website contains a lot of information for very different target groups. To support the web editors in addressing all these audiences, a highly flexible back-end has been built based on the Paragraphs module that allows editors to build very flexible page layouts. For example, editors have the freedom to use a photo, a colour, or a video as the background of a page. Another example are the breadcrumbs that can be set per page. We have created a lot of different Paragraph bundles like a decision tree, full backgrounds, floating notifications, rich text, FAQ's and blocks with Views. We configured the WYSIWYG-editor in such a way that the editorial team has complete freedom in creating content. They can create harmonicas, different types of buttons (links) and embed other content (entities and blocks (also Views blocks)). Good examples of this flexibility can be viewed on pages like https://www.portofamsterdam.com/en/business/cargo/liquid-bulk and https://www.portofamsterdam.com/en/shipping/inland-shipping/submitting-your-statement-inland-harbour-dues

Because the website contains so much different content it is very important that the menu gives optimal access to all that content. The user interaction was therefore leading in the implementation of the responsive main menu, which is available in the header, but also in a slightly different form on the homepage. The menu behaves differently for different devices for optimal user experience. The editorial team has complete freedom in configuring the menu.

To show the location, and arrival and departure times of sea vessels, we have created a custom Google Maps integration. Several JSON feeds are imported from the Port of Amsterdam back office and then shown on an overlay on Google Maps. The data can also easily be filtered. For this functionality we have written a custom javascript module for optimal user experience. https://www.portofamsterdam.com/en/shipping/arrivals-and-departures

We have implemented URL Path aliases based on Workbench Moderation revisions. This resulted in applying an URL alias only when the content was approved for publishing. The default implementation of Workbench Moderation does not support this.

For tracking purposes we use Google Tag manager and also track front-end events. For example, we only show telephone numbers after a click, so we can track that action; See: https://www.portofamsterdam.com/en/business/cargo/containers

To show content from the old website that has not been migrated yet we use a transparent proxy that shows the old content on the same domain.
Community contributions
We have contributed several patches to contrib modules:
Internal links https://www.drupal.org/node/2813933
Solr Tag booster https://www.drupal.org/node/2836333
Media https://www.drupal.org/node/2308451
Drupal Like (Flag counter) https://www.drupal.org/node/2716795
Name client
Port of Amsterdam (Havenbedrijf Amsterdam)
Screenshot
Contact information
Name organisation
Triquanta Web Solutions / NR6
Name contact person
Peter Grond
E-mail address contact person
peter@triquanta.nl
Phone number contact person
0650676228
E-mail address invoice
facturatie@triquanta.nl
I agree to the terms of submission
Aan