Cosa Ho Imparato nel Disegnare il Mio Background per Twitter

Un modo efficace per stabilire un contatto con nuovi lettori?

scritto da Francesco Gavello [+] il 26 giugno 2009 | 25 Commenti in: Blogging Tips

Nella giornata di ieri ho dato una lucidata al mio background su Twitter; ho pensato che potesse rappresentare il giusto spunto per una serie di considerazioni. Poco più in basso ci sono alcuni numeri, qualche idea e un paio di consigli dedotti “sul campo”.

Non ho sempre utilizzato un background personalizzato.

Al contrario, per molto tempo ho optato per un semplice colore uniforme senza troppi fronzoli, seguito poi solo dopo molto tempo da qualcosa di simile ad un logo e un piccolo claim.

Ma vista la sua indubbia utilità (e il recente redesign del blog), volevo che anche Twitter potesse riflettere parte dello stile grafico che ho deciso di adottare.

Ho cominciato quindi a passare in rassegna gli account “professionali” più famosi che avessi a portata di mano: @shoemoney, @sitepointdotcom, @johnchow, @rww, @problogger, tra i tanti.

Ognuno di essi ha brandizzato il proprio account in modo unico, ed ero sicuro che avrei potuto trarne qualche utile consiglio! :)

Cosa rende efficace un background?

La domanda è: cosa determina il valore un buon background?

La risposta dipende in buona parte da ciò che tenti di ottenere da Twitter. Per me, e per qualunque blogger che cerchi di portare nuovi utenti sulle sue pagine, la risposta era ovvia: un buon background si valuta in base alla capacità di passare il maggior numero di informazioni al visitatore senza che questo debba compiere alcuno sforzo.

Solo qui sta la chiave di tutto.
Ma ecco sorgere due problemi.

  • Non tutti gli utenti navigano con la stessa risoluzione;
  • Il contenitore centrare copre a seconda delle risoluzione impiegata diverse porzioni del background;

Dunque non è proprio il caso di caricare un’immagine (o fotografia) a caso e sperare in bene. Nella maggior parte dei casi la porzione centrale sarà nascosta dal contenitore dei tweet, e a seconda della risoluzione usata potrebbe apparire dal semplicemente “strano” al “del tutto incomprensibile”.

Tre passi per ottenere un buon background

Assumiamo che esistano ad oggi tre risoluzioni principali con i quali gli utenti stanno raggiungeno il tuo account Twitter: le classiche 800×600, 1024×768 e 1280×1024 pixel.

La prima (hurrà!) la scartiamo d’ufficio: a tali dimensioni il background praticamente non si vede.

Per le restanti due possiamo sparare grosso e impostare l’immagine ad almeno 2048×1500 pixel. In questo modo riusciamo ad avere sufficiente spazio per lavorare ad un layout mediamente complesso ed esteso sulla quasi certamente totale ampiezza del monitor.

Ricapitolando per i più distratti:

  • Lo stream di Twitter occupa circa 760 pixel;
  • Logo e menù occupano, partendo dall’alto, circa 83 pixel;

twitter-size

Cosa vuol dire? Che chiunque cerchi di creare il proprio background ha a che fare con un contenitore al centro della pagina di discrete dimensioni, spaziato dall’alto poco meno di un centinaio di pixel e che soprattutto copre a seconda della risoluzione impiegata precise parti del background.

Nota: a questo punto consiglio a chi si volesse cimentare in questo compito di recuperare la Web Developer Toolbar di Firefox, utile plugin che consente tra le altre cose di ridimensionare al volo la finestra del browser senza impazzire.

Facendo due conti, a 1024×768 rimangono circa 120 pixel per entrambi i lati. Non molti, ma abbastanza per cominciare a prevedere la posizione di alcuni elementi di base e soprattutto il brand da promuovere (in questo caso, il mio nome).

twitter-1024-background

Le cose migliorano nettamente a 1280×1024, con circa 250 pixel per lato pronti ad accogliere ulteriori dettagli. Ecco quindi spuntare un avatar, un paio di rimandi al blog e alle iniziative correlate, assieme ai link più brevi della storia data l’evidente limitazione di questi ultimi. Basta fare un salto su Twitter Backgrounds Gallery per capire come questa risoluzione sia la regina incontrastata tra tutti gli account più popolari sul pennuto.

twitter-final-background

E’ da notare che, se nel resize dalla 1024 alla 1280 lo spazio disponibile a sinistra viene ovviamente ad espandersi, con tutto ciò che ne consegue in quanto a “modularità” dei contenuti che si possono presentare, così invece non avviene nello spazio opposto, tanto che tra le due risoluzioni è possibile prevedere un vero e proprio switch di contenuti sul lato destro, che viene di volta in volta nascosto o mostrato dal contenitore principale dei tweet.

Qualche consiglio

  • Non importa cosa scegli, ma modifica oggi stesso il tuo background. I vantaggi sono molti e con una qualsiasi query su Google puoi trovare ottimi sfondi in pochissimo tempo senza dover possedere nessuna abilità tecnica.
  • Prendi come riferimento la 1280×1024, ma non dimenticare di rendere comprensibili le tue informazioni principali anche a risoluzioni più basse.
  • Mantieni uniformi i colori del layout. Integra il contenitore principale e la sidebar modificandone i colori di testo e sfondo. Puoi accedere al pannello di controllo da “Settings” – “Design” – “Change design colors”.
  • Evita di inserire qualsiasi dato troppo importante entro gli 83 pixel dall’alto. Nel migliore dei casi sarà parzialmente coperto dal logo di Twitter o dal menù di navigazione. Molto meglio partire da almeno un centinaio di pixel e dedicare i primi 120 pixel da sinistra alle informazioni che per te sono davvero vitali.
  • Gioca sulla psicologia della Gestalt e sul il principio di chiusura. Con pochissimo spazio a disposizione non è sempre necessario lasciare adeguatamente spaziati loghi e forme. Gioca sulla capacità dell’occhio di completare le informazioni mancanti e di rendere riconoscibile il tuo logo o il tuo avatar anche se non completamente visualizzato.

Giocare a nascondino

Molti utenti, soprattutto su OS X, non mantengono il loro browser a pieno schermo durante la navigazione. Puoi sfruttare questo fattore per studiare un background che “si lasci scoprire un po’ per volta”.

Molti, come Problogger o ShoeMoney, usano una soluzione tanto semplice quanto efficace. Assumendo che la risoluzione più usata attualmente sul web sia la 1024×768, è sufficiente “sporcare” lo spazio disponibile sulla sinistra con del contenuto semi nascosto dal contenitore centrale. Problogger usa un lato del suo faccione, Shoemoney parte di una fotografia.

Ridimensionando la finestra per scoprire cosa c’è dietro, ecco che sul lato destro vengono presentate all’utente tutte quelle piccole informazioni che (voilà) stiamo cercando di far davvero notare. Semplice ed efficace! :D

twitter-background-tip

Qualcos’altro da leggere

Un paio di altri link che mi sono tornati utili.

E tu, hai già pensato ad un background per Twitter?
Credi che possa essere utile per stabilire un primo contatto con potenziali follower e lettori?

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

25 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. Stefano/asterisco ha detto:

    Approfitto di questo articolo per togliermi qualche dubbio.

    Ho da sempre avuto dei miei dubbi sull’uso dei background nelle pagine di twitter. Capisco bene il voler promuovere il proprio logo e la propria immagine: in fondo anche io ho personalizzato anche se di poco la mia pagina. Ciò che non capisco è il voler dare troppe informazioni. Ho osservato che il trend è quello di fornire nel background informazioni come le url di tutti i possibili profili dei vari social network, questa è una cosa che trovo insensata. Non potendo cliccare sugli indirizzi o farne il copia e incolla mi troverò per forza di cose davanti a due scelte:

    1. ricopiare “a mano” l’url nella barra degli indirizzi
    2. visitare il sito principale (quello inserito nel profilo) e quindi cliccare sul link che mi interessa.

    Se l’indirizzo non è troppo lungo potrei anche optare per la soluzione numero 1, ma per esperienza mi ritrovo molto più spesso ad optare per la soluzione due.

    Rispondi
    • Francesco Gavello ha detto:

      Come soluzione a metà strada ci vedrei bene l’utilizzo degli short url.

      Ma anche qui, ad abusarne, il risultato è spesso un “pastone” di lettere senza senso che l’utente dovrebbe copiare a mano per non si sa quale motivo preciso.

      ReadWriteWeb (@rww) taglia la testa al toro e propone in bella vista solo l’URL del portale, lasciando poi seguire una trafila di account twitter di altri autori. Meno link a sporcare la pagina, ma di nuovo una serie di “@user” che lasciano il tempo che trovano.

      L’opzione numero due, già, è sicuramente quella sulla quale si dovrebbe puntare di più.

      Ma anziché spedire gli utenti direttamente alla home, ho trovato che realizzare una pagina di presentazione “ad hoc” che spieghi a chi arriva da Twitter chi sia l’autore, cosa faccia e cosa aspettarsi dai suoi post possa essere un efficace passo in avanti.

      Rispondi
  2. elisa ha detto:

    Anche l’occhio vuole la sua parte. Questa massima vale un po’ per tutto, quindi anche per Twitter. Personalmente non ho personalizzato per niente il mio background Twitter, ma credo che un giorno lo farò, se non altro per curiosità.
    Penso anch’io, come Stefano, che raffigurare url non cliccabili sia una cosa abbastanza inutile; un background credo che debba avere una funzione principalmente estetica, non usiamolo per fare spam esplicito! ^^
    Ovvio che un design simpatico e originale può incuriosire e spingere ad approfondire la conoscenza e l’esplorazione.

    Rispondi
    • Francesco Gavello ha detto:

      Beh, l’unico valore del riportare link non cliccabili credo sia quello di puntare a lasciarli impressi nella mente dell’utente. A questo punto trovo funzioni molto meglio presentare URL semplici, compatti, magari privi degli scontati “http://www.”

      E naturalmente associarli a qualche tagline che ne dia un senso :)

      Rispondi
  3. Kikee ha detto:

    Ciao Francesco,

    complimenti per questo bell’articolo! :-) Il nuovo redesign del tuo blog (e anche quello del tuo profilo Twitter) mi piacciono molto! Ti leggo da tanto e anche se non ho mai commentato (se non in occasione del primo fantastico Web Magazine) trovo i tuoi post ricchi di ispirazione e spunti interessanti.

    Questa mattina ho seguito il tuo esempio, e ho cambiato il background del mio Twitter: appena dopo aver letto il tuo articolo mi sono imbattuta in questo interessante post sul mio feed ( http://www.webdesignerdepot.com/2009/06/100-creative-twitter-backgrounds-featuring-illustration/ ) e ho deciso di prendere spunto da alcuni dei design proposti.

    Bisogna dire che ce n’è per tutti i gusti: per promuovere una marca, un blog o una persona penso che sia molto indicato il design che hai scelto tu (con barra laterale), mentre per puro senso estetico devo dire che mi piacciono parecchio gli sfondi tipo questo http://twitter.com/rogieking (al quale mi sono ispirata). :D

    A presto!

    Kikee

    Rispondi
    • Francesco Gavello ha detto:

      Splendida selezione! :O

      Devo dire di apprezzare molto anche tutti i background che fanno il verso a Twitter stesso. Toni sull’azzurro celeste quasi accennati, nuvole e dettagli quasi in pixel-art.

      Se ne trovano molti sul link che hai segnalato. Davvero ottimi :)

      Rispondi
  4. Attilio Viscido ha detto:

    Vediamo quanto sei bravo a disegnarne uno per Meemi.com :D

    Rispondi
  5. Mattia ha detto:

    Bello… però guardandolo con una risoluzione 1440×900 si nasconde tutta la parte dx.

    Non si può avere tutto eh….

    Rispondi
  6. Giovanni ha detto:

    Veramente un ottimo lavoro! Mi hai definitivamente invogliato a scegliere uno sfondo per il mio Twitter

    Rispondi
  7. [...] interessante e dettagliata spiegazione di Francesco su come preparare un proprio background per Twitter. Come sempre si basa sulla sua esperienza personale, quindi c’è da fidarsi (e qualcuno mi [...]

    Rispondi
  8. [...] per creare un nostro sfondo personalizzato su Twitter, la piattaforma numero 1 di Microblogging. Continua a leggere… AKPC_IDS += “3336,”;Ciao! Sei nuovo/a da queste parti?, perchè non ti iscrivi al feed RSS per [...]

    Rispondi
  9. [...] Cosa Ho Imparato nel Disegnare il Mio Background per Twitter [...]

    Rispondi
  10. [...] 09) Cosa Ho Imparato nel Disegnare il Mio Background per Twitter [...]

    Rispondi
  11. [...] Cosa Ho Imparato nel Disegnare il Mio Background per Twitter [Francesco Gavello] [...]

    Rispondi
  12. TheNorba ha detto:

    Ottimi consigli, dopo aver letto il tuo post ho deciso di dare una rinfrescata al background del mio profilo twitter! :)

    Rispondi
  13. sfondi ha detto:

    Complimenti per il post bello lungo :D

    Rispondi
  14. [...] oggi sono davvero felice di comunicarti che il background di @gavello, del quale ho avuto modo di parlarti qualche giorno fa, è stato selezionato per comparire in home tra i contenuti in [...]

    Rispondi
  15. [...] può cambiare un po’ la grafica tra cui lo sfondo e i colori, grazie ai consigli del blogger FrancescoGavello ho imparato a cambiare lo [...]

    Rispondi
  16. [...] giorno fa leggevo un post interessante di Francesco Gavello che racconta la sua esperienza nell’affrontare il disegno del suo nuovo sfondo per la pagina [...]

    Rispondi
  17. [...] di sfondo della propria pagina personale. Ho appreso consigli e dritte per gli sfondi da Francesco Gavello, futuro guru del web [...]

    Rispondi
  18. [...] ringraziare l’articolo di Francesco Gavello “Cosa Ho Imparato nel Disegnare il Mio Background per Twitter” dove ho trovato indicazioni utili per le misure da adottare, link ad approfondimenti e ad [...]

    Rispondi
  19. [...] ho optato per qualcosa di più semplice e simpatico come puoi vedere, ma ti consiglio di leggere questa fantastica guida che nella quale Francesco Gavello è sicuramente più bravo di [...]

    Rispondi
  20. valerio ha detto:

    Questo è il mio tweet lair http://twitter.com/sospiro86

    cosa ne pensate, mi è uscito bene ?

    Rispondi
    • Francesco Gavello ha detto:

      Ciao Valerio,
      assicurati di estendere il background almeno fino a 2.000px in tutte le direzioni, giusto per stare sicuri. Attualmente risulta troncato su una 1680px.

      Alternativamente puoi simulare una sfumatura che si adagi sul colore di sfondo, così da usare immagini più leggere da scaricare ma comunque d’impatto.

      Tieni anche conto che il nuoto Twitter ha rimescolato un po’ le carte. Ora sono molto più in evidenza mini-bio e link (e questo articolo merita un prossimo update). Lo spazio visibile a lato del contenitore sotto alla 1280px è davvero minimo (parliamo di una cinquantina di pixel).

      Rispondi
  21. Belieber ha detto:

    Grazie mille! Ma volevo sapere una cosa in particolare: come si mette il background esteso? Perchè io riesco solo a metterlo a mosaico o centrato o spostato a destra o sinistra…. qualcuno saprebbe aiutarmi? grazie ancora! :)

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!