revamp di un sito web rifare la grafica

Revamp di un sito: il restyle della veste grafica

Revamp di un sito - restyle della veste grafica
Revamp di un sito – 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.

1. compatibilità: rendere il sito fruibile da più dispositivi possibile
1. compatibilità: rendere il sito fruibile da più dispositivi possibile

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.

2. navigazione: più spazio ai contenuti, senza lasciare l'utente senza menù di navigazione
2. navigazione: più spazio ai contenuti, senza lasciare l’utente senza menù 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.

3. elementi moderni: il carousel mostra più contenuti, scorre automaticamente ed attrae l'attenzione
3. elementi moderni: il carousel mostra più contenuti, scorre automaticamente ed attrae l’attenzione

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.

3. elementi moderni: finestre modali, per non lasciare la pagina corrente e mostrare più contenuti
3. elementi moderni: finestre modali, per non lasciare la pagina corrente e mostrare più contenuti

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.

3. elementi moderni: finestre modali, per mostrare gallerie di immagini
3. elementi moderni: finestre modali, per mostrare gallerie di immagini

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.

4. social network: esempio di integrazione
4. social network: esempio di integrazione “light”, ovvero un ‘like’ button nella barra di navigazione

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.

bootstrap, carousel, css3, facebook like, finestre modali, html5, JQuery, mobile, modal, modal window, pc, responsive, responsive degsign, restyle, revamp, slide, slider, social, social network, tablet


Graziano De Maio

Consulente Seo e Web Designer, si occupa di creazione siti e portali dinamici con Joomla e Wordpress, Restyling e revamp siti esistenti, Social media marketing, strategie di posizionamento sui motori di ricerca. Creazione di Sales Funnel e UX.

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Gdmtech

Via Stefanardo da Vimercate 28
20128 Milano (MI) - Italy

Philosofy

I nostri clienti sono aziende e professionisti che vogliono sfruttare Internet per trovare nuovi clienti, aumentare i loro contatti, vendere i loro servizi e prodotti. Oltre alle normali attività di Web Design siamo  specialisti SEO e Digital Marketing. Ci occupiamo di corsi di web marketing in azienda, sviluppo di e-commerce con Opencart e Prestashop e Woocommerce, siti web in Wordpress e Joomla, migrazioni.

Gdmtech - Web&Seo Agency Milano

Gdmtech Google Review