BackEDIAQI EU Website Development in Drupal 9
Project Summary
The Lisbon Council customer needed to implement a website for a European Union project called EDIAQI, which focuses on studying indoor air pollution in European cities. The website was built using Drupal 9 CMS and adhered to the technical guidelines set by the EU.
The EDIAQI project aims to analyze indoor air pollution in European cities through both short-term, high-intensity measurements and long-term, large-scale monitoring. The project's objectives include identifying the sources of pollution, understanding the pathways of exposure, and assessing the health effects associated with indoor air pollution.
Description
The Lisbon Council for Economic Competitiveness and Social Renewal, asbl, is a Brussels-based think tank and policy network.
Founded in 2003 in Belgium as a non-profit, non-partisan association, the organization is committed to making a positive impact through innovative research and fostering meaningful dialogue between political leaders and the general public. Their primary focus lies in addressing the economic and social challenges of the 21st century.
Initial situtation
The team at the Lisbon Council was seeking a partner who possessed expertise in Drupal technology to develop and deploy the website within the project deadline.
The development process starts with an already designed user interface (UI) for the website, created using Figma. The objective is to then develop Drupal templates and modules based on the UI design.
Ediaqi Figma Screenshot before to start the development
Final situation
We have created a new custom template based on a Bootstrap template, to which we have added new functionalities and custom modules.
The final design was developed using SCSS and organized into different files, following a specific naming convention to facilitate future maintenance activities, as per the Drupal standard.
SCSS stands for "Sassy CSS" and is a CSS preprocessor that extends the functionality of CSS by adding features like variables, nested selectors, mixins, and more, to make styling and organizing CSS code more efficient.
During the development process, several custom modules were created to handle social network icons, cookie and privacy pages, styling pages, as well as custom taxonomy and content types.
We allocated time to create templates for news, articles, and other custom post types, adhering to the styling defined in Figma. For testing purposes, we also created an example styling with headings, content, and links.
The styling page of EDIAQI generated by a bootstrap plugin to test the styling of an article
We worked closely with a Lisbon Council project manager to ensure the timely delivery and deployment of the website before the agreed-upon deadline.
The website was successfully published during the last week of March 2022, and you can visit it at www.ediaqi.eu .
Some technical aspects
All the images have been uploaded using the <picture> and <srcset> HTML standards to enhance mobile and responsive capabilities.
Styling has been developed following the mobile-first principles.
We have optimized all images for SEO and utilized SVGs to handle icons and logos.
The entire development process was carried out using Git and the Gitflow workflow, which involved Pull Requests and Drupal configuration. For detailed instructions on configuring Git and a Drupal environment, refer to this tutorial.