La collaborazione virtuosa per un nuovo sito della pubblica amministrazione
Da cittadini italiani è bello vedere come la collaborazione fra Designers Italia e il team comunicazione del Dipartimento per la trasformazione digitale non solo continui, ma proceda spedita nel suo scopo di progettare e realizzare siti che siano da riferimento e pietra miliare per le amministrazioni italiane sia sul profilo progettuale sia sul content design. È palese vi sia una visione chiara e ben definita di come sarà il futuro digitale delle pubbliche amministrazioni, e la strada percorsa sta qui a dimostrarlo.Come professionisti, invece, la soddisfazione nasce dall’aver partecipato alla fase conclusiva del progetto, affiancando il team in questo lavoro importante di implementazione del redesign, mettendo a disposizione la nostra esperienza nell’architettura dell’informazione e nella modellazione di contenuto con CMS headless, oltre che nello sviluppo di siti statici. Le nostre passate collaborazioni con la Pubblica amministrazione sono state fra le più interessanti nella nostra storia decennale, come tutto il software open source in Ruby che abbiamo realizzato qualche anno fa per il Team per la trasformazione Digitale, perciò avevamo altissime aspettative fin da subito!
La scelta del CMS
Il sito precedente era gestito esclusivamente da repository, perciò era sentita la necessità di introdurre l’utilizzo di un CMS che rendesse l’aggiornamento e la scrittura di contenuti più semplice e fluida.Il team ha studiato tutte le soluzioni CMS presenti con cura, ha soppesato e i pro e i contro e alla fine ha deciso di puntare su una piattaforma headless per assicurarsi massima flessibilità, facilità di modellazione e onnicanalità.La piattaforma scelta è stata alla fine DatoCMS; non solo perché si tratta di uno degli headless CMS più completi nel mondo, ma anche perché al 100% italiano.
Visto che DatoCMS è una creatura nata dentro Cantiere Creativo – oltre a usarlo per tutti i nostri progetti, da semplici siti redazionali a raffinate architetture multi-tenant –, la nostra collaborazione è stata fin da subito naturale.
Gli obiettivi del progetto
Il materiale fornitoci dal team di riprogettazione era già molto chiaro, con wireframe, strutture e flussi di navigazione precisi, oltre alle molte risorse messe a disposizione da Designers Italia come il kit di sviluppo per il front end Bootstrap Italia.
Come Cantiere Creativo abbiamo iniziato i lavori con le idee chiare e sufficiente materiale per operare in totale tranquillità.Il primo obiettivo, sotto il profilo dell’architettura delle informazioni, era tradurre la mole di ottimo lavoro del team di riprogettazione nel CMS, configurandolo correttamente, implementando i modelli e personalizzandone l’interfaccia.Il secondo obiettivo era sviluppare un front end che aderisse completamente a Bootstrap Italia, con massima accessibilità e scritto con un codice pulito e mantenibile. Tutto questo assicurandosi di consegnare un lavoro completo, maturo, che lasciasse poi al team di riprogettazione tutta la documentazione e il know-how per iterare e migliorare il progetto senza bisogno della nostra presenza.
100% Bootstrap Italia (e forse di più)
Lo sviluppo si è basato come da richieste sul tema Bootstrap Italia, di cui abbiamo usato fedelmente tutti i componenti per riprodurre con massima precisione i mockup che ci sono stati consegnati. Durante la lavorazione sono emerse alcune esigenze che hanno richiesto di ampliare e personalizzare il tema con componenti custom. Una parte del lavoro si è concentrata per questo sull’assicurarsi che nessuna componente entrasse in conflitto e il progetto rimanesse conforme alle specifiche iniziali. Tutti i componenti creati non solo sono compatibili con Bootstrap Italia, ma potranno essere usati nei prossimi progetti della pubblica amministrazione con poche se non nulle modifiche. Il risultato finale che vedete nel sito online è una delle versioni più fedeli di Bootstrap Italia pubblicate, con qualche personalizzazione che migliora significativamente l’esperienza di navigazione e la sua interfaccia senza tradirne la filosofia.
La ricerca del giusto generatore
Nella fase preparatoria abbiamo analizzato, valutato e presentato al team di riprogettazione i generatori di siti statici che ritenevamo avessero le caratteristiche migliori per il progetto.Gli aspetti che abbiamo considerato più importanti in fasi di analisi sono:
- la flessibilità;
- la facilità di configurazione del sistema;
- la possibilità di avere una preview del risultato in tempi brevi.
La nostra prima proposta è ricaduta su Fermo per la sua velocità nella pubblicazione frequente di una grande mole di contenuti, l’interfacciabilità con le API GraphQL di DatoCMS e la funzionalità di live preview.Dopo un confronto, abbiamo individuato Middleman come la scelta migliore: a fronte di performance minori e alcune feature in meno, troviamo una community open source sicuramente più matura.Le sezioni sono state generate sviluppando HTML e CSS rispettivamente con Slim e SCSS.
Un codice pulito e mantenibile
Tutto il codice Ruby che abbiamo scritto ha seguito alla lettera le regole di formattazione e le convenzioni dello standard Lint, in particolare RuboCop Lint. Per quanto dovrebbe essere lo standard per progetti di qualsiasi dimensione, purtroppo rimane una pratica spesso sottovalutata. Non questa volta: il codice è stato conformato prima di ogni commit, assicurando la massima pulizia e facilità di gestione, manutenzione e comprensione per chi proseguirà gli sviluppi.
Attualmente il codice non presenta errori né avvisi, aumentando efficienza e manutenibilità, anche da team esterni a Cantiere Creativo. Oltre a permettere di consegnare un prodotto senza problemi, ci ha aiutato a ottimizzare e migliorare le performance sensibilmente, come vedremo insieme più avanti.
La rivoluzione headless
L’articolo nel blog di Designers Italia spiega già in maniera piuttosto chiara perché è stata scelta una soluzione headless CMS:
Per rispondere al meglio a tutte le esigenze emerse in fase di progettazione, la scelta lato software si è orientata verso una soluzione CMS di tipo headless, ovvero un sistema che non comprende l’interfaccia di presentazione dei contenuti ma solo una componente back end per la loro creazione. Una tecnologia che, tramite API (application programming interface), permette di disaccoppiare completamente i contenuti dall’interfaccia con cui sono mostrati agli utenti, nonché di consentire la loro distribuzione su una pluralità di piattaforme, a partire da un unico CMS.Oltre alle caratteristiche sopra citate, il sistema individuato offre anche un’assoluta flessibilità editoriale nella creazione dei contenuti, grazie a un insieme personalizzabile di blocchi modulari, che permette un completo controllo dei flussi di lavoro, facilità di utilizzo (e di riutilizzo), insieme ad ampie possibilità di editing collaborativo. La possibilità di modellare il CMS fino al più piccolo dettaglio, inoltre, è una caratteristica che lo rende performante anche in ottica SEO. Una soluzione al momento poco comune nelle Pubbliche Amministrazioni, ma che in prospettiva, soprattutto in un’ottica multicanale, permette di incrementare efficacia ed efficienza del lavoro di redazione.
Il CMS scelto è stato per il team una piccola rivoluzione nel modo in cui operavano su tutti i livelli. Si pensi banalmente alla differenza rispetto alcuni sistemi monolitici, in cui si crea un solo modello per gli articoli e si variano solo gli attributi, con tutte le complicazioni e difficoltà del caso. Grazie al cambio di tecnologia, invece, il team ha potuto creare dieci modelli diversi con solo i campi che servivano grazie ai blocchi modulari.Cantiere Creativo ha prima di tutto aiutato il team di riprogettazione nell’architettura dell’informazione, in modo che tutti i content type individuati fossero tradotti felicemente sulla piattaforma.Siamo poi passati all’implementazione dei modelli veri e propri all’interno di DatoCMS, preparando prima l’ambiente e poi creando tutti i blocchi necessari per i content type delineati.Le viste del CMS sono state ottimizzate per fornire agli editor un’interfaccia uniforme e ben comprensibile — le ottimizzazioni hanno riguardato i menu, i suggerimenti e i raggruppamenti dei campi. Per permettere agli editor di creare contenuto in tutta serenità, abbiamo definito i loro ruoli e permessi e poi creato un sistema di validazione dei singoli campi; ora ogni articolo non può essere pubblicato senza aver passato tutte le necessarie validazioni, precise e granulari quanto serve.
Ricerca personalizzata e tanti piccoli dettagli
Lavorare con gruppi di lavoro come quello di riprogettazione del sito del Dipartimento è sempre piacevole perché si riesce a rimanere coinvolti sia quando si lavora sul generale sia quando si opera nel particolare.Per esempio, lavorare alla funzione di ricerca è stata una bella sfida collettiva, perché abbiamo recepito l’importanza per il sito del Dipartimento di rendere facilmente recuperabili tutte le informazioni contenute, offrendo un’esplorazione chiara anche per argomento.Per questo motivo abbiamo sviluppato un widget ad hoc per le ricerche live di qualsiasi tipo di contenuto a partire dall’indicizzazione effettuata dal CMS.
La funzione di ricerca è stata inoltre modificata per renderla accessibile, compresa la semantica dei risultati, rimanendo al contempo all’interno dei limiti di Bootstrap Italia. Inoltre abbiamo lavorato fin dal content modeling per rendere comoda la ricerca per argomento: per questo motivo tutti i content type hanno attributi come la categoria che aiuta la ricerca senza limitarla al tipo di articolo.Al contempo, i contenuti sono divisi per area di competenza del Ministro per l’innovazione tecnologia e la transizione digitale e del Dipartimento, due entità che meritavano di essere trattate in modo distinto.Il team di riprogettazione è stato attento a tutti i dettagli, e ci ha permesso di fare attenzione a particolari come la gestione dei molti documenti che erano scaricabili dal sito precedente. Oltre a essere numerosi, i documenti erano già linkati sui siti di tanti Enti e non potevamo rischiare di fare un’importazione manuale col rischio di errori nell’indirizzamento.Per questo motivo assieme ai tecnici del Dipartimento abbiamo costruito script di importazione e redirect che salvavano gli indirizzi dei vecchi documenti e li facevano puntate verso i file caricati nel nuovo.
L’importanza dell’Accessibilità
L’accessibilità è un argomento che ci sta molto a cuore e su cui finalmente riusciamo a puntare con una certa costanza nei nostri nuovi progetti.Questo ci ha aiutato molto come approccio, perché i siti della pubblica amministrazione devono fornire una dichiarazione di accessibilità, rispettando requisiti minimi piuttosto stringenti.Il tema Bootstrap Italia è stato disegnato per offrire di base buona parte del lavoro di accessibilità necessario per rientrare nella dichiarazione, ma sapevamo di poter fare di più.Per questo motivo a ogni iterazione abbiamo testato il sito anche con screen reader e tool specializzati d’analisi accessibilità come Arc Toolkit, Axe e Wave, scoprendo dove andare a operare per migliorarla. Per esempio, abbiamo lavorato per assicurarci che tutte le pagine avessero sempre una gerarchia discendente dei titoli (H1, H2, H3 ecc.); se per alcuni modelli è stato semplice, per altri è stato necessario ingegnarsi per assicurare aderenza al design originale e accessibilità. Ci siamo poi assicurati che tutti i link siano accompagnati da una label che fornisce un contesto chiaro e comprensibile del contenuto all’atterraggio. Per velocizzare, per tutti i link che portano fuori dal sito viene generata automaticamente una label che spiegava che l’indirizzo è esterno.Abbiamo aggiunto in tutte le pagine gli skip link, due link raggiungibili con shortcut di tastiera che portano al corpo del testo e al footer e sono i primi due elementi dell’HTML. Questo evita che gli screen reader debbano passare da tutti gli elementi dell’header ogni volta che inizia a leggere una pagina.Il lavoro di test, controllo e modifica è stato lungo e certosino, ma ha portato ai risultati che vedremo qua sotto.
100/100
La collaborazione fra Cantiere Creativo e il team di riprogettazione ha portato a risultati letteralmente perfetti nelle maggiori metriche di valutazione di un sito secondo Google.
Il sito mostrava alla pubblicazione risultati di 100 su 100 in Performance, Accessibilità, Best Practices e SEO su Lighthouse (con fuochi d’artificio compresi!). Secondo i dati raccolti, il First Contentful Paint del sito del Dipartimento per la trasformazione digitale è il 35% più veloce della media dei siti basati su vecchie versioni di Bootstrap Italia pur mantenendo un’ottima accessibilità.
Cosa riserva il futuro?
Per quanto concerne il progetto del Dipartimento per la trasformazione digitale, Cantiere Creativo ha concluso il suo percorso di collaborazione, assicurando di aver lasciato in mano ai talentuosi team digitali tutto il necessario per far crescere il progetto e migliorarlo nel tempo.Tutto il codice è rilasciato sul repo Github ufficiale, così come la documentazione – ora presente sulla wiki – con una panoramica delle scelte implementative sia lato Middleman sia per gli stili.Inoltre abbiamo scritto materiale interno che spiega nel dettaglio alcune funzionalità particolari del CMS sia per gli editor sia per gli sviluppatori, dopo aver fornito supporto e affiancamento nelle prime fasi di creazione di nuove sezioni e content type.Questo è un po’ il sogno di ogni sviluppatore web: lavorare con professionisti di livello assoluto a cui consegnare un prodotto finito di cui si è soddisfatti, sapendo che nelle loro mani potrà solo migliorare.
