Here at LeanPanda, we were delighted to see the new website of the Department for Digital Transformation of the Prime Minister’s Office go online last 4 February. It made us proud as both citizens and professionals.
As Italian citizens, it's great to see Designers Italia and the communication team at the Department for Digital Transformation further their goal of designing and creating websites that set a standard for other Italian administrative bodies as an exemplar of design and content conception. There is a clear and well-defined vision of what the digital future of the Italian public administration will look like, and this project gives us a glimpse of it.
As professionals, on the other hand, our satisfaction comes from having participated in the final phase of the project and having contributed with our expertise in information architecture, content modeling with headless CMSs, and static website development.
We had already collaborated with the Italian Public Administration in the past and had, in fact, developed open-source Ruby software a few years ago for the Digital Transformation Team. These were some of the most rewarding collaborations in our decades of experience in the field, so we had high expectations from the start!
Choosing the right CMS
The previous site was managed exclusively with repositories, so there was a strong need for a CMS that would make the process of updating and writing content easier and smoother.
The public administration team studied all the CMS options at their disposal, carefully weighing the various pros and cons. In the end, they decided to go for a headless platform to ensure maximum flexibility, ease of modeling, and omnichannel capabilities.
Their platform of choice was DatoCMS because it is one of the most complete headless CMS options out there, and it is also 100% Italian.
Since LeanPanda incubated DatoCMS — in addition to using it for all our projects, from simple editorial sites to refined multi-tenant architectures — our collaboration was natural from the start.
The objectives of the project
The material provided to us by the redesign team was already very well defined, with precise flowcharts, wireframes, and structures, in addition to many resources made available by Designers Italia, such as the Bootstrap Italia front-end development kit.
As LeanPanda, we started working with clear ideas and enough material to operate in total peace of mind.
From the perspective of information architecture, our first objective was to translate the redesign team's excellent work into the CMS, configuring it correctly, implementing the templates, and customizing the interface.
The second objective was to develop the front-end using all the components and specifications of Bootstrap Italia, guaranteeing full accessibility and implementing clean, maintainable code.
We delivered complete, mature work that included all the documentation and know-how needed for the redesign team to build and improve upon the project in the future without our help.
100% Bootstrap Italia
We faithfully used all the components from the Bootstrap Italia theme, with the goal of creating a 1:1 pixel-perfect reproduction of the mockups delivered to us.
Some of the project’s elements required extending the theme with custom components. Hence, part of our work focused on making sure that none of these custom components conflicted with the basic theme and that the design remained consistent with the initial specifications.
All the components we created are compatible with Bootstrap Italia, so they can easily be reused in future Italian public administration projects, with minor changes, if any.
The final result is one of the most faithful implementations of Bootstrap Italia published up to now, with some customizations that significantly improve the browsing experience and the site’s interface without betraying its design philosophy.
The search for the right generator
In the preparatory phase, we analyzed, evaluated, and presented to the redesign team the static site generators that we felt had the best features for the project.
The aspects that we considered most important in the analysis were:
- flexibility;
- ease of configuration of the system;
- the possibility to have a preview of the result in a short time.
Our first choice fell on Fermo for its remarkable speed when building websites with many records, its native support for the DatoCMS GraphQL API, and the live preview functionality.
Together with the public administration team, however, we decided to pick Middleman, since although it has lower performance and fewer features than Fermo, its open-source community is certainly more mature.
We generated all the website sections developing HTML and CSS with Slim and SCSS, respectively.
Clean and maintainable code
We followed the formatting rules and Lint standard conventions to the letter, fully passing RuboCop Lint checks.
As much as it should be the standard for projects of any size, full compliance with a linter remains an often-overlooked practice, unfortunately. In this case, the code’s compliance was checked before each commit, ensuring maximum cleanliness and ease of management, maintenance, and understanding for those who will continue developing the codebase.
Currently, the code has no errors or warnings, increasing efficiency, and maintainability, even by teams other than LeanPanda.
In addition to allowing us to ensure that we were delivering a product without any problems, this scrupulous use of linting helped us to optimize and improve performance significantly, as we will see later.
The headless revolution
The blog post in Italian by Designers Italia already explains quite clearly why they asked for a headless CMS solution [translation is ours]:
To best meet all the needs that emerged during the design phase, our choice of software tended towards a headless CMS solution, i.e., a system that does not include the content presentation interface but only a back-end component.
This API (application programming interface) technology allows to completely decouple contents from the interface shown to users and to distribute content on a plurality of platforms, starting from a single CMS.
In addition to the above-mentioned features, the chosen system also offers absolute editorial flexibility in content creation, thanks to a customizable set of modular blocks, which allows complete control of workflows, ease of use (and reuse), along with extensive collaborative editing possibilities.
Moreover, the fact that the CMS can be shaped down to the smallest detail enables it to perform well even in terms of SEO. Headless CMS is a solution currently not very common in Public Administrations, yet it has the potential to enhance the effectiveness and efficiency of editorial work, especially in a multi-channel future.
DatoCMS was a small revolution for the public administration team, changing how they operate on all levels. The way it differs from standard monolithic systems, where a single template with different attributes constrains your modeling capabilities, is quite stark: thanks to DatoCMS's modular blocks, the team created ten different models with only the fields they needed.
LeanPanda first helped the redesign team to implement a suitable information architecture so that all of the identified content types could be seamlessly mapped onto the platform. Then we implemented the actual models within DatoCMS, first preparing the environment and then creating all the necessary blocks for the outlined content types.
We optimized the CMS views to provide editors with a uniform and well-understood interface; optimizations included menus, tooltips, and field groupings.
To allow editors to create content with peace of mind, we defined their roles and permissions and then created a system for validating individual fields; now, no article can be published without going through all the necessary validations, which are as precise and granular as they need to be.
Custom search and smaller details
Working with teams such as the Department's website redesign team is always enjoyable because you can focus and have engaging conversations, whether they require a high level of understanding or not.
For example, working on the search function was a nice collective challenge because we understood how important it was for the Department's website to enable users to retrieve information in a matter of seconds. Content also needed to be easily retrievable by topic.
For this reason, we developed an ad hoc widget for live searches of any content starting from the indexing performed by the CMS.
The search function was also modified to make it accessible, including the results' semantics, while remaining inside Bootstrap Italia's specifications.
We also worked to make it convenient to search by topic, keeping this goal firmly in mind even in the content modeling phase. For this reason, all content types have attributes, such as "category," that help the search without limiting it to a type of article.
At the same time, content is split into two different areas of responsibility: the Minister for Technology Innovation and Digital Transition, on the one hand, and the Department, on the other—two different entities that deserve to be treated separately.
We also helped to manage the many downloadable documents that were present on the previous site. Besides being numerous, the documents were already linked on many organizations' websites, and we could not risk doing a manual import and maybe breaking inbound links.
For this reason, together with the Department's technicians, we built the import and redirect scripts that saved old documents' URLs and redirected them to the new files.
The importance of Accessibility
Accessibility is a topic dear to our hearts, on which we have started to focus consistently on our new projects.
This commitment on our part was crucially important for this project because public administration websites must provide a statement of accessibility, respecting rather stringent minimum requirements.
The Bootstrap Italia theme was designed to offer much of the basic accessibility work needed to fall within the required limits, but we knew we could do more.
That's why at each iteration, we also tested the site with screen readers and specialized accessibility analysis tools like Arc Toolkit, Axe, and Wave, discovering where to go to improve our accessibility rating.
For example, we ensured that all pages always had a descending hierarchy of titles (H1, H2, H3, etc.). This was an easy task for some templates, while in other cases, it was necessary to work hard to ensure both theme consistency and accessibility.
We ensured that all links were accompanied by a label that clearly describes the content's context upon landing. We also guaranteed that the labels for all outbound links are automatically generated, explaining that the address is external from the get-go.
We added two skip navigation links to all pages, reachable from keyboard shortcuts, that lead to the text's body and the footer, respectively, and are the first HTML elements. This prevents screen readers from going through all the header elements every time they start going through a page.
The work of testing, checking, and editing was long and painstaking, but it led to the results we'll see below.
100/100
The website scored 100 out of 100 in Performance, Accessibility, Best Practices, and SEO on Lighthouse (fireworks included!).
According to the data collected, the First Contentful Paint of the Department for Digital Transformation site is 35% faster than the average site based on older versions of Bootstrap Italia while maintaining excellent accessibility.
What does the future hold?
The project had a happy ending indeed, and we provided the talented Digital Team everything they need to autonomously build on the project and improve upon it over time.
All the code is released on the official Github repo and in the documentation — now present on the wiki — with an overview of the implementation choices we made for Middleman and in terms of styling.
We also wrote internal material explaining some CMS features to editors and developers, and we provided support and coaching in the early stages for creating new sections and content types.
This project fulfilled every web developer's dream: to work with top-notch professionals to whom you can deliver a finished product that you are truly satisfied with, knowing that in their hands, it will only get better.
