Aéroports de Montréal - Montréal Airport

For a traveler, an airport can be an extremely stressful and complex place, sometimes even cold and unwelcoming, at a time when he or she would like to really get a sense of the city, country, environment … in other words, the airport has a phenomenal impact on a traveler’s overall travel experience. Consequently, the new Aéroports de Montréal site was designed to be a traveler’s companion, there to provide a helping hand, to direct, reassure, and inspire travelers.

The ADM website features a responsive, high-resolution design to address all use cases and be accessible via all browsing devices. To guarantee flexible and open management, the site was developed on Drupal, an open-source content management platform. The responsive website feature five breakpoints to provide a design adapted to any kind of device used by travelers.

Layout of pages

In order to let the client create complex pages with a lot of differents widgets, we used Panel and Panel_nodes. Layouts for all pages (other than the home page) follow a similar structure: a banner, a left region for a contextual menu, a single-column panel to stack panes, and a right region that contains advertising and extra information.

There are four types of widgets used on the site:

Container containing a list of fields

Containers are a content type that has a “field_collection” field, which permits users to reference other pages on the site. The page editor can choose which template to use to display each instance of the container with a display suite. A container can have two instances with two rendering in different pages.
E.g., Carousel, list of mobiles services, etc...

Forms

These forms, for parking reservations, for example, are not customizable, but the settings can be modified in the control panels.
E.g., Online reservation, SMS alerts, etc...

Complex widgets

Complex widgets are managed by modules. They are not customizable by the client, but do contain some settings in the control panel. They are heavily reliant on JavaScript and Ajax.
E.g., List of departures and arrivals

Views

Some widgets are simply views of data.
E.g., List of direct flights

Commerce page

The goal of the commerce page is to display all the shopping opportunities available at the airport in a way that is quick and easy to browse. The grid of shops lets the user choose from general categories, such as “cafes” or “souvenir shops” rather than look for a particular store.

Users can also use filters to find a type of shop wherever they are in the airport. When they select a specific shop type, they can find all the available branches of that store in a interactive map and get suggestions of other shopping opportunities that they might be interested in.

Interactive map

An interactive map was made available to the user to easily locate all the services in the airport. Using the Drupal content type system, administrators can easily add or remove any commerce or services in the map with a few clicks.

Workflow

The Montréal airport has specific business rules for the maintenance of the site, one of which is an approval system of all content entered in the CMS. Once a site editor updates the website, another editor needs to be able to review changes in context to make sure that the content is correct and that the responsiveness of the site is optimized. All editors will be notified of changes when a page needs review. Workbench, workbench_moderation, and rules solve part of the problem, but due to node reference within Panels and Containers, some custom code had to be made using hook_node_load to see the right revision of the node.