Delle Landing Page e di quanto siano cruciali abbiamo già parlato.
Alla base di una campagna di successo, c’è (anche) una landing page di successo.
Alla base di una landing page di successo, c’è sicuramente uno studio serio.
Lo studio iniziale della Landing Page è la prima parte del processo di ottimizzazione che ci dovrebbe portare ad una pagina di successo.
Traduciamo e riassumiamo alcune parti di questo articolo sul design di una “buona” landing page:

Nello studio iniziale di una landing page, ci si deve concentrare sul poligono concettuale AIDAS:
Attenzione
Interesse
Desiderio
Azione
Soddisfazione

L’Attenzione è la prima parte del processo di studio e dovrebbe rispondere alle seguenti esigenze dell’utente:
- Mi trovo sull pagina che mi stavo aspettando?
- Si tratta di un sito che potrebbe plausibilmente vantare ciò che sto cercando?
- Vale la pena fermarmi a leggere/guardare o meglio cercare qualcos’altro?

Risulta quindi fondamentale la ricchezza dei dati apportati da una campagna di search marketing: se so cosa cerca l’utente, so sicuramente meglio come farlo “ambientare” bene in modo da poter catturare la sua attenzione.

Dopo aver catturato l’attenzione del navigatore, è importante soddisfarne l’Interesse: le porzioni di testo, immagini e aree “cliccabili” devono subito coinvolgerlo e spingerlo ad approfondire. Si cerca di dare risposta ai quesiti:
- Dove dovrei cliccare per avere maggiori informazioni?
- C’è qualcosa su questa pagina che descriva ciò che sto cercando?
- Posso fidarmi a rilasciare a questo sito/azienda i miei dati personali?

Il successo di questa fase si lega indissolubilmente alla mancanza di tempo e alla svogliatezza dei navigatori: sarà importante usare tecniche di sintesi dell’impianto grafico-testuale che sintetizzino e velocizzino la fruizione dei contenuti. Vanno inoltre minimizzate le possibili distrazioni: gli elementi che non si rendono necessari, vanno eliminati.

Una volta che abbiamo catturato l’attenzione del lettore e che si è creato quel primo - labile - legame d’interesse, è il momento in cui egli presterà più attenzione alla nostra offerta per capire se realmente può soddisfare il proprio Desiderio, se gli può interessare quello che andiamo presentando. Il tasso di fruizione dei nostri contenuti (testuali, grafici, multimediali…) tende ad aumentare perchè il navigatore avrà giustamente molte obiezioni al nostro prodotto, egli cercherà risposte a domande quali:
- Questo prodotto/servizio mi offre quello che voglio?
- Posso permettermelo?
- Se non mi piace: posso restituirlo?
- Davvero mi piace, posso però fidarmi di questa compagnia?
- Ci sono altri prodotti migliori di questo?
- Questo prodotto risolverà i miei problemi?

Nostro scopo in questa fase è di non fargli abbandonare il sito con quesiti irrisolti!

Se l’utente a questo punto è convinto, sarà la volta di farlo passare all’Azione, il momento in cui scatta la conversione. Le azioni più frequenti sono: la compilazione di un modulo di contatto o di preventivo, l’acquisto di un oggetto, l’iscrizione alla newsletter, la registrazione ad un servizio, la prenotazione di un evento, ecc.
I “Call to Action!” più diffusi sono di conseguenza: “richiedi un preventivo!” “aggiungi al carrello!” “invia!” “iscriviti ora!” “registrati!” e così via. L’azione ovviamente dev’essere personalizzata a in linea al 100% con gli obiettivi della landing page e cioè della campagna.

Ultima ma non meno importante - anzi oggi forse la più importante! - è la Soddisfazione, che - almeno tecnicamente - esula dal design della landing page e finisce nelle cosidette azioni di CRM. Dobbiamo soddisfare le aspettative dell’utente che è arrivato in fondo al percorso. Ciò significa che dobbiamo dargli esattamente ciò che lui si aspettava di ricevere al momento di chiusura dell’azione. Dobbiamo rispettare le promesse costruite lungo il percorso pre-azione.

A seconda dei casi si può trattare di un contatto in tempi brevi, la spedizione dell’oggetto acquistato nei tempi stabiliti e secondo condizioni di restituzione e rimborso stabilite, la ricezione immediata dei dat per accedere al servizio, la ricezione invito all’evento cui si è registrato, e così via. Tutto il percorso finora è stato costruito secondo uno specifico livello di comunicazione e informazione che l’utente desidera rispettato anche nel “post-azione”.

Fallire a questo punto, come sappiamo, porta non solo un cliente scontento ma (statisticamente parlando) 10 nuovi potenziali clienti scontenti contro i 2 potenziali clienti a quali verrebbe parlato bene del nostro prodotto/servizio.

Ovviamente anche rispettare magistralmente tutti questi punti non ci darà mai la certezza di avere la landing page perfetta: la landing page perfetta non esiste (almeno non all’inizio!) ma va continuamente analizzata e ottimizzata fino a raggiungere ad un soddisfacente livello di eccellenza.

Le schede video e monitor dei computer più vecchi sono in grado di visualizzare solo 256 colori. A causa delle differenze di gestione tra PC e MAC, abbiamo una rimanenza di soli 216 colori comuni. Quindi, per rendere perfettamente visibile a tutti il nostro lavoro (anche agli utenti con settaggi video a 8 bit), dobbiamo utilizzare solo i 216 colori della tabella sottostante, detti appunto “Web Safe Colours”.

Oggi, comunque, la maggior parte degli utenti ha macchine che dispongono di monitor moderni e buone quantità di ram video, il che gli permette di visualizzare ben più di 256 colori.

Chiuso il 2007 è tempo di riassumere le linee princpiali seguite dall’evelozione del web design nel 2007. Sul sito ModerLife troviamo un articolo che effettivamente coglie nel segno alcune caratteristiche del web dell’anno passato che sicuramente ci tireremo dietro per i prossimi mesi.

Fra quelle indicate trovo molto interessante il proliferare di design scuri abbinati a colori molto vivaci. Nonché la presenza di mascotte vettoriali pronte ad umanizzare e rendere più “divertente” il sito. Rispetto agli anni passati (ricordo i layout flash in stile fantascienza) il trend del 2007 è stato sicuramente quello di rendere il web più “cartoon” con sovrabbondare di box pastello e linee morbide.

A proposito di mascotte si esprime anche l’autorevole Smashing Magazine con una galleria ragionata di mascotte del web com’è nel suo stile inconfondibile.

Chiudo con un’osservazione: non voglio certo fare politica, ma provate aguardare lo sfondo su cui campeggia il logo del Partito Democratico nel video della conferenza stampa dei Circoli PD… quel verde acido che fa molto web è il segno: il web sta invadendo l’Italia!

Ormai è chiaro a tutti: il SEO è una tematica di primo piano anche per i web master e i web designer.
Non basta un bel layout od un CMS performante per far diventare popolare il proprio sito, serve anche una buona indicizzazione da parte dei motori di ricerca, Google in particolare.

Dal mio punto di vista, ritengo scontate le basi di un buon SEO per siti web (title, description per pagina, url con mod_rewrite per le pagine dinamiche…), tuttavia, poiché c’è sempre da imparare, ecco alcuni hint direttamente da Google:

1) Per evitare che nelle ricerche venga mostrato il breve testo sotto il link aggiungete alla pagina

meta name="robots" content="nosnippet"

2) Se invece volete che una pagina scompaia dal database di Google:

meta name="robots" content="unavailable_after:[data] "

3) Smettete di usare il meta revisit-after, usate le sitemap XML per questo compito

4) Ricordate che di default ogni pagina viene considerata come index(da indicizzare) e follow (segui i link), se questo è ciò che volete potete anche omettere il meta robots.

Chiudo con un video sulla spiegazione dell’attributo alt nelle immagini e con una domanda correlata: Ma non lo sanno anche i muri?!

Quando si realizza un sito web, tra le prime cose è necessario considerare la risoluzione minima da supportare.

Ovviamente è possibile creare un sito a larghezza fluida, ma bisogna comunque decidere il limite del ridimensionamento del layout. Se fino a qualche tempo fa era logicamente plausibile supportare la risoluzione 800×600, pare che negli ultimi tempi il limite sia stato superato. Le percentuali di visitatori con questa risoluzione sono infatti sempre meno, aumentano invece gli utenti con schermi widescreen.

Navigando tra siti più o meno importanti, ho notato, per esempio, che il redisign di Punto-Informatico.it è pensato per una larghezza minima di 1024px. Altri esempi illustri sono il sito Repubblica.it, da tempo ormai passato alla risoluzione minima 1024×768, e Splinder.com, nota piattaforma per blogger.

Nel dubbio, il mio consiglio è quello di realizzare layout fluidi che si adattino allo schermo del navigatore, anche perchè gli utenti con pc datati e schermi antidiluviani resisteranno ancora per un po’ di tempo. Ricordiamoci, ad ogni buon conto, che la cosa più importante è garantire la navigazione semplice tra le pagine e rendere leggibili i contenuti.

Anche se molti non lo sanno, ogni browser permette all’utente di impostare il colore di sfondo delle pagine web e del testo. Naturalmente queste impostazioni entrano in gioco quando le pagine visitate mancano di un colore già stabilito. L’impostazione base prevede il bianco per lo sfondo e il nero per il testo, ma qualche utente potrebbe preferire altre combinazioni di colori, anche assurde, come sfondo blu e testo rosa fucsia. I problemi nascono quindi se il “body” di un sito non ha un colore di sfondo impostato. L’esempio pratico potrebbe essere rappresentato dal sito bloggers.com che, se l’utente avesse il rosso come background predefinito, apparirebbe così:

Per aggirare il problema con estrema semplicità, bisogna sempre ricordarsi di dare al body delle nostre pagine web un colore di sfondo:

body { background: #fff }

Il sito di cui ho fornito l’esempio, è solo uno dei tanti che possono presentare questo problema, ma navigando non sarà difficile scovare altri casi clamorosi.

Morale: ricordatevi sempre di questo particolare quando vi dedicate alla realizzazione di un sito, così anche se il cliente avrà dei colori preimpostati sul suo browser non si potrà lamentare.

Fino dalla sua nascita il web ha mutuato molte terminologie derivate dalla carta stampata, prima fra tutte l’idea di “pagina” web, che spesso genera nei non addetti ai lavori la convinzione che un file .html non sia altro che un’immagine sullo schermo.

Ultimamente (ma in realtà sono in giro da tempo) sto notando la diffusione di un tipo di advertising che forte di queste analogie con la stampa presenta in alto a destra una piccola “orecchia” piegata dalla quale occhieggia una seconda pagina.

Definita come PageEar o Pagepeel è essenzialmente composta da due immagini che rappresentano l’advertising (nascosto e svelato) da due filmati flash per l’animazione dell’orecchia e da un paio di file Javascript per il caricamento ed il posizionamento dei filmati flash.

Sul web ho trovato la versione freeware di Christian Harz, molto personalizzabile e facile da implementare su ogni sito. Per un esempio live guardate il sito ufficiale del Joomla Day.

Spesso il problema di un designer è quello di ripetere sé stesso, utilizzando sempre gli stessi font e le stesse icone, tralasciando quanto invece sia importante l’aggiornamento delle proprie risorse e la continua ricerca di nuove soluzioni creative.

Inutile dire che spesso il web ci viene in aiuto offrendo strumenti di rapida consultazione per dare quel tocco di originalità in più alle nostre creazioni.

Per quanto riguarda i font, ho trovato interessante Fawnt, che permette di cercare fra una nutrita schiera di caratteri freeware e ne visualizza un’anteprima.

Sul fronte delle icone troviamo Iconlet, un motore di ricerca sullo stile della ricerca immagini di Google che estrapola i risultati da una serie di librerie di icone free (fra cui anche le famose famfamfam).

Un’altro interessante esperimento in questo campo è Sosymbol, attraverso il quale non solo è possibile scaricare icone preconfezionalte, ma addirittura crearle online, mescolando elementi grafici e sfondi colorati.

Una delle tendenze degli ultimi anni, favorita dalla diffusione della banda larga e di tecnologie come AJAX, è la sempre maggior diffusione di applicazioni web in grado di eguagliare funzioni e prestazioni dei comuni applicativi desktop.

I limiti di queste soluzioni rimangono tuttavia il legame con il browser e la difficoltà di integrazione con il sistema operativo per quanto riguarda la sincronizzazione dei documenti e delle risorse.

Proprio per ovviare a questi problemi Mozilla ha reso pubblico un progetto denominato Prism che punta a rendere disponibili le applicazioni web come normali programmi desktop.

Utilizzando Prism sarà così possibile aggiungere strumenti come Google Calendar al menu programmi e come collegamento sul desktop ed aprire le pagine web all’interno di finestre scollegate dal browser.
Allo stesso modo sarà possibile trascinare file e documenti dentro storage virtuali come box.net con un semplice drag’n'drop.

Nella fase attuale lo sviluppo del progetto Prism punta ad ottimizzare una versione beta per Windows, tuttavia saranno disponibili anche versioni Mac e Linux. Sarà inoltre possibile utilizzare i programmi offline con i sistemi di cache e sincronizzazione per superare l’ultimo ostacolo alla portabilità delle web application rappresentato dalla disponibilità di una connessione Internet.