Restyle Lega del Filo d'Oro

La richiesta

Concluse le attività più tecniche del portale (leggi qui), la Lega del Filo d'Oro ci richiede di rivisitare il design di alcune delle aree principali del sito,  in concomitanza con l'anniversario dei 50 anni di attività.
L'obiettivo, raggiunto è quello di aggiornare la comunicazione, sottolineando il 50esimo compleanno della Lega, con un nuovo layout maggiormente efficace ed un'area dedicata all'interazione con i lettori.
La sfida è stata quella di mantenere, al contempo, quei punti di accesso ai contenuti e quei percorsi di conversione agli obiettivi webanalytics già esistenti, senza variare le operazioni redazionali di content management. 
 
 

Il progetto

Le aree che hanno interessato il restyling sono state:
  • Homepage
  • Chi siamo
  • Chi aiutiamo
  • Come sostenerci
  • Menu di primo, secondo, terzo e quarto livello
  • Componenti comuni al sito (header, footer, call to action).
Mai come in questo caso le immagini valgono più di mille parole.
Ecco come si presentava l'homepage prima del nostro intervento:
 
Ed ecco l'Homepage dopo il restyling:
 
E' ben visibile la differenza tra il "prima" e "dopo". L'Header e il Menu principale hanno avuto un'importante ridisposizione degli elementi, garantendo maggiore visibilità alla Call to Action "Dona ora" , che ora presenta un cuore "pulsante".
Abbiamo optato per uno slider singolo che dia più importanza al singolo post. Altra parte importante dal punto di vista comunicativo e tecnologico è l'Area Testimonianze, nuova sezione nata per raccontare i 50 anni di storia della Lega, a mo' di timeline. 
 
 
Il layout e le funzionalità di questa area è flessibili e permette sia la semplice consultazione che l'interattività diretta con gli utenti, che possono commentare le storie esistente oppure inviare il proprio racconto.
Il sito istituzionale ha come punto focale quello del contatto con i sostenitori e della diffusione delle attività associative verso chi ancora non conosce questa realtà. Tenendo conto di questo importante obiettivo, abbiamo dato nuova vita ai blocchi News, Social feed e Presenza sul territorio. Inoltre è stato implementato un footer con un layout più ampio rispetto a quanto presente sinora, per dare spazio all'iscrizione Newsletter, ai Trilli nell'Azzurro (giornalino bimestrale) ed alla ricerca.
 
PAGINE DI PRIMO LIVELLO
Ogni menu di primo livello apre una pagina dedicata, rivista nel layout, che fa da cappello introduttivo ad una sezione con contenuti strutturati. Sempre mantenendo i componenti all'interno della pagina, abbiamo optato per aprire queste sezioni di Primo Livello con dei testi introduttivi rappresentati da oggetti circolari, che richiamano il concetto di "filo" già espresso nel logo dell'associazione.
 
 
Tutti gli elementi visivi hanno assunto quindi una forma tonda, più accattivante, con un animazione sul mouseover.
In tutti i primi livelli è stato introdotto un "prefooter" sempre presente, che promuove le varie modalità per sostenere la Lega del Filo d'Oro.
 
COMPONENTI INTERNI E COMUNI A TUTTO IL SITO
Il menu in spalla è stato rivisto completamente, integrando effetti javascript per migliorarne l'usabilità.
Nelle pagine di dettaglio, i componenti del "Come Sostenerci" sono stati ricollocati in spalla per essere sempre presenti anche nelle aree più profonde sito, in due modalità: "estesa" e "compressa".
 
 
A LIVELLO TECNICO: LE OPERAZIONI SUL FRONTEND
Tenendo sempre ben a mente i layout specifici presenti per le versioni accessibili e senza snaturare la tecnologia Drupal 6 al cuore del portale, abbiamo sviluppato la nuova versione del sito introducendo alcuni elementi tecnici innovativi.
Innanzitutto, con l'obiettivo di mantenere la coerenza necessaria, la struttura css del portale è stata implementata seguendo un metodo di nomenclatura semantico derivato da smacss (http://smacss.com/) e BEM  (https://bem.info/).
Per riuscire agilmente nell'operazione siamo ricorsi all'utilizzo di un preprocessore css, che ha reso immediata l'implementazione della modularità necessaria a rendere il nuovo prodotto manutenibile e replicabile.
L'implementazione di fallback per i browser più datati è stata ottenuta mediante l'implementazione estesa di mixin, compilati in css ad Hoc anzichè ricorrere a librerie JS che implementano layer di compatibilità.
Le linee guida UI sono state implementate tramite transizioni ed animazioni css, atte a rendere il prodotto graficamente piacevole e supportare in maniera seducente e convincente il messaggio veicolato.
Il layer di theming di standard Drupal 6 ha visto sparire la maggior parte delle proprie classi non semantiche e di wrapper non funzionali, a favore di una struttura più snella e leggibile.
Lato javascript è stato eseguito un massivo refactoring del codice, per rimuovere quanto più possibile  la necessità - imposta da alcuni moduli - della convivenza di differenti versioni di jquery e implementare alcuni plugin custom per la gestione dei redirect alle varie landing page esistenti. In particolare, l'Area Testimonianze è quella con la più alta interattività.