Le risposte principali a questa domanda sembrano convergere su un paio di candidati (oppure sono io a leggerli più spesso di altri): Pinterest e Google Plus.

Per qualcuno il nome di Google Plus sembrerà strano se citato come emergente, ma non più di tanto per certi aspetti; in questi articoli viene citata la sua voglia di emergere (leggasi: scalfire il predominio di Facebook), questo “nuovo” network, ha tutti i vantaggi Google, veloce, pulito, per qualcuno spartano, ha a disposizione tutti gli strumenti di Google, eccetera, eccetera…
ma non riesce a spuntarla più di tanto, sembra legato a una fascia di geek (o nerd), poi ci ha provato a risalire la china rilasciando la possibilità di creare Pages, come le fan pages di FB, ma, ma, ma, sono sempre i ma che contornano la sua evoluzione…

Leggendo altri articoli, altrettanto recenti, sulla SEO, anche qui il nome di G+ spunta prepotentemente; in pratica si annunciava che nei risulati delle ricerche (su G), la presenza di Google Plus sarebbe stata piuttosto pesante e quindi influente.

Le risposte a questa notizia non hanno tardano a farsi sentire, ed è in atto una critica da parte di Twitter verso Google e riguarda i risultati nelle ricerche. Già non scorrono buone acque tra i due, ma l’osservazione mi sembra da considerare per bene, perché in questo caso non è il contenuto a essere influente ma il contenitore, quindi essere su G+ porterebbe dei vantaggi.

La discussione è aperta, saranno interessanti gli sviluppi, visto che Google ha lanciato la funzione “Search plus Your World” che consente la ricerca nei canali sociali, anche se è possbile escludere dai risultati i “personal results”, ovvero quelli che si riferiscono a Plus, (e questo post spiega come si fa). La funzione Search plus your world in italia, non è ancora attiva; ma le attenzioni verso l’approccio social di Big G ha interessato anche la Federal Trade Commission sull’utilizzo dei dati privati, staremo a vedere come si muoverà Google.

Per quanto riguarda Pinterest la mia opinione è facile e diretta: mi piace.

Molto lo fa l’aspetto, ha un bella interfaccia, funzionale e semplice, e si basa sulle immagini, con una idea da Bookmark site/tool, come il nuovo Stumbleupon, o gli Stack di Delicious, un degno avversario potrebbe essere GimmeBar, una via di mezzo tra Pinterest e Stumbleupon.

Con Pinterest puoi dire che una immagine ti piace esprimendo la tua preferenza, oppure la puoi riproporre, un repin, agli altri.

È possibile creare delle raccolte a tema, seguire altre persone o eguire solo delle collezioni.

C’è anche una parte di social commerce, infatti alcune immagini sono di veri e propri prodotti in vendita, con prezzo dichiarato, sono proposte sia di marchi che di privati; la ricerca principale di queste proposte è un menu, che li raccoglie per fascie di prezzo, oppure si possono incontrare queste proposte in mezzo al flusso delle altre immagini, da questo si può notare che in questo modo la pubblicità sparisce, in una sorta di product placement integrato, è inesistente e al tempo stesso è il prodotto a di-mostrare la sua vendibilità.

Insomma usarlo è facile, intuitivo e bello, sarà che le immagini sono sempre ottime, chi partecipa al network sembra basarsi sempre su una scelta dettata dalla ricerca e da un sensibile gusto estetico.

Per capire come funziona nel dettaglio, questa presentazione esaustiva su Pinterest, illustra nel dettaglio tutte le funzionalità.

Io non aspetterò l’anno per capire chi ha vinto o cosa voglio usare, tutto quello che c’è di utile vedrò di usarlo al meglio e al più presto, ci vediamo su Pinterest e su Google Plus.

A questi tweet va tutto il mio: GIAO GIAO!

Mentre un saluto lo dedico a chi seguo e a chi mi segue, alcuni, di tanto in tanto, li vorrei proprio incontrare.

Vedere dove vanno a spegnersi quelle famosissime di Las Vegas è ancora più intrigante, sarà che come figlio di un barbiere speravo sempre che mio babbo prima o poi avesse in mente di comprare la famosissima insegna da barbiere americano, quella con dentro il torciglione girevole a fasce rosse e blu.

Alcune mie riflessioni su questo atteggiamento:

• Se la tua mail finisce nello spam hai praticamente perso, in confronto è molto meglio un commento negativo a un post, in quel caso se la discussione è aperta si può recuperare con un dialogo che è spesso un vantaggio per entrambe le parti, invece una volta isolato nella cartella spam…
• Se hai più paura di un commento negativo, che di finire cancellato (dalla posta), allora ti rassicura la tua corsia preferenziale verso una cartella dove il contenuto viene periodicamente cancellato?
• Se la tua comunicazione pressante finisce in una blacklist e così le tua email non vengono neanche recapitate (perché spammi veramente), togliti dalla testa la convinzione che la cosa non ti costi, anzi sappi che d’ora in poi la pagherai 2 volte: prima in immagine e poi nell’assistenza per cancellarti dalle blacklist.
• Se la tua strategia è sparare nel mucchio “tanto poi qualcosa si prende” sappi che, di furbi che annusano gli ingenui come te, ce ne sono tanti in giro e non sono proprio dei bei clienti, anzi si attaccheranno a ogni tuo errore…
• Nel grande numero che vuoi ottenere, la percentuale di potenziali clienti la puoi scoprire solo indirizzo per indirizzo se sei bravo e hai mesi da perdere, forse era meglio capire a chi rivolgersi e come farlo;
• Se tutti dobbiamo desiderare quello che vendi, sei sicuro di volerlo proporre con una mail che il tuo cliente non ti ha chiesto?

Il resto lo lascio a chi vuole ragionarci sopra, ma se avete ulteriori consigli per far pensare questi illuminati del mail marketing fatemi sapere, i commenti sono aperti; invece per chi compra “banche dati di indirizzi email” mi auguro si sia fermato alle prime righe di questo post, non voglio rovinare un bel progetto a nessuno.

Spot: Sono andato al RomagnaCamp, a Marina Romea

Al Romagnacosa?

mmm… al RomagnaCamp, al Bocabarranca…

ma non è un bagno, dove fanno concerti?

si, il posto è quello, e sabato, dalla mattina c’era questo camp.

insomma sei andato in un bagno a Marina Romea… a far cosa esattamente?

potevo chiudere la discussione con un bel: – a prendere il sole – invece sono un patacca e ho insistito nel voler spiegare a tutti i costi:

ho partecipato al Camp e [maledetto il momento in cui l'ho detto] ho portato un ignite.

i g-cosa?

scusa, ma non puoi cercare su internet queste cose e così faccio a meno di spiegartelo?

scuuusa, stiamo chiacchierando, volevo solo sapere…

… allora, ok… ho partecipato a questo camp dove ci sono stati interventi su “internet”, cose come e-commerce, social network…

allora hanno parlato di facebook?

… no, non in modo specifico, anzi poco, così sul momento posso dire che le cose che girano ancora per la testa sono queste 2:

• le possibilità dei servizi di geolocalizzazione
• e che gli e-commerce sono progetti complessi

facebook… mah, non ricordo niente su facebook, posso dirti che gli interventi li facevano le persone…

bella scoperta e chi doveva farli…

non intendevo dire questo, velevo dire che non c’era Tizio con titolo di Caio dell’Azienda Sempronio. Ma sono persone che portavano i loro argomenti senza farti cadere dall’alto la loro presenza, c’erano persone che nel loro campo hanno il loro bel peso tutto dovuto alla loro riconosciuta esperienza.

non come te che non ti si conosce

che c’entra, io sono un grafico, e poi sono timido…

chiamala timidezza, lurker

insomma… le relazioni dei vari interventi avevano una tema comune e ampio come la rete di cui parlavano, sono stati vari, alcuni avevano un aspetto sociologico, alcuni più definiti, dedicati a temi molto circoscritti, altri più… insomma a questo punto scrivo un post con i link alle presentazioni, tipo:

• Learning by Dancing di Alessandra Farabegoli (Organizzatrice del Camp con Luca Sartoni)
• Instagrammers di Lara Vedovato
• RomagnaCamp is trending di Lorenzo Viscanti
• Come convincere il capo a investire sui social media di Francesco Astolfi

e sono solo alcuni, ce n’è da passare di tempo a studiarseli, anche se dal vivo sono ovviamente una cosa diversa, alcuni concetti di quelle presentazioni mi tornano in mente non appena vedo le slide.

e tu con il tuo i-g-nait?

il mio ignite? come gli altri, durata 5 minuti, 20 slide, quindi 15 secondi a slide.

Se sei pigro e non hai voglia di leggere:

così?!!

si, è così, c’è da correre, devi prepararti, sai il: “more is less” e non puoi perderti, meglio scegliere cosa dire e sintetizzarlo al minimo, puoi aver bisogno di tempo e certe parole non hai idea di quanto sembrano lunghe da pronunciare.

come sei difficile

non ti ascolto più… avevo il portatile morto e le ciabatte dove avere un po’ di corrente erano come i bagni all’oktober fest… e intanto tutto andava in diretta su Twitter e Instagram.

quindi ti sei perso il meglio

ma se ero lì! ma chi ti capisce è bravo… sono contento d’averci partecipato e voglio partecipare anche al prossimo. Se hai voglia di saperne di più vai sul sito del romagnacamp, cerca l’hashtag ufficiale #romagnacamp su twitter. Una frase di ottavotasto descrive la situazione: #romagnacamp ed il brivido di conoscere di persona una buona parte del proprio blogroll…

?!

ovvero incontrare fisicamente persone che apprezzi per quello che raccontano nei loro blog e sui social network, con cui dialoghi, di solito solo on-line. e allora Ciao!

Ciao?!

Sì: – Ciao! – puoi andare?! Devo finire di scrivere una cosa, mi puoi lasciare un attimo?

si… Ciao! vado a chattare su FB con i miei millantamila amici.

…

Intanto molti hanno già illustrato perfettamente il clima che c’era, tipo Mentine, o Farfalle a scuola e Nicola Iarocci che ha dovuto correre perché era in chiusura e prima degli ignite, e proprio alla fine degli ignite il camp si è chiuso, incorniciato dal mare e l’atmosfera del tramonto (di lì a poco un manipolo di partecipanti al camp cenava in un bagno lì vicino).

Io sono scappato a casa e non ho fatto in tempo a rivedere e ringraziare Alessandra Farabegoli e Luca Sartoni, che l’hanno organizzato, allora ne approfitto e lo faccio adesso: Grazie, per il RomagnaCamp!

Molte volte è proprio l’accostamento tra i caratteri a segnare la personalità di un prodotto grafico e se volete migliorare l’aspetto e l’uso delle vostre pagine web, quello tipografico si rivela fondamentale, basta pensare i vostri contenuti vengono letti dagli utenti, quindi quale migliore tecnica grafica se non il migliorare l’aspetto e la leggibilità del vostro sito?

Come ho già scritto in un altro post: Presentazioni sui web font, i dettagli sulla tipografia on-line oramai sono importanti e gestibili come nell’editoria. Non proprio come in un software DTP ma negli ultimi tempi le cose si sono (e si stanno evolvendo sempre meglio).

Volete un esempio? Non ci facciamo caso, ma leggere un libro non ci costa fatica, se è il testo è gradevole, invece notiamo di più un libro “illeggibile” più di uno bello, quello che è nascosto nel libro leggibile è proprio il dettaglio del carattere che stiamo leggendo. Ogni particolare del carattere può sembrare banale al lettore; ma c’è da notare che molte volte il font che è nei nostri libri ha minimo qualche decennio di storia, per non parlare di alcuni che hanno raggiunto i nostri occhi attraversando tranquillamente un secolo. Il web e nel particolare i siti sono molto più recenti di molti caratteri classici e comuni (e per comuni intendo font che sono, sì utilizzabili per il testo e la sua lettura, ma sono diventati famosi per il loro utilizzo). Da come si stanno evolvendo servizi e tecnologie on-line, anche l’aspetto invisibile della tipografia sta migliorando e tiene il passo con strumenti utili e ben più consolidati, come la carta stampata.

Oggi l’aspetto e le caratteristiche tipografiche possono essere sfruttate meglio, e giocare sugli abbinamenti e accostamenti tra i caratteri può far distinguere le pagine del vostro sito.

Per poterlo fare le tecnologie web e gli strumenti attuali sono tanti, uno tra tutti (ed è anche il mio servizio preferito) è quello dei web font di Google.

È semplice e pratico, in pratica si tratta di inserire piccole parti di codice nell’HTML e nel vostro foglio di stile (CSS), e potrete così utilizzare di una notevole quantità di caratteri in modo gratuito. Per maggiori dettagli sul questa tecnica potete leggere: Utilizzare i web-font di Google su Blogger. È descritta sia la tecnica di embedding, che l’utilizzo all’interno del servizio di blogger.

http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf

Se avete domande al riguardo, sono pronto a parlarne.

La prima tratta le specifiche CSS della dichiarazione @font-face, e delle varianti che ogni browser richiede per soddisfarla, le diverse tipologie di font:

• OTF OpenType Font
• TTF True Type Font
• EOT Embedded Open type
• WOFF Web Open Font Format
• SVG Scalable Vector Format

E anche tutti i relativi problemi di licenza su questi font.

altre presentazioni, dopo il salto ->

In questa presentazione viene illustrato il passaggio dalle varie tecniche che si utilizzano per sostituire il testo con immagini (sFIR & Co) alle nuove tecniche di embedding via font-face.

Esempi grafici di come utilizzare i web font, e un lista siti che forniscono il servizio di embedding di free-font per il web.

La spiegazione di 3 nuove tecniche tipografiche con i CSS:

• @font-face
• text-shadows
• multiColummn text

Rapida carrellata di tecniche web-tipografiche:

• cufòn
• sfir
• @font-face
• typekit

Una presentazione approfondita sulla tipografia: della carta al web

Spiegazione della specifica CSS: @font-face

Anche se questa di WordPress non è la sede più adatta voglio descrivere come si possono integrare i web font di google sulla su piattaforma di Blogger.

Aggiornamento 29-06-2011

È stato aggiornata la sezione Google Fonts alla versione 2

Intanto vi consiglio questo bookmarklet che individua i web font inseriti in una pagina web. Ad esempio potete andare su minimu.it e vederlo in funzione

Consigli per come utilizzare i Web Font di Google su Blogger

In questa directory di Google trovate tutti i font che è possibile utilizzare per modificare l’aspetto tipografico sul vostro Blog.

Il procedimento per utilizzare i web font è molto semplice e le indicazioni si basano tutte su 2 componenti CSS:

1. il link al web font di Google
2. il nome del font da usare nelle dichiarazioni del foglio di stile

Partendo dalla pagina principale Google WebFont potete scegliete un font che vi piace dalla lunga lista.

Cliccandoci sopra (e come viene indicato a rollover), entrate nella la scheda del font, questa ha più sottovoci, la prima ad esempio indica le specifiche del font scelto, la voce che serve è l’ultima, ed è ben evidenziata: Use this font

L’articolo prosegue ->

Cliccando su quel link vengono mostrate nella pagina 2 parti di codice:

1. è il link di riferimento, funziona come l’incorporamento di un CSS esterno in una pagina html, richiama un indirizzo in cui viene preso il font, e va inserito nell’header della pagina
2. la seconda riga di codice è un esempio di come richiamare il font nel vostro foglio di stile: inserendo correttamente il nome del font (attenzione ai nomi composti da più parole sono compresi tra virgolette)

1. il link di riferimento va copiato e inserito in blogger, seguendo questo percorso: una volta entrati nel vostra bacheca di blogger, andate nella sezione Design, e scegliete la sottovoce: Modifica HTML, nel secondo campo: Modifica modello e vedrete tutto il codice della pagina, è lì che dovete lavorare per l’inserimento, cercate all’inizio del codice il tag <head> e subito dopo inserite tutto il link del font che avete copiato.

ATTENZIONE: il codice del link che vi viene fornito per il font scelto, per Blogger non è esatto.

Inserito così come l’avete copiato, e dopo aver salvato le modifiche vi darà un errore XML; per Blogger questo link non è chiuso; la soluzione è semplice: inserite, alla fine del tag <link>,prima dell’ultima parentesi, uno slash “/” in questo modo questa stringa di codice sia chiusa (fate riferimento alle specifiche XML per i tag senza chiusura).

2. cercate il selettore font a cui attribuire il carattere e scrivete il nome del font che avete scelto, facendo attenzione a riportarlo com’è scritto nell’esempio.

Per utilizzarlo nel campo Modifica Modello prestate attenzione alle variabili dei selettori che sono nei CSS del blog.

Blogger offre la possibilità di modificare l’aspetto di alcune parti tramite l’editor Designer Modelli, questo Editor per poter lavorare sfrutta delle variabili nel CSS, visibili nel campo Modifica Modello, subito dopo il tag <head>, se dovete intervenire su un selettore che è presente in queste variabili, noterete che hanno i valori che sembrano ripetuti 2 volte, sono uno per il valore: default e uno per il valore: value. Se volte essere “assoluti” del corretto funzionamento inserite il nome del font in entrambi i valori.

Ci sono altre opzioni, ad esempio nel caso il font abbia più varianti, per questi caratteri si può scegliere che peso o stile utilizzare (grassetto o corsivo), per questo c’è tutta una sezione dedicat le: API dei WebFont di Google.

Qui troverete tutte le specifiche per un utilizzo specifico dei web font, come l’utilizzo selettivo, o il loader per pre-caricare i caratteri.

Per gli aggiornamenti c’è anche un blog (sempre su blogger) dedicato ai Google Web Font

Un ultimo link a un video che racconta per Google dell’importanza dei WebFont

Questo metodo è detto la tecnica del puzzle: ovvero un modo per collegare visivamente l’immagine del profilo (colonna sinistra) con l’aspetto della landing tab (colonna di destra, con il contenuto della pagina/tab principale del profilo);  in pratica si tratta di modificare l’aspetto della pagina in modo che l’aspetto grafico sembri unico e non suddiviso in 2 colonne.

Prima valutiamo il terreno in cui ci muoveremo.

Caratteristiche

Le principali, gli ingombri e i vincoli:

per l’immagine del profilo, la larghezza massima è di 180 pixel (immagine 1);

immagine 1 - larghezza dell'immagine del proflio (180px)

per l’immagine/contenuti della pagina (tab), la larghezza massima è di 520 pixel (immagine 2);

immagine 2 - larghezza landing tab

Le altezze di questi due invece sono variabili a vostra scelta.

C’è da considerare un gap visivo, è il gradino verticale tra la parte superiore dell’immagine del profilo e il margine superiore della pagina (tab), infatti la colonna di sinistra con l’immagine del profilo è più alta di 57 pixel rispetto ai contenuti sulla destra (immagine 3).

immagine 3 - differenza (57 px)

La colonna bianca che separa l’immagine del profilo dal tab è di 20 pixel.

Obiettivo grafico di questo tipo di layout per FB è di far sparire questo stacco, creare una continuità tra le due parti in modo da farle sembrare un pezzo unico.

I 2 pezzi del puzzle

Immagine del profilo

È la parte dove inserire la vostra comunicazione istituzionale, dove mettere il vostro logo; bisogna valutare che questa immagine rimane costante in tutto il profilo FaceBook; deve contenere tutti gli elementi che ricordino ai visitatori chi siete e come gli parlate.

Bisogna ben considerare questo spazio, con attenzione, perché sono presenti elementi che restano costanti in tutte le altre sezioni del profilo, quindi deve essere comprensibile e deve essere comprensibile/presentabile anche da solo. Questo spazio supporta l’effetto grafico che vogliamo ottenere insieme alla landing tab di destra, il suo agganciarsi ad essa renderà l’aspetto di questa “pagina” unico e uniforme; ma l’immagine del profilo non deve essere schiava di questo effetto. Una volta vista senza il suo compagno (tab), deve essere comunque gradevole e non dare l’idea di sembrare un pezzo mancate di un puzzle. Le informazioni che date in questa immagine del profilo devono essere il più pulite possibile.

Landing Tab

È la parte di destra, quella dei contenuti, questa Tab viene definita così perchè è dove atterrano i vostri visitatori. L’effetto della tecnica del puzzle, oltre a presentarvi con stile e in modo coordinato con il vostro tipo di comunicazione, è di accogliere i nuovi utenti, quindi di farvi conoscere, e di farli diventare nuovi fan, di informarli. Oltre all’aspetto puzzle con l’immagine del profilo deve contenere gli elementi che devono portare l’utente a compiere una azione ad esempio:

• informarlo di una promozione
• farlo diventare vostro fan
• fargli compilare un form per contattarvi

La struttura del tab

L’iframe per Facebook

Per completare questa parte dei contenuti, non si tratta di creare solo la grafica della pagina ma anche il suo contenitore in html (o php). Può sembrare banale per chi ha dimestichezza con un minimo di codice html, trattandosi nella pratica di una pagina web.

Una vera rivoluzione è che fino a qualche mese fa per creare un tab bisognava scrivere il codice in fbml, il linguaggio proprietario di FB, mentre ora è possibile inserire contenuti creando una semplice pagina html.

Questo contenitore verrà inserito in un iframe direttamente da facebook. È quindi una pagina web esterna a FB, deve essere su uno spazio di hosting vostro; una volta pronta, per agganciarla, dovete passare dalla sezione sviluppatori di facebook e registrare questo tab come una applicazione, maggiori informazioni e dettagli (spiegati passo a passo) per questa operazione li trovate a questi link di JuliusDesign e BigThink, vi consiglio di leggerli.

Se non avete dimestichezza con il codice potete anche cercare un editor on-line per generare l’html per la pagina, mi raccomando che non sia più larga di 520pixel!

È utile, nel css della pagina, settare così il body della pagina, visto l’obbligo della larghezza:

body { margin:0; padding:0; border:none; max-width:520px;}

Certo non è il Reset CSS di Eric Meyer, ma è un modo per evitiare debug per colpa della pagina html che caricherete.

L’aspetto grafico

L’operazione più semplice (a volte un po’ troppo), una volta preparata la pagina contenitore, è quella di inserire al suo interno una immagine, che riempie lo spazio che deciderete di occupare. È un metodo pratico e che visivamente consente un aspetto coordinato con la vostra comunicazione e vi consente di essere il più creativi possibile.

Trovate una idea che coinvolga le due parti, può essere uno sfondo unico, oppure una foto che parte dal profilo e prosegue sul landing tab, nella galleria citata a inzio post ci sono esempi molto validi da cui prendere spunto.

Utilizzate contenuti normali per una pagina html, e intendo: testo, filmati, flash… non solo delle immagini sia per questioni di interattività (ad esempio su un rollover di un link), sia per questioni di peso, conoscete la differenza tra il caricare un testo piuttosto che caricare una immagine, vero? Con il passaggio da fbml a html si può utilizzare questo spazio come una pagina web, quindi:

• si possono embeddare video
• inserire slideshow con jquery
• caricare animazioni in flash
• mettere form da compilare

La “Call to action”

Questo lavoro di immagine sul profilo ha, come detto prima delle finalità, oltre all’aspetto estetico, ed è quella di portare l’utente non fan a “conoscervi“.

Una di queste azioni, ad esempio è indirizzare il visitatore a fare clic sul bottone “Mi piace“.

I metodi visivi principali sono questi:

1. indicando realmente la posizione del tasto nella pagina
2. inserendo una copia del bottone “Mi piace” nella grafica del vostro tab
3. embeddare il tasto like di facebook

Nel primo caso: è utile sapere esattamente dove sarà il bottone; è posto sempre a destra, subito dopo il titolo della pagina/tab, quindi la lunghezza del nome e del tab possono variarne la posizione.
Per capire dove è esattamente il bottone per un non-fan, basta togliere momentaneamente la preferenza alla pagina che volte modificare, attraverso il link “non mi piace più” (nel menù sotto l’immagine del profilo), in modo da poter misurare la posizione e creare un elemento che lo indichi nel modo più preciso possibile (vedi immagine 4), per un utente che non è ancora fan.

immagine 4 - indicare il bottone "mi piace"

Nel secondo caso: basta ripetere il bottone e chiedere esplicitamente di cliccare; a mio parere, bisogna far capire bene che quello non è il vero bottone “Mi piace”, a volte gli utenti vengono ingannati e tentano di usarlo anche se è solo una immagine nella vostra grafica.

Nel terzo caso: inserite nel codice della pagina html il bottone direttamente all’interno della landing tab, in questa pagina della sezione sviluppatori su facebook, potete modificare il codice (e copiarlo) che vi serve per inserire il bottone “Mi piace“. Questo, per chi è un po’ pratico di codice html.

Oppure come ho scritto sopra potete chiedere altro, come inserire un form e chiedere di compilarlo.

Per chi mastica php: è possibile mostrare contenuti differenti tra chi è già fan a chi non lo è, ci sono variabili che distinguono il tipo di utente, che ad esempio non mostrano più la richiesta di diventare fan a chi lo è già.

Oltre a questa spinta ad agire, non dimenticate di inserite il link al vostro sito, o al vostro profilo su altri social network (twitter, youtube,  friendfeed, tumblr, …).

Un file per iniziare

Se non volete partire da zero, l’immagine qui sotto è un .png con con gli ingombri principali per questo tipo di layout.

file base per tecnica del puzzle su Facebook

L’altezza delle due parti è puramente indicativa, valutate anche il below the fold, secondo la risoluzione media dei monitor.

Riepilogo e consigli:

1. inserite gli elementi istituzionali nell’immagine del profilo, a sinistra, questa rimane costante anche per tutti gli altri tab del vostro profilo su facebook, è quella più importante, quindi il logo e gli elementi grafici istituzionali come: immagini, date… vanno inseriti qui
2. collegate le due parti visivamente, ma considerate anche il loro aspetto singolo, potrebbe capitare di dover inserire una nuova immagine del profilo non collegata, o di modificare la landing tab, le informazioni delle due parti sono diverse e non devono essere dipendenti l’una dall’altra
3. nella parte della landing page inserite una frase che faccia compiere al visitatore una azione, cliaccare sul mi piace, o compilare un form… sono gli obiettivi di tutto questo lavoro sull’aspetto della pagina
4. se avete delle promozioni legate al profilo su facebook, la parte destra della landing page è il suo ambiente, indicate eventuali altre azioni da compiere, oltre al “mi piace“, si può customizzare il contenuto per chi è fan diversamente da chi non lo è.
5. sempre nella landing page utilizzate la possibilità costruire contenuti che non siano composti di sole immagini, usate tutte le possibilità e l’interattività via codice (dai roll-over sui link in poi), utilizzare video, animazioni in flash, slideshow…
6. inserite i link ad altri profili su altri social network, come twitter, youtube, friendfeed, … e link al vostro sito/blog
7. considerate che i testi inseriti nel codice possono sembrare graficamente più rigidi, ma sono molto più comodi da gestire e modificare e sono molto più leggeri da caricare

Un esempio

È da osservare attentamente, molto bello e interessante, è anche presente nella galleria di BigThink, ed è: 3 Lions Media
Analizzandolo si notano questi elementi:

• nel tab a destra, la parte alta è un flash con una semplice animazione inizale (che prosegue in un loop sul logo)
• sotto a questo flash c’è una galleria, dove in uno slideshow in automatico scorrono alcune immagini
• più in basso altri testi (html) e immagini

In questo profilo hanno sfruttato tutte le “tecnologie” utili per una paginetta larga 520 pixel, hanno sfruttato anche il bianco di fondo della pagina, per rompere ulteriormente l’aspetto verticale delle colonne inserendolo nelle immagini con degli inserti bianchi.

Spero di essere stato esaustivo, e comprensibile, anche se ho parlato di obiettivi diversi dalla grafica e call to action il mio scopo è stato quello di spiegare come creare un layout per facebook diverso dal solito, la sua originalità potrà fare un po’ di lavoro per voi e incerementare i vostri fan/visitatori.

Se avete domande commentate pure!

Lavoro pubblicato qualche mese fa per minimù [ ], catalogo per la collezione primavera estate 2011, foto di Alan Venzi.