Revamp di un sito: il restyle della veste grafica

Il revamp di un sito web consente di rinnovare la veste grafica mantenendo inalterati  i contenuti e le funzionalità offerte ai visitatori. Oltre ai benefici immediatamente ovvi derivanti da un restyle, come ad esempio una nuova interfaccia grafica più moderna, non vanno sottovalutati altri aspetti positivi di questo approccio.

Un caso pratico: revamp punto per punto

Partendo da un sito web con CMS proprietario, sviluppato nel 2006 con tecnologia HTML4 e menu di navigazione in Flash, andiamo a vedere le modifiche apportate fino ad arrivare al nuovo prodotto.

1: compatibilità

Il sito originale era sviluppato ed ottimizzato per essere fruito da PC, e faceva uso di tecnologia Flash per il menu di navigazione, posto alla sinistra della schermata. In un panorama moderno, a Gennaio 2014 possiamo osservare come la percentuale di consultazione dei siti WEB tramite PC sia scesa al 72%, compensata da un aumento dell’utilizzo di dispositivi mobili, che raggiunge il 28% (rispettivamente 22% per smartphone, e 6% per tablet) [fonte: statcounter.com]. Questo ci porta a prevedere nel restyle di un sito l’utilizzo di un sistema responsive, ovvero in grado di adattarsi automaticamente alle dimensioni del display del dispositivo utilizzato, senza penalizzare l’accessibilità dei contenuti.

Altro punto importante è la tecnologia Flash: utilizzata nel sito originale per l’animazione del menu di navigazione, questa tecnologia non è però quasi più implementata nei browser dei dispositivi mobili. Inoltre grazie ai nuovi standard HTML5+CSS3 non è più necessario ricorrere a Flash per ottenere effetti di animazioni anche complessi. Pertanto nella fase di restyle è bene analizzare se la necessità di utilizzo di Flash è reale oppure se questo può essere sostituito, in maniera da ottenere un prodotto che sia fruibile anche dai dispositivi mobili.

2: navigazione

Sul sito originale la navigazione avveniva tramite un menu verticale visualizzato nella parte sinistra delle schermate. Il trend di web design moderno invece prevede più diffusamente l’utilizzo di un navbar orizzontale posta in alto. Il primo vantaggio di questa soluzione è quello di non perdere spazio per i contenuti, che vengono visualizzati sotto la navbar sfruttando l’intera dimensione orizzontale del display. Inoltre la maggior parte delle navbar moderne si adatta  automaticamente alle dimensioni del display, mostrando un menù ridotto, che può essere espanso premendo un pulsante, in modo da non occupare tutto lo spazio del display più piccoli, lasciando che i contenuti abbiano la priorità sulla navigazione. Quando è necessario, è possibile “fissare” la navbar, in maniera che sia sempre visibile, mentre i contenuti vengono fatti scorrere, oppure è possibile prevedere di avere un rimando in posizione fissa in sovraimpressione in un angolo in basso del display, in maniera che l’utente possa con un click scorrere fino alla posizione della barra di navigazione.

3: elementi più moderni

HTML5, CSS3 e jQuery offrono strumenti molto potenti e flessibili per integrare nelle proprie pagine componenti sofisticati ed usabili, per attrarre al meglio l’attenzione del navigatore, senza che questi risultino ostici da utilizzare.

Uno di questi elementi è il cosiddetto “carousel”, ovvero un’area del sito con scorrimento automatico, spesso corredato di fecce laterali per scorrere alla slide precedente/successiva, e opzionalmente di un piccolo rimando alle singole slide presenti. Questo elemento può essere automatizzato in modo che scorra automaticamente ad intervalli prestabiliti, aggiungendo dinamicità al risultato visuale, e permettendo di mostrare molte più informazioni al navigatore senza che debba procedere con la navigazione.

Altro elemento molto diffuso è il “modal” (consulta l’articolo Popup Lightbox e finestra Modale con JQuery), ovvero una finestra aggiuntiva che si apre sopra il contenuto della pagina, oscurato parzialmente da una “tendina” semitrasparente. Le finestre modali sono utilissime ad esempio per mostrare ulteriori informazioni al navigatore, senza la necessità di aprire finestre pop-up (sempre più bloccate dai browser web). Una volta terminato il suo compito, il modal può essere nascosto, e la fruizione dei contenuti/delle funzioni del sito riprende dal punto in cui si era aperto il modal. Le finestre modal possono essere impiegato ad esempio per mostrare al navigatore i termini di contratto e le policy di privacy utilizzate dal sito, al momento dell’iscrizione.

Altra applicazione del modal è quella di mostrare la versione ingrandita delle immagini di un prodotto, senza la necessità che queste vengano aperte in finestre secondarie, o che sia necessario premere il tasto indietro una volta terminata la consultazione delle singole immagini. In combinazione con jQuery è anche possibile creare uno “slideshow” delle singole immagini, che su PC possono essere “ciclate” automaticamente o con click su frecce a sinistra/destra, o su dispositivi sensibili al tocco, possono essere direttamente trascinate per scorrere.

4: social network

Il web al giorno d’oggi è popolato da una serie molto nutrita di social network, che permettono agli  utenti di pubblicare le proprie preferenze, corredate di ogni genere di commenti o apprezzamenti. Nella fase di restyle di un sito è quindi fondamentale anche prendere in analisi le necessità di integrazione con i social network più diffusi. Generalmente si può iniziare con un’integrazione di base, ovvero prevedere uno o più pulsanti che permettono agli utenti di esprimere il proprio apprezzamento della pagina, o di condividerla sul proprio profilo. Questo primo tipo di integrazione è il più semplice, e solitamente prevede che i social coinvolti siano Facebook, Twitter e Google+.

Qualora emergesse una necessità di integrazione ancora più profonda, è possibile integrare all’interno della nuova versione del sito commenti provenienti dalle piattaforme appena citate, e riferiti ad esempio a prodotti o articoli presenti nel sito.

In sintesi: aspetti da valutare nel restyle di un sito WEB

–          Compatibilità con quanti più dispositivi sia possibile, senza necessità di avere diverse versioni del sito. Utilizzare quindi una piattaforma che preveda il responsive web design

–          Navigazione furba: più spazio ai contenuti, senza però lasciare il fruitore privo della possibilità di accedere al menu di navigazione. Il tasto indietro del browser WEB è presente ed utilizzato principalmente sui PC, mentre sui dispositivi portatili non è detto che sia sempre accessibile o comodo da utilizzare.

–          Elementi moderni: attraggono l’attenzione del navigatore, e conferiscono un look accattivante al nuovo sito.

–          Social network: esistono e sono molto utilizzati. Rappresentano un’opportunità, ma bisogna stabilire caso per caso quanto sia importante e profonda l’integrazione con il nuovo sito.