Ok, il sito è pronto… si va online? ASSOLUTAMENTE NO!
Prima di andare online ci sono tante piccole cose da verificare e solo dopo aver completato la checklist possiamo pubblicare il nostro sito. Queste verifiche sono essenziali per prevenire problemi sul sito che costringono a interventi direttamente online in fretta e in furia.
Verifica dei contenuti
Il primo giro di boa consiste nel verificare la correttezza di testi e immagini di tutte le pagine del sito.
Check sui testi
- Controlla che non ci siano errori grammaticali, ortografici, insomma rileggete tutto per bene
- Controlla che ci siano tutti i testi, se per caso facendo copia e incolla ti sei perso qualcosa o ti sei dimenticato di scrivere in alcune pagine.
- Attenzione ai Lorem Ipsum: niente è peggio di un sito che va online con del testo finto!
- Link interni: verifica attentamente se i link presenti nel sito che puntano a pagine interne sia corretti
- Verifica che i testi non abbiano periodi troppo lunghi: aiuta la lettura tramite l’utilizzo della punteggiatura o spezzando il testo in più paragrafi o inserendo delle immagini (inerenti al discorso) tra un blocco di contenuti e l’altro o utilizza un elenco puntato
- Verifica il contrasto di testi e immagini, soprattutto se il contrasto tra sfondo e testo è netto, altrimenti gli utenti faranno fatica e leggere
- Ricordati di scrivere per i tuoi utenti, per esempio non scrivere con un linguaggio troppo tecnico, se il tuo target non è di tecnici del settore
- Attenzione alle dimensioni: ok ai claim grossi, ma su mobile riduci la dimensione dei caratteri in modo che il testo sia visibile senza obbligare l’utente a scorrere molto la pagina.
- Verifica che i tuoi dati personali/aziendali siano corretti
- Controlla che non ci siano contenuti duplicati
- Cancella i contenuti demo o work in progress
Check sulle immagini
- Attenzione alle immagini con il marker: altro errore grave è quello di lasciare sul sito immagini prese da banca immagine senza averle comprate, quindi con il watermark visibile… Ci vuole meno tempo a compare un’immagine che a togliere il marchio con Photoshop e sicuramente una volta comprata non avrai problemi in futuro!
- Ridimensionamento immagini: attenzione, soprattutto su mobile, che le immagini vengano visualizzate correttamente, quindi non deformate o esageratamente ingrandite. Sui dispostivi retina se vedi le immagini sfocate è perchè la risoluzione del display è doppia, quindi un’immagine 400x400px per non vederla sfocata dovrà essere 800x800px
- Verifica che i contenuti di video e immagini non siano coperti da copyright, quindi in caso chiedi il permesso per la pubblicazione e/o cita la fonte
- Controlla i nomi dei file immagine e che ognuno abbia il tag alt correttamente compilato
- Comprimi le immagini per ottimizzare i tempi di caricamento
In generale per avere contenuti di valore, originali e corretti richiedi una consulenza ad un copywriter! Se hai un sito in più lingue, chiedi ad un’agenzia o a un professionista esperto in traduzioni, possibilmente in relazione al tuo settore, affinché i testi non contengano errori!
Test sui vari browser e dispositivi (test cross browser e cross device)
Per evitare che gli utenti non vedano il sito o abbiano problemi di visualizzazione, è necessario non solo verificare il sito sui vari browser, ma anche la versione dei browser su diversi sistemi operativi! Per esempio la visualizzazione sull’ultima versione di Chrome su Windows potrebbe essere leggermente diversa dall’ultima versione di Chrome su Mac. Col l’avvento del Responsive Design, in particolar modo le media queries, alcuni browser obsoleti come Explorer 8, non vengono più considerati per i test dei siti. Alcune animazioni ed effetti non sono compatibili con alcune versioni di browser, quindi il consiglio è di non innamorarsi troppo di un effetto se si vuole l’assoluta compatibilità con ogni versione.
Ma con tutti i browser e dispositivi che ci sono in giro come si fa a verificarli tutti?
Se il sito viene realizzato da un’agenzia è l’agenzia stessa che se ne prende carico: molte volte ha a disposizione vari dispositivi di varie versioni, quindi è possibile avere controllo sulla corretta visualizzazione del sito.
In linea di massima le problematiche sono legate alle animazioni e a funzionalità/layout particolari che può darsi che non vengano visualizzati sempre in maniera ottimale.
Ci sono vari software e tools online gratuiti o a pagamento per i test cross browser. Un esempio è BrowserShots, che mostra l’anteprima statica del sito sulle varie versioni di browser e sistema operativo selezionati.
Il consiglio è quello di non fermarsi ai test solo ed esclusivamente sui propri dispositivi perché sarà un test poco utile. Bisogna almeno verificare le versioni di browser più comuni sui vari sistemi operativi e i dispositivi tablet e mobile più comuni.
È inoltre buona norma verificare che il codice del sito sia valido tramite il validatore di W3C e, nel caso di siti che devono garantire l’accessibilità, verificare le URL tramite il validatore WCAG.
Velocità di caricamento
Questo è un punto dolentissimo che viene spesso preso sottogamba.
Purtroppo capita spesso di vedere siti con gallerie fotografiche fullscreen pesanti con 20 e più immagini oppure 10 animazioni tutte nella stessa pagina, peccato però che su desktop la pagina ci metta 5 secondi a caricare, su mobile anche 10…
La velocità di caricamento delle pagine è anche importante per l’esperienza dell’utente: le pagine con un tempo di caricamento più lungo tendono ad avere frequenze di rimbalzo (bounce rate) più elevate, cioè l’utente arriva sul sito e rimbalza subito via, e un tempo medio di permanenza sulla pagina inferiore. Tempi di caricamento più lunghi influiscono negativamente sulle conversioni, l’azione compiuta da un utente, per esempio concludere un acquisto, compilare un modulo di contatto, registrarsi, visualizzare l’intero contenuto di pagina e molto altro.
Diventa quindi essenziale ridurre i tempi di caricamento!
Ci sono vari tools online per verificare la velocità delle pagine del sito:
Anche qui qualche consiglio per ottimizzare il caricamento delle pagine:
- Non esagerare con gli effetti e le animazioni
- Non esagerare con il numero delle immagini negli slider
- Ottimizzare le immagini per il web: capita ogni tanto di vedere sui siti immagini a 300dpi, che vengono usate per la stampa. La risoluzione delle immagini per il web è 72dpi. Inoltre le immagini vanno ottimizzate per ridurne il peso
- Ridimensionare le immagini: se un’immagine occupa uno spazio limitato all’interno di una pagina è inutile caricarla di dimensioni troppo troppo grandi
- Verifica sul codice sorgente del sito: questo è a carico del/i professionista/i che ha/hanno realizzato il sito. Affidatevi solo a esperti nel mestiere! Un professionista è in grado di considerare tutte queste problematiche, intervenire in tempi rapidi e dare varie soluzioni al problema.
- Sfruttare la cache del browser per le risorse
- Utilizzare sorgenti in CDN (Content Delivery Network), al posto di file statici in locale
- Abilitare la compressione gzip e minimizzazione dei css/js/html
- Ridurre il numero di chiamate effettuate dalla pagina, quindi risorse css/js e sorgenti esterne (HTTP requests)
- Quando possibile chiamare file js in modalità asincrona per impedire il blocco nel render di pagina
- Rimuovere duplicati di codice js o stili css
- Evitare link rotti di pagine non trovate (404 Not Found), magari pagine che linkano ad altre pagine che sono state rimosse o rinominate
Questi sono gli elementi che un professionista che realizza siti deve tenere in considerazione al momento del rilascio di un sito.
Ultimi consigli
Ci sono altri elementi da tenere in considerazione prima di andare online:
- Aggiungere il codice di monitoraggio di Google Analytics, per monitorare il traffico sul sito e avere un report sulle visite da parte degli utenti
- Aggiungere il sito su Webmaster tools
- Verificare l’esistenza del file sitemap.xml, diversificata se hai un sito multilingua
- Creare una pagina Mappa del sito con l’elenco testuale di tutte le pagine, raggruppate per sezione
- Verificare che non ci siano errori in console
- Aggiungi la favicon
- Evita gli errori 404 di pagina non trovata e reindirizza le URL con un 301, cioè il redirect permanente verso un’altra URL
- Se hai dei canali social, inserisci i links con icona del canale corrispondente
- Verifica la presenza del file robots.txt e in generale verifica che le pagine del sito siano indicizzabili
- Effettua un backup del sito al momento della messa online e imposta un backup automatico di file e database almeno una volta al mese
- Proteggi il sito: aggiungi ai moduli di contatto con un captcha per proteggersi dallo SPAM, verifica i la correttezza permessi dei file, imposta password forti per gli utenti amministratori, verifica la sicurezza del database, ecc.
- Installa un certificato di sicurezza SSL: non è obbligatorio, ma alcuni browser come Chrome segnalano i siti senza https come malevoli o non sicuri
- Ottimizza il sito per la SEO, quindi aggiungi per ciascuna pagina i meta tags title e description: per poter ottimizzare al meglio un sito e farti trovare sui motori di ricerca rivolgiti ad un esperto SEO!
- Verifica il corretto funzionamento dei moduli di contatto, newsletters, registrazione e che le mail arrivino correttamente all’account di posta indicato
- Verifica che le mail inviate dal sito non arrivino in SPAM
- Verificare che la condivisione delle pagine sui social sia ottimale, nello specifico che visualizzi l’immagine, il titolo e la descrizione corretta
- Verificare la corretta integrazione con piattaforme esterne (CRM, software personale, piattaforma di marketing, ecc.)
- Inserire la pagina di privacy e cookie policy con il banner di accettazione ben visibile
- Se il tuo sito non presenta problematiche, ma risulta ancora lento, prova a verificare il tuo piano hosting
- Aggiungi la breadcrumb nelle pagine del sito, per aiutare la navigazione da parte degli utenti
L’ultimo consiglio, e non ci stanchiamo mai di ripeterlo, è: Monitora sempre il tuo sito dal momento in cui va online!
TAGS:
caricamento sito - colori web - contentmanager - copywriting - fotografie originali - googlepagespeed - gtmetrix - hosting - howto - multilingua - performance - spam - traduzioni - usability - userexperience
