Creare la homepage perfetta con WordPress

Con questo articolo ti indico diversi suggerimenti e spunti fondamentali per creare la tua homepage perfetta in WordPress.

La premessa fondamentale è che molte di queste indicazioni valgono per WordPress ma sono assolutamente applicabili anche ad altre piattaforme di sviluppo, come ad esempio siti web tradizionali sviluppati in Html.

Per qualsiasi sito web che si rispetti, e che abbia la pretesa di ‘fare presa’ sugli utenti, la creazione della homepage è il passaggio fondamentale e imprescindibile per ogni business, o attività privata che sia.
E’ il naturale biglietto da visita, è la porta di ingresso al vostro mondo e alla vostra attività, sia che si tratti di un blog personale, piuttosto che del sito web della vostra azienda.

La homepage buca. Sempre.
Resta sempre a carico del proprietario del sito web decidere quale sia il carattere più idoneo da dare alla pagina di apertura del sito web, per consentire la corretta coerenza della propria attività con la percezione online degli elementi.

Detto ciò, sappi che la homepage non è così scontata, il suo potere può allo stesso tempo elevare la tua presenta oppure relegarti nei meandri oscuri e invisibili della pagina 51 di Google.

E’ quindi necessario un’attenta riflessione di ciò che si vuole trasmettere all’interno della homepage, e quindi dell’intero sito web.
Il web è davvero sterminato di esempi, sia di siti personali che di siti corporale aziendali, dove la homepage rappresenta il ‘de profundis’ dell’intero progetto e della presenza online: mal concepite, confuse, e soprattutto con un insieme di elementi non coerenti tra loro, che ne decretano inevitabilmente l’inefficacia.

WordPress, oltre ad essere il CMS (Content Management System) più utilizzato e diffuso, offre innumerevoli vantaggi e soluzioni tecniche adatte allo scopo.
Oltre naturalmente a consentirvi lo sviluppo e la definizione degli aspetti tecnici ed estetici più funzionali, ha l’indubbio valore di renderti del tutto autonomo in queste operazioni, sia in fase di sviluppo sia nella modifica e aggiornamenti successivi.

Creare la homepage del sito web con WordPress non rappresenta un’attività a sé, distinta dal resto del sito web, ma ne costituisce lo scheletro principale, perfettamente innestato all’interno dell’intero flusso di navigazione, tra le varie sezioni composte da pagine e articoli.

E’ opportuno e necessario quindi dedicarsi prima alla corretta definizione ‘offline’ della struttura, che dovrà incorporare in modo armonico gli elementi ritenuti adatti al tipo di comunicazione scelta.
Occupandomi da anni della definizione del concept per molte aziende, ritengo che a questa fase occorra dedicare molto tempo, che faciliterà non poco lo sviluppo successivo in WordPress.
E’ sempre tempo speso molto bene.

Quindi, sotto con blocco e matita, oppure direttamente in un programma di grafica, ancora meglio se Photoshop, che oltre alle smisurate funzioni, offre anche gli elementi di ritaglio con le misure esatte.

Gli strumenti di WordPress

L’approccio al design della homepage – come di tutte le altre pagine – è quasi sempre legato alle funzionalità del tema grafico che si utilizzerà nel sito web: ciascun tema (di questo aspetto ci occuperemo in un prossimo post) offre il proprio set di funzioni sia tecniche che grafiche, la possibilità di intervenire in modalità drag & drop, lo schema colori, impaginazione, ecc.

Quasi tutti i temi WordPress di tipo ‘Premium’, come ad esempio quelli presenti su ThemeForest, offrono tale modalità di design, rendendo estremamente agevole la costruzione in tempo reale di tutti gli elementi strutturali della homepage.
In particolare, uno degli strumenti più efficienti in assoluto, sia per i principianti che per gli utenti avanzati, è Visual Composer.
Si tratta di un vero e proprio plugin ‘add-on’, che preinstallato e configurato all’interno del tema (oppure acquistabile separatamente), consente in pochi passaggi lo sviluppo e visualizzazione in anteprima di tutto il design complessivo della homepage, potendone controllare ogni singolo particolare.

A prescindere da qualsiasi tipologia di concept o design per la homepage, vi sono alcuni elementi di comunicazione che non devono mai mancare, e che devono rispettare una certa sequenza logica ideale, in base ai criteri di corretta usability e navigazione intuitiva.

LOGO
L’elemento primario di tutto il brand: ben definito, con le giuste proporzioni, in trasparenza o con il corretto contrasto con lo sfondo, e sempre ben visibile durante tutta la navigazione.
Se sbagliate questo, partite male.
In WordPress è possibile – in funzione del tema – inserire più versioni differenti di logo in base al formato adatto al device di visualizzazione: standard logo, Retina logo (più grande e definito), Mobile logo (per tablet e smartphone).
Ricordatevi inoltre di impostare la Favicon: è l’icona di 16px per 16px, che verrà visualizzata nella label della scheda browser, quando attivate i cookies oppure quando la homepage viene inserita nei preferiti.

MENU BAR
E’ la vera guida all’uso del vostro sito: si può scegliere in orizzontale o verticale, a scomparsa (sticky menu), o a scorrimento in full screen (hamburger menu), con funzionalità Mega Menu (vi sono plugin appositi), e molto altro.
Deve sempre essere ben allineato al logo, con le giuste proporzioni e con il font più adatto e coerente con lo stile del sito web.

TOP BAR
Non è un elemento fondamentale nella struttura della homepage, ma di recente è divenuto da elemento complementare un asset strategico: corrisponde a quella piccola barra in alto, all’inizio della pagina, in cui viene inserita l’informazione di primo contatto, le icone social, e in alcuni casi la scelta lingua, o il login all’area privata.

BILLBOARD O SLIDER
Il principale elemento evocativo e di primo impatto con l’utente, può comporsi o di una singola immagine statica, oppure di più immagini in transizione (sliding), con video in background oppure con particolari effetti grafici applicati sia su ingresso immagini che su testo.
Il migliore plugin per gestire questo è Slider Revolution.

PERSONAL / ABOUT
Non è obbligatorio, ma è considerato sempre corretto inserire nella homepage una sezione o box che offra un anticipo del vostro profilo personale.
E’ l’imbocco al personal brand, o alla descrizione della vostra azienda.
Se utilizzate la modalità drag & drop, una buona soluzione è inserire una riga (row) o sezione (page section) dove inserire all’interno un breve testo, preceduto da un titolo (heading) molto efficace e visibile.

SERVIZI / PRODOTTI
Sia che la vostra attività comporti la vendita di prodotti, o l’offerta di servizi, dovete prevedere l’illustrazione della vostra attività: date subito all’utente il messaggio di cosa vi occupate, qual è il vostro business e cosa offrite.
Il resto delle informazioni lo potete sviluppare in modo più articolato nella sezione apposita.

EVENTI / NEWS
Spesso sottovalutata da molte aziende, è in realtà la bussola che orienta la partecipazione dei vostri utenti finali: aggiornata con frequenza, va utilizzata per comunicare le vostre attività, gli eventi a cui partecipate o di interesse per gli utenti, per iniziative correlate, e anche per comunicazioni di servizio, come chiusure aziendali o cambi di indirizzo.
Ricordatevi di non riportarle tutte, nella homepage va inserito un ‘blog tesser’ (con al massimo 3 articoli in anteprima) seguito da un link alla sezione blog, in cui avrete inserito tutti i vostri post.

CTA (Call to Action)
Anche se si tratta dell’elemento primario delle landing page (le vedremo in un post ad hoc), è fondamentale offrire agli utenti la possibilità (invito) di esercitare un’azione specifica allo scopo di convertire l’utente.
La CTA è una frase più o meno estesa, che ha lo scopo di indurre l’utente a svolgere una specifica azione: iscrizione alla newsletter, download di un contenuto, l’invio dei propri contatti, o la registrazione ad una member area.
In WordPress la potete creare voi da zero, con una riga / sezione, oppure utilizzare l’elemento CTA presente in Visual Composer.

SOCIAL MAGNET
In realtà sono le icone social, ma io con il tempo ho imparato a chiamarle così.
Perché inserire in modo ben visibile nella homepage le icone dei vostri canali social esercita un effetto ‘circolare’ sulla vostra presenza online, spingendo gli utenti a visitare i vostri canali.

Fateli vedere bene, e scegliete le icone con cura: spesso il vostro tema offre icone predefinite (icon library, controllate se presente), altrimenti potete scegliere delle icone fantastiche su Flaticon (http://www.flaticon.com) e disporle o come elemento icona o come singole immagini.

I temi premium più articolati offrono anche gli ‘icon set’, la possibilità di inserire più icone in sequenza, in cui preimopstare il link al canale social.
Ricordatevi sempre di aggiungere il link, le icone sono fatte per cliccarci sopra.

COLLABORAZIONI / CLIENTI
Se siete un professionista, o un’azienda, è sempre una scelta comunicativa corretta inserire un elenco di clienti seguiti, o progetti / collaborazioni eseguite.
Non vi è uno stile convenzionale, potete scegliere se inserire solo i loghi dei clienti, con o senza link, oppure in modalità portfolio, con alcuni box immagine, un titolo in ‘overlay’ (effetto testo in sovrimpressione), e il link al singolo progetto.
In WordPress è molto facile realizzarlo: in ogni tema è quasi sempre presente la sezione Portfolio, che trovate all’interno del vostro menu dashboard a sinistra, che vi offre un percorso guidato per la creazione.
Tenete conto di un aspetto: non è sempre opportuno inserirle in homepage. Spesso vengono indicate esclusivamente nella sezione a loro dedicata, nella navigazione principale.

TESTIMONIAL
Personalmente è la sezione che mi piace meno, e trovo davvero poco efficace per una homepage.
Dovrebbe avere lo scopo di creare ‘fidelity’ con gli utenti, mostrando alcune recensioni o commenti ricevuti da clienti soddisfatti del proprio prodotto o servizio, in realtà produce l’effetto di ‘sovraccaricare’ la percezione del brand, spesso con tono presuntuoso e poco coerente con il proprio ‘mood’.

SEARCH
Chiariamo subito un equivoco: tutti i temi, dico tutti, di WordPress hanno la funzione ricerca all’interno del setting principale.
Detto ciò, non è sempre necessario. Molti utenti che hanno un personal blog di due pagine, lasciano il tool search in bella vista. Ma anche no.

Cosa vorrete mai cercare in due pagine di sito web?
Se il vostro sito web è articolato su più pagine, e diversi articoli, allora inseritelo.
Altrimenti, se il design della vostra homepage – e del vostro intero sito – è compatto e ha una navigazione corta, rimuovetelo, perché non serve.
Nei temi WP, lo trovate sempre nei general settings, o nella sezione relativa all’Header.

FOOTER
E’ letteralmente la ‘coda’ della vostra homepage, ma in realtà è un elemento indipendente da essa, fa parte delle impostazioni generali del sito web.
Una buona sezione Footer efficace riporta il logo (in formato ridotto, da inserire nella apposita sezione Footer del tema), le informazioni di ragione sociale (Nome Azienda, indirizzo, eventuale telefono), la Partita IVA (pensate ancora non sia obbligatoria?), il link alla Privacy Policy, le icone social.
In WordPress potete scegliere se creare una Footer Section, più ampia con alcuni widget distribuiti in colonne, oppure una semplice ‘bottom bar’, ovvero la piccola barra in fondo alla pagina con le informazioni appena indicate.

In base alla lista degli elementi sopracitati, creare la homepage perfetta in WordPress non segue mai una regola scritta o convenzione.
Come in tutte le applicazioni che includono un impegno grafico e creativo, è sempre una scelta in parte dettata dal gusto personale (del blogger, dell’azienda), e in parte dal target utenti che si intende raggiungere.

E’ sempre molto importante invece che la homepage sia il risultato finale di un processo armonico di combinazione degli elementi: mai troppi, mai troppo pochi.
Unire e mescolare nella corretta sequenza le sezioni e gli elementi della homepage potrà avere sia il potere straordinario di calamitare i vostri utenti e orientandone la navigazione, sia il potere di procurare una ‘user-experience’ disastrosa.

Fate inoltre numerosi test di navigabilità e adattamento al responsive design: visualizzate sempre, oltre che su Desktop, anche su tablet e smartphone, possibilmente su più piattaforme, e sempre utilizzando browser differenti, Chrome, Safari, Firefox per citare i più diffusi.

Non dimenticate infine un elemento fondamentale e determinante per il successo della vostra homepage in WordPress: il peso complessivo della pagina in MB.
Durante lo sviluppo della homepage, verificate progressivamente il peso totale – in preview tramite Page Speed oppure Pingdom – per assicurarvi che la vostra pagina resti meno pesante possibile, e non produca un rallentamento dell’intero sito web.
Succede quando si carica la homepage di troppi elementi, soprattutto grafici come immagini (il primo fattore di appesantimento del sito), icone, sfondi, effetti parallax, e altro.
In pratica, ogni elemento va sempre ottimizzato, in rapporto e in equilibrio con il resto della pagina.