Tutti i passaggi per il restyling di un sito web

Sono molti i motivi per cui si può decidere di fare il restyling del proprio sito web: dal semplice rinnovamento estetico, a un cambio di immagine che coinvolge tutto il brand, alla volontà di riorganizzare i contenuti per renderli più seo-friendly e user-friendly. Qualsiasi sia la motivazione, il restyling di un sito web non può non partire da un’analisi e da una progettazione. Sono molti i pericoli a cui si va incontro senza pianificazione, primo fra tutti la difficoltà degli utenti nel riconoscere il sito web e quindi il brand ad esso associato, ma anche la perdita di posizionamento e la conseguente diminuzione delle visite. Vediamo quindi quali sono i passaggi da seguire e come metterli in pratica nella maniera più adeguata.

#1 – Analisi dei competitor

Qualsiasi brand, anche il più affermato, ha dei competitor, dai quali generalmente si può trarre ispirazione, sia in senso positivo che negativo. Analizzare come sono costruiti i siti web dei competitor aiuta a capire quali sono gli errori da evitare, ma anche quali sono i pregi a cui ispirarsi per rinnovare il proprio. L’esempio più banale è: il mio concorrente ha un sito responsive, io no. Questo è sicuramente un pregio (ma direi più un must) a cui fare riferimento.

#2 – Analisi del tuo sito

L’analisi del proprio sito deve prendere in considerazione diversi ambiti, divisi ma affini tra di loro:

• Architettura informativa
• Design
• Usabilità

Architettura informativa

L’architettura informativa è la struttura portante del sito e di certo in corso d’opera può accadere che ci si renda conto che quella originaria non rende più come una volta. Di solito il motivo è adducibile all’aumento dei contenuti. Ad esempio, una start up proporrà un numero limitato di servizi, che nel tempo, si spera, potrebbero aumentare e in quel caso l’architettura informativa del sito andrebbe rivista. Senza articolare nuovamente l’architettura e l’organizzazione del sito, si rischia di aggiungere pagine su pagine, dando così vita a menu multilivello poco usabili e a una navigazione in profondità, controproducente sia lato utente che lato motore di ricerca.

Quando si rivede l’architettura informativa è necessario analizzare le statistiche relative agli accessi del sito web prendendo in considerazione questi dati:

• Pagine che convertono: quali sono le pagine che mi portano più contatti? Con quali pagine vendo di più i miei prodotti/servizi?
• Visite: quali sono le pagine che hanno il maggior numero di visite?
• Frequenza di rimbalzo: ci sono pagine che hanno una frequenza di rimbalzo molto alta? Queste pagine sono davvero utili al mio business?

Da queste valutazioni si evinceranno le pagine che devono essere mantenute così come sono e le pagine che necessitano di un restyling. Molto spesso l’alta frequenza di rimbalzo è dovuta a una mancanza di coerenza tra le query con cui gli utenti le trovano e il contenuto stesso della pagina. Se un utente cerca “installazione antifurto fai da te” e il risultato che clicca tesse le lodi di un servizio professionale di installazione antifurti, farà presto ad abbandonare la pagina e a ignorare tutto il sito. Non è una mera questione di ottimizzazione SEO, ma piuttosto di onestà verso gli utenti. Google premia sempre più i siti che offrono contenuti onesti verso l’utente e che non lo prendono in giro proponendo parole chiave che non corrispondono alla verità.

Design

Il redesign di un sito a volte ha una motivazione estetica, a volte è indispensabile per poter mettere in pratica le modifiche dell’architettura informativa. Oggi, con la crescita della navigazione da dispositivi mobile, il redesign più comune serve a rendere il sito responsive o mobile-friendly. Ci sono poi siti che utilizzano la tecnologia Flash, che fino a qualche anno fa andava molto di moda, ma che adesso è caduta in disuso un po’ per l’avvento dell’HTML5, ma ancor di più perché da mobile un sito in flash non è navigabile. E poi, ahimè, esistono ancora i siti in pieno stile anni’90, intabellati e creati con FrontPage, ma per quelli non è necessario spiegare la necessità impellente di un restyling. Nel ridisegnare esteticamente un sito web bisogna, però, mantenere alcuni punti fermi, quelli che rendono riconoscibile a tutti il sito e il suo brand: logo e colori istituzionali. Cambiandoli si rischia di perdere tutta la brand awarness acquisita fino a quel momento.

Usabilità

L’usabilità va di pari passo con l’architettura informativa e con il design, in particolare va tenuto conto della navigabilità del sito. Gli utenti, per fortuna, sono sempre più smaliziati nei confronti delle nuove tecnologie e stanno imparando seriamente a navigare. Bisogna quindi immedesimarsi nel percorso mentale dell’utente: da dove arriva? Dove vorrà andare? Qual è il modo più veloce per farcelo arrivare? Molto simile è il discorso per lo spider del motore di ricerca, è un ragno capriccioso che non vuole impiegare troppo tempo a trovare ciò che gli occorre. È un discorso molto importante soprattutto per i siti di e-commerce, dove la navigazione può essere molto complessa. È per questo che di solito si prende come esempio Amazon, che in una sola pagina consente di arrivare a tutte le categorie del sito e di filtrarl poi con l’apposito menu contestuale, evitando così la difficoltà di dover navigare decine di pagine piene di prodotti.

#3 – Redirect 301

Ora che hai capito cosa cambiare e cosa mantenere del tuo sito web devi pensare ai redirect, in particolare ai redirect 301. Questo tipo di redirect dice a Google che un certo contenuto è stato spostato in maniera permanente a un’altra URL.

È un’operazione importante da effettuare perché se Google dovesse identificare due pagine uguali, ma con URL diversa, le segnalerebbe come duplicazioni, creando problemi di posizionamento. I redirect 301 sono fondamentali anche per non perdere visite dai referral. Contattare a uno a uno i siti che hanno linkato il tuo, per chiedere loro una modifica, è un lavoro enorme e che richiede molto più tempo dell’impostazione dei redirect 301.

Per i siti web ospitati su server che eseguono Apache (redirect 301  supporto Google), i redirect 301 si impostano dal file .htaccess.

Il modo migliore per programmare i redirect 301 è usare un foglio di lavoro, tipo Excel, e compilare una lista delle URL attuali del sito (colonna A), a cui far corrispondere (colonna B) le nuove URL, derivate dal restyling. In questo modo si avrà una panoramica chiara e strutturata per poter controllare i redirect, anche dopo averli implementati. Per approfondire si può fare riferimento a questaguida di Moz, che tratta la migrazione di un sito web da un dominio a un altro.

#4 – I contenuti

L’analisi del sito avrà anche fatto emergere i contenuti da svecchiare (se non da eliminare). Modificare i contenuti è anche un buon momento per rivedere l’ottimizzazione del sito, oltre che quella per aggiungere contenuti nuovi. Tornando sempre all’esempio degli antifurti, visto che gli utenti cercano “installazione antifurto fai da te”, perché non inserire un contenuto che ne parla? Rimane comunque l’occasione per ribadire che un intervento professionale garantisce risultati migliori. Sempre in tema contenuti, si può pensare alla costituzione di una sezione interna di aggiornamento (una sorta di blog), in cui inserire articoli di interesse generale, ma sempre inerenti al core business, acquisendo così ulteriori possibilità di essere visitati. Last but not least: tenere sotto controllo la duplicazione, mai copiare i contenuti, per nessuna ragione al mondo.

#5 – Tecnicismi

Il restyling di un sito prevede anche una serie di tecnicismi, per i quali servirebbero interi articoli di approfondimento.
Basti sapere che oggi è importante analizzare e se necessario migliorare:

• Velocità del sito: collegata alla navigazione da mobile, ma anche allelinee guida di Google e a una navigazione migliore dell’utente. I siti devono essere leggeri, con tempi di caricamento bassi. Le ricerche dimostrano che gli utenti abbandonano la ricerca se le pagine impiegano più di un secondo a caricarsi da mobile.
• Leggi e norme: per il web, e non molti lo sanno, esistono degli standard internazionali (W3C), mantenersi conformi ad esse consente di avere un sito di qualità.
• Codice: lo spider del motore di ricerca legge solo i testi, non vede tutta la struttura del sito abbellita dalla grafica. È quindi importante rendere la struttura perfettamente leggibile dallo spider, utilizzando i tag adeguati e rendendo leggibili tutti i contenuti.

Una volta che il restyling è stato messo in atto, bisogna controllare più frequentemente che non emergano errori, che non crescano gli errori 404 (in tal caso c’è stato qualche problema con la pianificazione dei redirect 301) e che non ci sia un crollo verticale delle visite. Gli errori 404 sono le pagine che generalmente vengono contrassegnate dalla diciitura “The page cannot be found” (anche se l’ideale sarebbe personalizzarle) e appaiono all’utente quando digita male una URL o quando questa URL viene trovata dal motore di ricerca, ma non è più presente il contenuto ad essa corrispondente nel sito o, infine, se è presente, in un altro sito, un link a un contenuto che non c’è più. Il restyling di un sito, se non strutturato bene, può portare a una crescita esponenziale delle 404. È il motivo per cui in questo articolo è stato dedicato un paragrafo al redirect 301, che serve proprio a evitare tale eventualità.

 

Esempi di restyling

Di seguito alcuni restyling recenti fatti a siti più che noti:

•  Nasa.gov
• NewYork Times (anteprima, visibile solo su invito la versione navigabile)
• (Seo)Moz.com: in questo caso, oltre che di redesign, si parla di migrazione di dominio, rebranding e modifica dell’orientamento aziendale (non più solo tool SEO).