
ecomedia.eco
- WordPress custom
- Automatic.css
- Accessibilità
- Ruolo
- Sviluppo tema WordPress su misura
- Cliente
- Pentapolis Institute ETS
- Settore
- Informazione ambientale, terzo settore
- Focus
- Performance, accessibilità, architettura CSS scalabile



Il progetto
La realizzazione della piattaforma istituzionale Ecomedia, l’hub promosso da Pentapolis Institute ETS dedicato all’informazione ambientale in Italia, ha richiesto la creazione di un ecosistema digitale capace di unire autorevolezza editoriale e innovazione tecnologica. L’obiettivo principale era organizzare una complessa mole di contenuti eterogenei — tra rapporti annuali, rassegne stampa, academy e news — senza appesantire la navigazione, garantendo al contempo performance d’eccellenza e totale accessibilità (a11y). Per vincere questa sfida, ho sviluppato un tema WordPress su misura ad altissime prestazioni, costruendo l’intera architettura in modo scalabile grazie al framework Automatic.css (ACSS) combinato al potente site builder Etch. Questo approccio utility-first mi ha permesso di creare spaziature e tipografia perfettamente fluide per un layout moderno, impreziosito da interfacce Bento Grid ed eleganti effetti glassmorphism che donano profondità visiva senza sacrificare la pulizia istituzionale.
Sul fronte dell’interattività, ho scelto di evitare pesanti librerie esterne, scrivendo codice Vanilla JavaScript custom per gestire con la massima accessibilità la navigazione da tastiera, il focus trapping e le lightbox multimediali. L’esplorazione degli archivi è stata resa coinvolgente e continua grazie a un sistema di caricamento asincrono “Load More” basato sulle REST API via AJAX, che inserisce i nuovi articoli senza ricaricare la pagina. Infine, l’ottimizzazione lato server con LiteSpeed Cache e la cura certosina della struttura semantica e dei dati Schema tramite SEOPress assicurano tempi di risposta fulminei e un posizionamento SEO impeccabile, restituendo un portale editoriale solido, inclusivo e all’avanguardia.
Cosa ho fatto, nel concreto
Architettura CSS Scalabile
L'intero ecosistema visivo si basa sul site builder Etch e sulle fondamenta di Automatic.css (ACSS). Questo approccio ha permesso di costruire interfacce Bento Grid e UI in stile glassmorphism su una tipografia perfettamente fluida, garantendo un codice pulito e un design rigoroso ma contemporaneo.
Accessibilità e UX Fluida
Zero librerie pesanti: ho scritto codice Vanilla JavaScript su misura per gestire il menu, le modali e garantire la totale navigazione da tastiera (focus trapping). L'esplorazione degli archivi è resa dinamica e continua da un sistema di caricamento "Load More" asincrono tramite AJAX e REST API.
Prestazioni e SEO Editoriale
Per supportare le esigenze di un portale d'informazione, ho spinto al massimo le performance lato server configurando LiteSpeed Cache per un TTFB fulmineo. L'indicizzazione dei contenuti e i dati strutturati (Schema.org) sono stati curati maniacalmente grazie a SEOPress.
Il design system del progetto
Palette e tipografia applicate al progetto.
Tocca un colore per vedere dove viene usato nell'interfaccia.

Tipografia — Outfit