[New Style] Landing Page - Tra monopagina e minisito...

[Stuart]

Al Raduno GT che si è tenuto il passato weekend, Giorgio , durante la mia presentazione, ha fatto menzione di una landing page particolare creata in occasione dell'uscita di un'applicazione php in vendita -per il mercato estero- su googlerank.com

La particolarità di questa landing page è lo scrolling fluido della pagina, ottenuto tramite javascript. Sia come webmaster che come utente, ho sempre detestato il behaviour del browser con le àncore interne, ossia un movimento istantaneo della pagina (verso l'alto o verso il basso) non appena si clicca su un link. Pur comprendendone l'enorme utilità per una gran quantità di risorse (glossari, guide....).
Personalmente ho ritenuto inserire uno scrolling più fluido della pagina un miglioramento estetico della visione e consultazione dei contenuti della pagina.

Why

Non sono mai stato un grande fan dello stile "monopagina" americano, introdotto e teorizzato successivamente da Madri in italia e usato con successo da tantissimi webmaster e marketeer.
Devo però ammettere che il successo (in termini di vendita o più in generale di azione compiuta dall'utente) di un bene o servizio, spesso non può prescindere da questo tipo di presentazione: 1) pagina unica, 2) assenza di navigazione e/o link che portino all'esterno, comunicazione persuasiva e (spesso) altisonante.

Allo stesso tempo esiste un approccio più soft ed esaustivo, preferito da molti webmaster (tra cui il sottoscritto) che consiste nella creazione di un "minisito" a supporto di un prodotto o servizio.
4 o 5 pagine web di descrizione (le classiche overview, features, immagini, prezzi...ecc.) legate da una navigazione interna. L'utente naviga attraverso i contenuti del minisito e, quando (e se) sufficientemente convinto, compie l'azione prevista (acquisto, iscrizione, richiesta info).

Nella realizzazione di questa landing ho cercato un giusto compromesso tra la struttura classica a monopagina (che secondo la mia modesta esperienza si è dimostrata più efficace nella maggior parte dei casi) e la suddivisione logica e libertà di fruizione dei contenuti possibile solo con un minisito.

Il risultato è stato questo:
http://x.googlerank.com


How

Per i maligni che stanno pensando ad un'abile mossa per promuovere il prodotto presentato nella landing, lo script non è in vendita in italia. Per utenti italiani è a disposizione gratuitamente contattando me o kerouac3001 in PM. Si prenda quindi l'URL sopra citato come esempio di applicazione dello scrolling e come esercizio di stile.


Per implementare lo smooth scroll è sufficiente scaricare le classi javascript che allego:

download Classes.zip

Decomprimere l'archivio, copiare e incollare la cartella "classes" nella stessa directory che contiene la Vs landing page.

Nella sezione HEAD della pagina, richiamare le classi js contenute nella cartella "classes"

<script type="text/javascript" src="classes/prototype.js"></script>
<script type="text/javascript" src="classes/attitude.js"></script>
<script type="text/javascript" src="classes/moo.fx.js"></script>
<script type="text/javascript" src="classes/moo.fx.pack.js"></script>
<script type="text/javascript" src="classes/m4m.set.js"></script>

Prima della chiusura del tag </body>, quindi al termine del Vs codice HTML, richiamate la funzione "attitude"

<script type="text/javascript">Attitude.start();</script>
</body>
</html>

That's it.
Ho testato il funzionamento dello scrolling su IE 6, Firefox 1.5 e Mozilla 1.6
Mi manca Safari per Mac (sorry).

Fatto questo, il movimento della pagina cliccando sui link che portano ad àncore interne non sarà più quello tradizionale scattoso, ma scorrerà in verticale rallentando e fermandosi in prossimità dell'àncora.

esempio di named anchor

<a name="faq" id="faq"></a>

esempio di link interno

<a href="#faq">Faq</a>

Insomma, niente di diverso dal vecchio classico html (infatti E' proprio il classico vecchio html)
Per chi naviga con i javascript disabilitati, la pagina sarà comunque navigabile.

Credits

L'effetto scrolling è reso possibile dalla libreria di effetti in javascript moo.fx creati da Valerio Proietti di http://www.mad4milk.net/

Le classi sono rilasciate sotto MIT-style LICENSE


Considerazioni

Non è mia intenzione stabilire nuovi standard o contrastare gli approcci attualmente più utilizzati ed efficaci (non potrei mai, sono un pessimo trend-setter). Tanto più che devo ancora iniziare una promozione seria della landing prima esposta, quindi non sono ancora in grado di valutarne l'effettivo potere di conversione (questo dipende anche da tantissimi fattori).

Ho proposto un piccolo widget, che se utilizzato al meglio può porsi come una via di mezzo tra landing tradizionale (monopagina, senza link di "distrazione") e minisito (informazioni organizzate logicamente)


Cordialmente,
Stuart

[piernicola]

Stuart

Al Raduno GT che si è tenuto il passato weekend, Giorgio , durante la mia presentazione, ha fatto menzione di una landing page particolare creata in occasione dell'uscita di un'applicazione php in vendita -per il mercato estero- su googlerank.com

Faccio parte del cerchio di privilegiati che ha avuto l'onore di vederla un bel pò di tempo prima del raduno, ed ora come allora il mio parere è: bellissima!

Infatti voglio testare un approccio del genere anche per i miei prodotti... testerò e farò conoscere i risultati.

GRAZIE per aver condiviso questa innovazione che, secondo me, farà scuola.

[nelli]

benvenuto stuart in web marketing, è un onore averti qua
ovviamente ti ringrazio a nome di tutti per aver non solo riportato l'esempio, ma anche dato spiegazioni sul come.
detto questo veniamo a ciò che proponi.

ti avevo sentito parlare di questo scrolling al raduno e in effetti è davvero bello. mi domando l'effetto che possa fare sull'utente finale. visto che è una novità, rimarrà disorientato? piacevolmente colpito? passati i primi 5 secondi sarà già immune a questa novità? che effetto farà sulla sua propensione all'acquisto/lettura/registrazione o altra azione che vogliamo compia?

altre considerazioni..
la prima sulla velocità di scorrimento. mi domando se uno scorrimento più lento sarebbe fastidioso (e magari rischierebbe di far credere a chi naviga che può anche interrompere l'azione con il mouse) oppure sarebbe più gradevole.

e una domanda: come mai il testo non parte subito sotto i link? anche ammesso che tu volessi far ammirare la parte grafica con le fiamme (bella), perchè non hai posizionato il testo immediatamente sotto ad esse? il primo paragrafo (intro) è piuttosto in basso nella navigazione. è un modo per creare ancora più effetto nella discesa della pagina?

il dilemma che poni fra landing paginona-unica-da-scorrere-a-mano e minisito non è questione da poco. ho la sensazione che statisticamente funzioni di + il primo modello, ma sarei felice se qualcuno che legge questa discussione portasse esempi vincenti costruiti sul modello che tu ami o ancora meglio testasse il tuo nuovo strumento.

di sicuro il tuo contributo permette di sperimentare vie di mezzo

grazie

spero che molti dicano la loro!

ps - ovviamente complimenti

[Stuart]

Piernicola

Infatti voglio testare un approccio del genere anche per i miei prodotti... testerò e farò conoscere i risultati.

E' già stata implicitamente messa in coda alla todo-list

nelli

visto che è una novità, rimarrà disorientato? piacevolmente colpito? passati i primi 5 secondi sarà già immune a questa novità? che effetto farà sulla sua propensione all'acquisto/lettura/registrazione o altra azione che vogliamo compia?

Spero in un piacevole disorientamento di stupore, unito all'immunizzazione dopo 5 secondi che porti l'utente a concentrarsi sui contenuti, invece di autoipnotizzarsi cliccando compulsivamente sui link

Sull'effettivo potere di conversione, tra un migliaio di visite (al netto di quelle provenienti da giorgiotave.it e da amici/parenti) potrò dare qualche numero. Non ho mica inserito Analytics nel codice della landing e della thankyou page solo perchè fa figo

nelli

e una domanda: come mai il testo non parte subito sotto i link?

A parte mostrare le hotrod flames per intero (mi sono costate ben $ 1,00!), mi piaceva l'idea di "discesa" tra le fiamme, attraverso il layout che parte nero e diventa rosso-sangue.

Se avessi dovuto promuovere un prodotto/servizio diverso, avrei -forse- inserito i testi della pagina nella loro posizione abituale (sotto l'header, per intenderci).

nelli

il dilemma che poni fra landing paginona-unica-da-scorrere-a-mano e minisito non è questione da poco. ho la sensazione che statisticamente funzioni di + il primo modello, ma sarei felice se qualcuno che legge questa discussione portasse esempi vincenti costruiti sul modello che tu ami o ancora meglio testasse il tuo nuovo strumento.

di sicuro il tuo contributo permette di sperimentare vie di mezzo

Sulle vie di mezzo, è ciò che spero
Concordo sulla migliore resa (almeno per quanto ho finora visto) del paginone unico. E' il motivo per cui non me ne sono discostato.

nelli

ps - ovviamente complimenti

E di che!



Cordialmente,
Stuart

[Tuonorosso]

E' normale che mi vada a scatti?

[Obeah Man]

Ciao Stuart,

prima considerazione a caldo sul layout della pagina: it's just cool!

Davvero, gran bello stile. La grafica spacca.

Provo a raccontarti un po' della mia esperienza di navigone, k?

Nonostante la mia connessione a 4 Mega la pagina ha impiegato un po' a caricarsi, ma pazienza.

Poi la vedo.. cool! (e due) e leggo:

"Sick of being a good guy? We are."
And I'm like yeaaah!! >> click >> ah! è solo un'immagine..

Vedo X+
Articially Intelligent Automatic Page Generation

Natural language gateway / doorway pages search engines will simply... adore

yeaaah again!! >> click >> ah! non è un link..

Scrollo in basso, non vedo testo, mah?!
Penso sbaglio io, Stu ha fatto una landing, voglio vederla.
Ok, ho capito. Devo cercarmi un link, li vedo! click (uff)

Scelgo Features, io sò cos'è un doorway page generator, o no?!?
Scorro il testo, faccio un po' fatica a leggerlo, quindi cerco di capire al volo cosa mi offrite e, guarda un po', mi trovo a pensare:

cool !! (adesso basta eh?!) let me see how many bucks for it!

Non trovo risposta.. provo a scrollare.. ecco!! (Poi ho capito che avrei potuto cliccare "Download").
Il prezzo è accessibilissimo, la compro.
(Chissà perchè penso LA compro, mah?!)

Visto che la landing è tua adesso però la voglio leggere tutta, guardarmela bene. Trovo diverse informazioni, esaustive direi.

Magari mi sbaglio, ma vista la valuta che hai scelto per gli acquisti, direi che il target geografico è prevalentemente Nord Americano (come darti torto) e questo mi porta a pensare al linguaggio che utilizzi. Molto british, ad eccezzione di quel "You ain't never gonna be alone". Certo non è una gran cosa però..

Secondo me sarebbe una grande miglioria invece trasformare l'header in un link, magari ad una pagina dai contenuti più stringati, e con ben in mostra i pulsanti Buy Now.

Più in generale, inserirei un box con un bel "Buy Now" che segue la navigazione al margine sx o dx (che preferisco) della pagina.

Obeah Man

[piernicola]

Obeah Man

Più in generale, inserirei un box con un bel "Buy Now" che segue la navigazione al margine sx o dx (che preferisco) della pagina.
Obeah Man

Al raduno abbiamo già parlato di qualcosa di molto simile (spero che Stuart se ne ricordi)

Ps @stuart: got mail

[Stuart]

Ciao Obeah Man

Interessante l'esperienza di navigazione (direi COOL! )

Al di là del "you ain't never..", ho scritto molto di getto i contenuti e rileggendola molto velocemente 2 minuti fa mi sono accorto di almeno 3 typos e 2 errori di ortografia gravi (write AT ... orrendo!).

Ti confermo che lo script è in vendita all'estero, in italia è gratuito (linkware, aggiungerei). Diversamente non avrei mai osato postarla in web marketing (ho tanti difetti ma non sono uno spammer ).

Ripeto, è solo un esempio pratico a puro supporto delle classi javascript scaricabili da questo thread. Per fare vedere il lavoro finito, insomma.

Le possibilità di utilizzo dello scrolling interno, ai fini della creazione di landing monopagina con navigazione, sono infinite. Anche meglio dell'esempio che ho postato


Cordialmente,
Stuart

[paocavo]

la vedrei ottima come soluzione anche per i forum (col menu di navigazione - sottilissimo - all'inizio di ogni post...sopratutto se sono di agoago )

[InuYaksa]

Secondo me i siti monopagina, come questo, hanno un difetto.
Non si può più usare il tasto "indietro" del browser.
E credo che questo possa limitarne l'utilizzo ad un grossa fetta di utenti abituati, quasi come fosse una verità assoluta, usare solo e soltanto quel tasto per tornare indietro.

[eLLeGi]

Ciao Stuart, la novità lascia stupiti.
Tanto stupiti però da creare un attimo di smarrimento nella navigabilità.

Nel tuo caso la grafica è molto bella e accattivante, e ti voglio dire la mia prima impressione, sempre che ti faccia piacere il mio parere .

1.Nella intro i link sono quasi fusi nel testo per cui non ci si rende subito conto di dove cliccare.
2.Nella seconda pagina i link non sono più nella posizione di prima, ma leggermente spostati ma si capisce meglio dove sono.
3.Con la mia risoluzione video (1280x1024) vedo già parte della pagina successiva, non so se sia voluto.
4.Altro problema da me riscontrato è dovuto al fatto che cliccando sulle varie sezioni non si capisce dove mi trovo, a mio avviso lascerei la barra dei link sempre con tutti i link indicando con un colore differente il menù selezionato.

Per il resto mi piace, complimenti per l'idea.

p.s.: Sarei interessato al prodottino pubblicizzato

[KING_Hack]

Stuart

That's it.
Ho testato il funzionamento dello scrolling su IE 6, Firefox 1.5 e Mozilla 1.6
Mi manca Safari per Mac (sorry).

L'ho testato con Safari 1.3.2 e la visualizzazione è uguale come su Firefox... tutto ok insomma

[Catone]

Bellissima Stu! Poi ci sono i gusti, so bene della tua predelizione per il nero e/o comunque i toni dark, ma magari, sarebbe bello vederla anche con colori più chiari. La butto: perchè non creare uno switcher (ben in evidenza) per cambiare al volo i colori della stessa?

Poi, lo so sono rompiscatole, mi pare che il bordo destro sia un px più esteso del sinistro e piazzerei un bordo bianco di un px su ciascuna immagine. Lo sfondo del body mi sembra un po' carico, brucia un po' quando viene eseguito lo scrolling, lo vedrei meglio con un'opacità più bassa. Pareri personali cmq!

Poi, a livello di accessibilità, mi permetto, direi che lo scrolling è un po' troppo veloce. Immagino che cmq disattivando il js corrispondente tutto funzioni come con ancore normali.

Ad ogni modo, come al solito, un esempio per tutti!

[sitionweb]

Stu, che dire... è semplicemente magnifico, complimenti davvero!!

Splendida l'idea delle fiamme prima dei contenuti, danno un qualcosa di moooolto proibito...

[Elena]

Vorrei dire anch'io la mia: non vedo nessuna miglioria rispetto alle àncore standard, anzi, non funziona il "back" del browser, che vi garantisco gli utenti usano tantissimo, e il passaggio all'informazione è più lento.
Boh, non so, io la penso così,
ciao