Mockup del sito web realizzato per ecomedia.eco

ecomedia.eco

  • WordPress custom
  • Automatic.css
  • Accessibilità
Vai al sito
Ruolo
Sviluppo tema WordPress su misura
Cliente
Pentapolis Institute ETS
Settore
Informazione ambientale, terzo settore
Focus
Performance, accessibilità, architettura CSS scalabile
Screenshot della homepage di ecomedia.eco con menu di navigazione lateraleScreenshot della sezione hero del sito ecomedia.eco con il titolo "Rapporto Eco Media"Screenshot della pagina interna "Stati Generali dell'informazione ambientale" del sito ecomedia.eco, con elenco di card

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

Il design system del progetto

Palette e tipografia applicate al progetto.

Tocca un colore per vedere dove viene usato nell'interfaccia.

Screenshot annotato della homepage di ecomedia.eco con indicatori numerati sugli elementi del design system

Tipografia — Outfit