Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By LimoenGroen, Gemeente Venlo on
Venlo is a municipality with circa 100,000 inhabitants in the southeast of the Netherlands, near the German border.
Amsterdam-based Drupal company LimoenGroen was asked to create the new website of Venlo based on the amazing “Drupal voor Gemeenten” (Drupal for municipalities) distribution.
Why Drupal was chosen:
Venlo selected Drupal mainly because there was a ‘ready-to-use’ open source distribution available. Open source solutions are the preferred option for Dutch governments and those who select closed source solutions are required to explain why. The DvG distribution offers a lot of the features that Venlo needed, including:
- DigiD V4 authentication using SimpleSAMLphp
- Appointments interface
- JCC GBos/GPlan integration
- Ogone payment integration
- Samenwerkende Catalogi XML feed
- Webrichtlijnen V2 compliant (Dutch WCAG 2.0 accessibility standard)
By using DvG as the starting point we were able to focus on developing the functionality that was not (yet) a part of DvG. This enabled Venlo to launch their new website with a fraction of the budget that would have been required to build the website from scratch and just a few months after closing the tender.
The DvG distribution
The DvG distribution was launched last year as a result from the new Vught.nl website. Vught (the Dutch municipality that started the DvG initiative) and ezCompany (their development agency) decided to open source their new website. Not only the code was shared: even the design and content was open sourced. DvG is built around the top tasks methodology, putting easy and efficient online services front and center.
By sharing the content and functionality of its website with other municipalities, the town of Vught contributes to improved office automation in public administration, while at the same time keeping ICT costs relatively low. "In return, we invite other municipalities to develop their own functionalities, and share these with us and others" says Frank Schaap, ICT policy maker for the town of Vught.
DvG is based on Drupal version 7 and includes functionalities that are required for Dutch local governments. For example, the distribution complies with the country's guidelines for websites and includes the national standard method for authentication and identification (DigiD). It comes with a pre-configured connection to a service provider handling card payments and provides hooks into a proprietary system for guiding visitors and customers. 16 Dutch municipalities already use DvG for their website(s) within a year after its launch, including Almelo, Oude IJsselstreek, Venlo and Haarlemmermeer.
The DvG project resulted in the launch of an official DvG user group. This group consist of end-users and development agencies. The goal of the user group is to fund maintenance of the distribution, coordinating new development, share budget and by doing so lowering the overall web development costs of municipalities.
Describe the project (goals, requirements and outcome):
The primary goal of the project was to replace the website of Venlo with a user-friendly, top-tasks based website using the DvG distribution. The requirement to use DvG was already included in the tender. Not only did they want to use the distribution, they wanted to improve it too. We were asked to share our improvements and bug fixes with the community to make the project even better.
Dutch design agency Freshheads created the graphic design. They were given the task to create a sophisticated design (based on the DvG design) that highlighted Venlo’s character.
The project was executed using the agile project methodology in only 12 weeks of development time (4 sprints of 3 weeks each).
A top task website
Top Tasks Management is a model that says: “Focus on what really matters (the top tasks) and defocus on what matters less (the tiny tasks).” For inhabitants, these tasks include: getting a (new) passport/driver's license, handling moving houses, migration, birth and death, and similar tasks. To do any of these things you have to make an appointment and visit the town hall. That means ‘making an appointment’ is this website's number one task. Other information, like opening hours, news and contact info, is moved deeper/lower within the website.
Some might find a top task website a bit boring, since it has no frills like slideshows, twitter streams and blogs. On the other hand, the website is easy to use and the main tasks like making an appointment can be done within a few clicks. For more information on the idea behind a top task website, read “What Really Matters: Focusing on Top Tasks” by Gerry McGovern.
Outcome of the project
We planned four development sprints to create the website.
Sprint 1 focused purely on implementing DvG and creating a Drupal theme to match the design. We decided to create a sub theme of the theme that came with DvG. Most of the templates and javascripts were already taken care of by the DvG base theme so we mainly focused on writing good stylesheets.
The other three sprints were used to implement the needed system integrations, create an advanced search box, and to make a trash removal module. Although the actual building phase of the project only took 12 weeks – 4 sprints of 3 weeks – the entire project took about 7 months. As in most cases, the runtime of a project like this was largely determined by the process of creating content. In this project, the team took the approach of writing the content using experienced web editors. Their primary focus was to create content that really contributes to the needs of the users and is accessible (according to the WCAG guidelines) as well. The result of the content was discussed with the various departments in the organization. Their role was simple but effective; is the presented content correct and actual. Despite the fact that they only had to react on actual content instead of writing it themselves, these are time consuming processes.
As said, the building phase took 4 sprints of 3 weeks. Each sprint was roughly planned as follows: one week build, one week refinement and one week testing and bug fixing. In close cooperation with the project team the test week was – when appropriate – accompanied by specialists (eg. WCAG specialists). This has led to a situation where (basic) improvements were addressed in an early stage of the project. To enable proper decision making, the product owner was a member of the client’s project team. In our opinion this is mandatory to ensure commitment of the client, quality, delivery and timelines. Extensive use of on-line tooling ensures swift and efficient communication.
The new site has now been live for about one month, so it’s a bit premature to identify a direct switch between on- and offline services. One of the reasons is that the expectation of proper online services, offered by municipalities, is rather low. Similar projects show that it takes about a year before a significant change from offline to online is established. That being said, the initial results are promising. There are practically no complaints and bounce rates are low. A dedicated, well-trained online team is in place to monitor the performance of the current site. There is still work to be done - not only tweaks on the current deploy but also development of other new services.
The new website is fully responsive and accessible and it looks great on all devices. At LimoenGroen we find that the experience for a web user should be equal for everyone, whether you use a desktop, mobile or screen reader. It has been tested with screen reader software by a blind developer and a lot of accessibility improvements have been made.
In terms of build tools we relied on Sass, Gulp, Vagrant, Ansible, Jenkins and Git.
Technical specifications
Drupal version:
Drupal 7.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
Drupal voor Gemeenten
The DvG distributions is shipped with a lot of pre-configured key modules like Ckeditor, Context, Features, Views, Draggable Views, Encrypt, Entity API, Field Collection, Field Group, File Entity, Manual Crop, Role Delegation, Search API and Webform. It also came with most of the needed integration modules that are needed for a municipality website (like DigiD, a governmental platform for personal identification).
Fast Autocomplete
At LimoenGroen everyone gets 10% time for self-improvement, to work on Drupal or to contribute client code to drupal.org. Every two weeks we block a Friday in our agendas to do so: improving the Drupal project and ourselves.
In this time we created a module that mimics the amazing search box on imdb.com. In a nutshell, their search box returns the 5 best results instantly, including a photo and description. It blazingly fast because all results are already cached in JSON files on the file system, so Drupal doesn’t have to perform a search (and a bootstrap) on a search request. We created exactly that, with configurable backends (Drupal core search, Basis title search, Search API and Apache SOLR).
The module has been improved and launched during the project. You can see it in action on the new Venlo.nl website by clicking the search box and perform a search. Use your arrow keys to navigate through the results.
Features override
DvG comes with a lot of predefined features (packaged settings using the Features module). We needed a way to keep these features in their default state even if we change content types, views, permissions and other settings. The Feature Override module comes in very handy here. For every feature module (e.g. DVG News) we created an extra feature that contains feature overrides and our custom configurations (Venlo News). This enabled us to still use our continuous integration workflow using code driven development while being able to change everything we need without issues.
Community contributions:
Creating the Venlo.nl website resulted in several patches and improvements to the DvG project and contrib modules. Venlo created a company page on Drupal.org so that we could highlight all work that’s done for Venlo on their page (minor drawback: it only shows the work in the last 3 months). We use the new attribution feature on drupal.org to attribute a patch or module to Venlo.
During this project we launched 4 new projects on Drupal.org: Fast Autocomplete, Real AES, PBKDF2 key derivation and DvG Appointments. We added about 15 patches to the DvG project. Days after the launch we joined a DvG code sprint in which we shared additional functionality for appointments (DVG Appointments) and helped making several improvements to the DVG theme.
Organizations involved:
Sectors:
Government
