Operazione restyling di un sito web: perchè è così importante

Il restyling di un sito web consiste sostanzialmente nel rinnovare un sito web esistente con interventi mirati che vanno dai piccoli ritocchi alla creazione di nuove sezioni, fino ad un completa riprogettazione dell’intero layout del sito.

Oggi il 60% degli utenti navigano da mobile e questa percentuale è destinata a salire, ciò significa includere nella nostra operazione di ristrutturazione interventi che siano responsive e permettano quindi una compatibilità pieni con tutti i sistemi mobile e più in generale con tutti i device di navigazione.

Design e funzionalità devono essere i due principi cardine per il restyling di un sito web al fine di ottenere un layout moderno ed attraente, che si sposi bene con tutte le funzionalità comprese all’interno del raggio d’azione. L’utente non solo deve sentirsi a casa, ma deve volersi e potersi trattenere, trovare ciò che cerca, restare incuriosito da novità e bonus, essere invogliato a ritornare e magari a condividere ciò che trova.

Detto questo, permettimi una semplice riflessione:

Se il tuo sito non rispecchia l’immagine del tuo prodotto è il momento di aggiornare il suo aspetto.

E’ importante per me fare questa precisazione perché quando si progetta il restyling di un sito web si deve sapere non solo da dove partire ma anche dove si vuole arrivare.

Il sito web di un professionista o di un’azienda o di qualunque altra categoria, deve sempre rispecchiare il prodotto che rappresenta.

Per prodotto non si intende necessariamente un qualcosa di fisico e tangibile, difatti le proprie competenze messe a disposizione di un certo pubblico possono rappresentare un prodotto, il tuo prodotto. Lo spazio web di uno studio dentistico deve concentrarsi sui servizi a esso legati e farlo al meglio, i testi devono essere scritti in modo da essere compresi da tutti ma nello stesso tempo devono identificare lo studio che rappresentano. Lo stesso discorso si deve fare con le immagini e quindi con l’intera parte visual, perché queste devono essere ottimizzate per il web, pesare poco in termini di kb o di byte e performare dal punto di vista comunicativo. Attinenza ed efficacia, si parte da qui.

I vantaggi del restyling di un sito web ben progettato sono evidenti. Più è attraente il tuo sito, più attenzione otterrà da parte dei visitatori, che diventeranno i tuoi clienti o semplicemente ti seguiranno se hai i prodotti e/o i servizi che stanno cercando. Un sito web attraente e aggiornato quotidianamente aumenterà anche la percentuale dei visitatori di ritorno, cioè gli utenti che sono già approdati sul tuo spazio web e che decidono di tornarci.

Un altro importante vantaggio che viene dal restyling di un sito web ben sviluppato è l’aiuto che questo può dare ai motori di ricerca per posizionarti sempre più in alto in funzione delle focus key del tuo sito (le parole chiave di ricerca più in linea con il tuo prodotto). Migliore è il page ranking (quindi il posizionamento) maggiore sarà il numero dei tuoi visitatori.

Ecco un ordine di interventi che, tendenzialmente, risulta appropriato quando si progetta il restyling di un sito web:

#1 COMPRIMERE E OTTIMIZZARE LE IMMAGINI

Le immagini sono obsolete? E’ il momento giusto per sostituirle con altre più appropriate, capaci di comunicare meglio ogni specifico messaggio e di veicolare al massimo gli obiettivi che ti proponi di raggiungere e superare. Devono essere leggere e ottimizzate per il web altrimenti rischi di essere penalizzato/a perché il caricamento di ciascuna pagina si rallenterebbe. Uno strumento come PageSpeedInsights ti permette di conoscere quanto pesano le pagine del tuo sito suggerendoti cosa migliorare (e quindi quale azione compiere) per rendere le pagine più leggere possibili.

Ecco quindi alcuni programmi/tools che puoi utilizzare per raggiungere quest’obiettivo, prima però una piccola premessa sui formati delle immagini più utilizzati per il web:

• JPEG: è in assoluto il formato più utilizzato nel web assieme al .png, perchè ti grantisce una certa leggerezza;
• PNG: anche quest è un formato molto usato e altrettanto leggere, ma differentemente dal jpeg supporta anche la trasparenza e quindi può essere utilizzato quando hai necessità di inserire immagini senza uno sfondo;
• GIF: è il formato meno usato dei tre, anche se negli ultimi anni sta prendendo sempre più piede ed è sempre più presente, e viene solitamente adoperato per le immagini animate.

Ecco una serie di programmi utili per comprimere le immagini per il web:

1. FILEminimizer Pictures: ti garantisce una compressione di foto e immagini fino al 98%, e questo usando  una tecnica di ottimizzazione “nativa” capace di preservare la qualità dell’immagine caricata. Contrariamente alla tecnologia di « zip », und decompressione successiva non è più necessaria.

2. Riot: un interessante tool leggero e gratuito che ti permette una doppia visualizzazione dell’immagine in fase di compressione. Sarete in grado di controllare la compressione, il numero di colori, le impostazioni dei metadati e molto altro ancora, e potrete naturalmente selezionare il formato di immagine (JPG, GIF o PNG) per il file di uscita.

3. SuperGif è un tool grauito che ti permette di ottimizzare le tue immagini animate fino al 50%, che, trattandosi del formato gif, è un risultato niente male. Valido sia per Windows che per Mac OS, possiede un’interfaccia molto semplice e grazie a un semplice trascinamento del file con il mouse si mette subito al lavoro. Esiste anche una versione a pagamento ma quella free opera già molto bene facendo il suo lavoro un’immagine per volta.

4. TinyPNG è un ottimo tool web based che ti permette di ottimizzare le immagini png senza far perdere al’immagine originale la sua qualità. Il suo funzionamento è molto semplice e intuitivo.

5. Online Image Optimizer è un altro tool che lavora online e si rivela molto utile tanto per l’ottimizzazione quanto per la compressione di un’immagine. Può caricare file fino a 2,86 mb e puoi decidere se convertire in un altro formato l’immagine ottenuta. Il funzionamento è semplice, basta inserire l’url dell’immagine che vuoi comprimente nell’apposito spazio oppure caricarla direttamente sul sito.

Ho volutamente omesso di inserire Adobe Photoshop semplicemente perchè, pur essendo a mio modo di vedere, il miglior software in assoluto per la lavorazione delle immagini raster e quindi il programma più efficace per ottimizzare e comprimere un’immagine per il web, si tratta di un software più complesso e molto più ricco di funzioni aggiuntive che lo rendono non di facile utilizzo a meno che tu non sia già padrone del mezzo.

#2 LAVORARE SUI CONTENUTI DI TESTO PER OTTIMIZZARE IL SITO

Partiamo dai contenuti testuali, rileggiamoli e modifichiamoli in una chiave seo-friendly in modo renderli appetibili per i motori di ricerca (non solo Google quindi). Ricordiamoci chi è il nostro target di riferimento e puntiamo su uno stile di scrittura fresco, efficace e memorabile, capace di sintetizzare tanto la nostra mission quanto la nostra vision.

1. La prima operazione da fare è analizzare. Dobbiamo osservare il target a cui ci rivolgiamo e capirlo, questo ci permetterà di conoscere e selezionare le chiavi di ricerca attorno alle quali dovremmo costruire i testi che faranno parte del sito.In questa direzione, è sicuramente da consigliare la scrittura di contenuti mirati e per singola pagina, ognuno con una parola chiave ricorrente ben precisa.

2. Pensiamo a un ordine che sia accessibile prima di tutto per il nostro target e poi per noi. Partendo dalla home, sviluppiamo una struttura che distribuisca i contenuti e quindi le pagine e gli articoli con un criterio di scorrevolezza e fluidità tanto nella lettura quanto nella navigazione. Attenzione quindi all’usabilità.

3. A questo punto occupiamoci della scrittura dei testi: ricordiamoci di utilizzare un linguaggio che sia fresco, non prolisso, che arrivi al punto senza confondere, che sia sinceramente informativo e soprattutto che sia capace di persuadere il nostro lettore. Può tornare molto comodo dividere il testo dei singoli contenuti in paragrafi e utilizzare i tag H1, H2, H3 perchè tenuti sempre in buona considerazione da Google.  Ricordiamoci di scrivere titoli efficaci con la parola chiave scelta all’interno e di riempire sempre il campo della descrizione con una sintesi efficace del nostro testo. In questa fase dobbiamo cercare e selezionare la parola chiave che meglio si adatta al contenuto che stiamo scrivendo, ecco due strumenti che possono tornare utili: Il Keyword Planner di Google e Keywordtool.io.

4. Arrivati a questo punto dobbiamo creare la sitemap del nostro sito e segnalarla a Google attraverso il tool Strumenti per Webmaster. Se utilizzi WordPress per gestire il tuo spazio web, esistono diversi plugin che ti aiutano in questa azione. Una sitemap è importante perché aiuta il motore di ricerca a scansionare completamente  il tuo sito e a riconoscere ogni singolo contenuto che vuoi indicizzare.

5. Siamo in dirittura d’arrivo, ora devi fare un controllo generale ma accurato prima di lanciare il sito. Assicurati che non ci siano pagine duplicate e contenuti copiati da una pagina all’altra. Se sono presenti contenuti come articoli o prodotti allora assicurati di aver scritto i nomi delle categorie e dei tag in modo logico e attinente all’argomento del tuo sito. Controlla anche che non ci siano url uguali perchè sarebbe una penalizzazione in fase di indicizzazione, in questo caso utilizza l’opzione del redirect 301 indirizzando una pagina verso l’indirizzo giusto e sarai sicuro di portare gli utenti verso i contenuti che hanno chiesto.

Ricordati di fare un check sulla velocità alla fine di tutto con PageSpeedInsight, assicurandoti che il sito sia ottimizzato e si carichi velocemente. Inoltre non dimenticarti di inserire la relativa keyword nel titolo di ogni singola immagine che caricherai sul tuo nuovo sito.

Ecco un esempio personale di restyling di un sito web.

Da qualche anno e fino a luglio 2016 ho mantenuto un layout con una distribuzione dei contenuti variegata ma che cominciava a starmi stretta perché desideravo aggiungere sezioni nuove che in un vestito del genere avrebbero finito per soffocare. Poi c’è un discorso di performance tecniche, che per quanto mi sforzassi di lavorare su css e php continuavano a non soddisfarmi. Questo non per l’host dove è ospitato il mo sito con il quale mi sto trovando indubbiamente bene, ma perché spesso il desiderio di rinnovo cresce in proporzione al potere delle performance richieste da un sito web e da chi ci naviga.

Sono partito da una ri-progettazione visuale, con un’estetica più minimal e una distribuzione dei contenuti più verticale, per arrivare ad aggiungere nuove sezioni meglio distinte e maggiormente accessibili da chi naviga come le Risorse Gratuite che metto a disposizione ogni settimana per i miei iscritti attraverso un link diretto e sicuro e la sezione dello Shop, un negozio online di loghi e materiale grafico pubblicitario che per ora è in fase di crescita ma che ambisce a diventare qualcosa di più (è cocciuto non ci posso fare niente 😉 ).

Differentemente dal mio vecchio “vestito” dove le pagine di presentazione delle Risorse gratuite contenevano i singoli download avendo quindi una doppia stancante funzione, nello spazio rinnovato ho voluto e potuto distinguere in maniera più efficace le tre categorie di risorse gratuite che seleziono per il mio pubblico, come puoi vedere qui: Foto Free Stock – I Migliori Font Gratuiti – Texture Gratuite in HD.

Ecco invece le pagine di presentazione delle singole categorie di risorse completamente ridisegnate che dalla doppia funzione che avevano nel vecchio sito ora invece si limitano ragionevolmente a introdurre i contenuti bonus che metto a disposizione per i miei iscritti: Font gratuiti e selezionati – Immagini in HD Free stock – Texture ad alta definizione.

Questi sono solo alcuni degli esempi che posso fornirti dal punto di vista personale, ma navigando in rete puoi tranquillamente trovare tanti modelli di restyling efficace anche più corposi e sofisticati di quello che ti ho appena descritto.

Come dicevo all’inizio di questo articolo, design e funzionalità devono farla da padrone perché il restyling di un sito web sia performante ed efficace.