Risorse per Web Designer, Developer, Web Marketing, Seo e Photoshop

Come creare il Background per il nuovo Twitter

Pubblicato in Social Network, Tutorial

Da pochi giorni è stata rilasciata in prova la nuova versione di Twitter. Bella e multimediale per alcuni, pessima e poco intuitiva per altri, tra le differenze di questa versione una è che il layout è più largo, quindi i nostri vecchi background che potevano usufruire di maggiori spazi ora verranno tagliati e visualizzati male. Non ci resta allora che creare un nuovo background compatibile con il nuovo layout del servizio di microblogging.

Il nuovo Twitter utilizza un layout fluido, questo significa che la finestra del browser o la risoluzione dello schermo possono influire sulla larghezza delle colonne, e di conseguenza sulla dimensione di spazio utilizzabile per lo sfondo.

Personalmente ho preso in considerazione una risoluzione di 1440 pixel di larghezza, perchè con misure inferiori è veramente difficile sfruttare il background come eravamo abituati a fare con il layout quasi in pensione.

Ci sono alcuni punti che bisogna tenere a mente quando si progetta il nuovo sfondo Twitter:

• Il nuovo design ha una barra sempre presente sull’header di altezza 40 pixel che occupa l’intera lunghezza della pagina web. Attenzione però, non tenetela in considerazione nel psd perchè il vostro sfondo partirà sotto di essa. Cosa invece che può interessare è che vi sono 20 pixel in altezza tra questa barra e l’inizio delle due colonne.
• La distanza a destra e a sinistra delle colonne visto che il layout è fluido può variare in base alla risoluzione e le dimensioni della finestra del browser. Comunque la spaziatura è significativamente ridotta rispetto al vecchio layout.
• La colonna a sinistra (quella principale) è sempre larga 540 pixel, infatti anche se la vediamo su uno schermo con risoluzione 640×480 rimane invariata, mentre la barra laterale può variare con una risoluzione di larghezza inferiore ai 1.130 pixel. Per risoluzioni superiori invece si fissa a 500 pixel.
• La barra sulla destra ha una trasparenza di circa il 75%, il che significa che quel che sceglieremo di utilizzare per lo sfondo si intravederà sotto questa barra e potrà influire sulla leggibilità.

Nella risoluzione 1440×900 ci sono circa 500 pixel liberi su ciascuno dei due lati, allora per sfruttarli entrambri ho creato il mio nuovo backgroud in questo modo:

Dopo vari test ho notato che le immagini usate sul lato destro davano problemi in particolare, con risoluzioni inferiori ai 1440 px dove la sidebar copriva le immagini che a causa della trasparenza si continuavano ad intravere e rendevano difficile la leggibilità.

Allora ho optato per questo nuovo background:

Sembra che 1440 pixel sia la soluzione migliore se si vuole utilizzare del contenuto nel background e lasciare un messaggio come eravamo abituati a fare con la precedente versione.

Attualmente ho lasciato lo sfondo largo 1440 pixel ma ne ho già creato un altro nel caso preferirò mantenermi stretto e rendere compatibile il background anche per la risoluzione 1280 × 800. In questo modo su ciascun lato avremo liberi solo 112 e 113 pixel.

In rete esistono parecchi template PSD utili per creare uno sfondo per il vecchio layout Twitter, ma è difficile trovarne utili per il nuovo. Questa difficoltà l’ho riscontrata anche io ed è proprio per questo che ho deciso di scrivere questo articolo.
Infatti ho creato 2 Template PSD per le risoluzioni 1280×900 e 1440 x 900 con le varie sezioni già create, in questo modo sarà più facile creare il vostro sfondo e avrete a disposizione la base con le varie sezioni su cui lavorare già suddivise.

Se avete bisogno di una risoluzione diversa fatemelo sapere nei commenti e vedrò cosa posso fare.

Fonte 1: Mashable Fonte 2: NewTwitter

Tweet

Autore: Salvatore Sodano

Salvatore inizia a svolgere l’attività di web designer nel 2001 alla quale poco dopo affianca quella di graphic designer. Negli ultimi anni la passione per Seo e web marketing prende il sopravvento e lo spinge a curare oltre all’estetica dei siti anche ottimizzazione, posizionamento per i motori di ricerca e usabilità. Contatta Salvatore