Wagtail Space 2025
What is Sites Faciles
- A pre-configured Wagtail installation to create websites for the French central administration, using the French Government Design System (DSFR)
- Created and operated by France's Interministerial Digital Directorate (Direction interministérielle du Numérique or DINUM), which is tasked with developing and overseeing the implementation of France's digital strategy
- Sites created with it are by design complient with legal requirements regarding security, accessibility, design…
- It improves autonomy for the communication services of various administrations
The Team
Sylvain Boissel
Dev – Sites Faciles
Lucie Laporte
Dev – Sites Faciles
Lucien Mollard
Dev – Sites Faciles
Chaïb Martinez
Agile coach – Sites Faciles
Juliette Dixmier
Product manager and user support – Sites Faciles
Florent Lienard
Designer – Sites Faciles
Timeline Étape 4 sur 4
- 2022
- French president Emmanuel Macron creates the "Conseil National de la Refondation", whose website is created with Wagtail, to free the communication service from having to make PRs to change the site contents.
- 2023
- Other teams start to use this Wagtail-based, DSFR-powered CMS and a first dev is hired to maintain and improve it. The DINUM decides to remake its own website with Sites Faciles.
- 2024
- Faced with growing demand, the DINUM is recruiting a team to lead the development and deployment of what is now called Sites Faciles.
- 2025
-
A "SAAS" tool is created to make deployment of new sites easier.
The focus for improvements is on accessibility, security and improving the admin UX.
Sites Faciles is a good engine for…
Institutional websites
Intranet or extranet websites
Example : (Ouvre une nouvelle fenêtre) Extraqual
Landing pages
Example : (Ouvre une nouvelle fenêtre) Portail RSE
Blogs
Example : (Ouvre une nouvelle fenêtre) Résorption Bidonvilles
Some key figures
Currently about 50 websites
More than 1 million Euros of public money saved
About 500k visits per month in total
The French Government Design System (DSFR)
- A design system to unify French administration websites
- Focus on accessibility and improvement of the user experience
- Makes dev easier and more consistent across different services
- About 50 different components along with a grid, official fonts, two color schemes, an icon pack, pictograms, standard pages examples, etc.
- Included in Sites Faciles through the Django-DSFR library
Integrate the DSFR into Wagtail
- A grid system and many components to include as StreamBlocks or StruckBlocks inside a streamfield, some with many parameters
- Some nested inside others, which provide challenges, UI-wise
- Must work in light and dark mode
- Must be easy to use for editors
Block example: the grid system
class GridPositionStructValue(blocks.StructValue):
def grid_position(self):
position = []
horizontal_align = self.get("horizontal_align", None)
if horizontal_align:
position.append(f"fr-grid-row--{horizontal_align}")
vertical_align = self.get("vertical_align", None)
if vertical_align:
position.append(f"fr-grid-row--{vertical_align}")
return " ".join(position)
class ItemGridBlock(blocks.StructBlock):
column_width = blocks.ChoiceBlock(
label=_("Column width"),
choices=GRID_3_4_6_CHOICES,
default="4",
)
horizontal_align = blocks.ChoiceBlock(
label=_("Horizontal align"), choices=GRID_HORIZONTAL_ALIGN_CHOICES, default="left", required=False
)
vertical_align = blocks.ChoiceBlock(label=_("Vertical align"), choices=GRID_VERTICAL_ALIGN_CHOICES, required=False)
items = ColumnBlock(label=_("Items"))
class Meta:
icon = "grip"
template = "content_manager/blocks/item_grid.html"
value_class = GridPositionStructValue
Paris (Louvre)
Paris (Eiffel Tower)
Saint-Malo
Dinan
Bordeaux
More than just streamfields and components
Website Configuration
Allows site-wide config per DSFR rules
Icon picker
Graphical icon picker for the DSFR icons
ProConnect
Centralized auth system for public servants
Strengths
- Makes easy to create compliant pages: very good web performance (98% on LightHouse), better accessibility score than most french government websites and high level of security per the French National Cybersecurity Agency (ANSSI).
- Versatile, can implement simple pages or with very complex structure
Challenges
- Admin side, the UI can be overly complex
- Still requires quite a tall step for editors, who are not web professionals
- Very tied to the DSFR, hard to adapt to other design systems/CSS frameworks
What are we working on ?
- Simplification of the page editor interface
- Creation of pre-builded sections to create new pages easily
- Rewriting the menus system using a streamfield
- Review images fields to assist editors in filling them according to the component (good ratio, good width..)
Example: (Ouvre une nouvelle fenêtre) new headers with pre-filled values
What are we would like to improve and contribute in Wagtail community?
- Improving internationalization
- Working on the user interface
- Create a new link chooser
The Future of Sites Faciles
- Change of strategy: participate in digital commons rather than build a product
- Turn it into a library (wagtail-dsfr ?) and change it to allow the use other design systems for other levels of the French administration (like local authorities or universities)
- Encourage the creation of a community of users inside the French administration
- Create a network of experts that can implement this new wagtail-dsfr plugin