Tweet

Vous le savez sans doute, Twitter offre la possibilité aux utilisateurs de personnaliser leur background, c’est à dire le « fond » du profil, à l’aide d’une image proposée, de votre propre image ou d’une simple couleur. Par manque de temps, de compétence en webdesign ou simplement d’envie, il reste bien rare que les twittos en tirent profit en France, bien que cela soit chose (très) commune outre-Atlantique. Que diriez-vous de franchir le pas, et de créer ou d’adapter votre background actuel ?

Quel intérêt ?

Petit flashback : en 2008 et 2009, devant le nombre croissant d’utilisateurs sur Twitter, vous avez été nombreux à avoir su tirer profit de la possibilité de personnalisation de votre background, que ce soit pour informer, ou tout simplement pour embellir le rendu de votre compte, à vos yeux et à ceux des autres. Il faut dire que, voulue ou non, cette fonctionnalité a permis à de nombreux acteurs, entreprises, particuliers, de pouvoir véhiculer une identité visuelle pertinente ou d’accentuer le nombre d’informations partagées, outre la simple description de profils et l’affichage du site internet.

Il convient bien entendu de préciser que ce background n’est pas visible sur les fameux clients Twitter, mais plus de la moitié des 175 millions d’utilisateurs utilisent encore la version web lors de leurs connexions. Il est essentiel de se rappeler que vos lecteurs ou abonnés potentiels ne vous ressemblent pas forcément, n’ont pas toujours les mêmes connaissances que vous (un « client Twitter » ne veut probablement rien dire pour les trois quarts des personnes qui vous suivent), et que même si vous pensez que tout le monde passe par un client, c’est encore très loin d’être le cas.

Dernièrement, Twitter a revu son identité visuelle, avec le fameux #NewTwitter, présenté en (quasi) exclusivité sur Kriisiis.fr à l’époque. Une fonctionnalité est alors apparue, celle du « preview » de compte, et la possibilité d’afficher les informations les plus importantes (description, abonnements et abonnés, avatar, trois derniers tweets, etc.) en cliquant simplement sur un pseudo. Il devient donc plus rare d’afficher le profil (et donc le background) d’un compte Twitter, mais cela veut-il pour autant dire que le Background personnalisé devient obsolète ?

Rien n’est moins sûr. Car si ces affichages sont réduits, ils ne le sont pas pour autant de manière systématique. En tant qu’utilisateur « lambda » de Twitter, j’utilise ces fameuses « previews » comme tout le monde, mais ne me limite pas à ça. Que ce soit par réflexe ou par volonté d’en savoir plus (découvrir plus de tweets, notamment), j’affiche le profil complet (et donc le background) dans plus de 90% des cas. Je sais que ce n’est pas le cas pour tout le monde, mais il va falloir s’en convaincre : d’utilité réduite, le background n’en reste pas moins primordial et diablement efficace.

Je me permets donc de vous proposer un article nommé « Créez votre propre background Twitter : conseils, astuces et canevas », qui je l’espère vous permettra de faire le grand saut, d’adapter votre background au #NewTwitter ou, à défaut d’avoir un fond déjà personnalisé, de le créer de toute pièce. N’hésitez pas à me retrouver sur Twitter sous le pseudo @Kriisiis, ou sur Facebook via la Fan-Page de Kriisiis.fr.

Quelles contraintes ?

Avant toute chose, il est important de re-situer les contraintes. Pour commencer, rappelons que l’affichage du background diffère selon les résolutions d’écran, et que le fait que le rendu soit parfait chez vous ne veut sûrement pas dire qu’il le sera chez les autres. La première difficulté est donc de savoir proposer une organisation des données qui sera visuellement « correcte » pour une majorité des internautes. N’oubliez pas non plus que si l’image est assez grande pour votre résolution, elle ne l’est pas forcément pour les autres, d’où l’importance de la sélection d’une couleur de fond similaire ou d’une image suffisamment grande en largeur et en hauteur.

De plus, Twitter est doté d’un certain nombre d’éléments (je pense notamment à la barre du menu, à la timeline et à la sidebar, sachant que la barre en footer n’existe plus dans la nouvelle version du site de microblogging), ce qui implique que si vos données sont mal placées, elles risqueront très probablement d’être cachées par ces différents blocs. Alors qu’il n’est pas possible, nous l’avons vu, de proposer du sur-mesure, puisque le rendu sera différent selon les résolutions d’écran, il n’est donc pas non plus possible de placer du contenu de manière libre.

Enfin, la troisième et dernière contrainte vient du fait que le #NewTwitter est bien plus large que l’ancienne version. De 920 à 1040 pixels de large, plus précisément, encore une fois selon les différentes résolutions d’écran. Il ne reste donc finalement plus beaucoup de place pour proposer du contenu. Oublions l’époque ou plusieurs centaines de pixels pouvaient être exploités sans que cela ne soit gênant, on parle désormais de dizaines de pixels. L’idée est donc de créer un background Twitter qui contournera ces trois contraintes, tout en conservant son intérêt. Compliqué, vous pensez ?

Quelles dimensions ?

Avant toute chose, focalisons-nous sur les différentes résolutions d’écrans. Selon une récente étude de Libstat, la répartition des résolutions d’écran selon les internautes est la suivante (vous remarquerez que j’additionne des données et que je fais une petite sélection de résolutions, nous verrons par la suite que cela est dans notre intérêt dans le sens ou les dimensions des backgrounds n’ont d’importance que pour certaines résolutions d’écrans) :

• 2,36% des internautes ont une résolution de 800×600
• 25,04% des internautes ont une résolution de 1024×768 ou 1152×864
• 24,75% des internautes ont une résolution de 1280×800 ou 1280×1024
• 10,04% des internautes ont une résolution de 1440×900
• 9,17% des internautes ont une résolution de 1600×900 ou 1680×1050

Ces données vont nous permettre de connaître la proportion d’utilisateurs qui verront ou non nos données (on parle ici uniquement d’informations présentées en background, l’utilisation d’un fond uni ou sans données lisibles ne requiert pas ce genre de petits calculs) selon l’espace exploité à cet effet. Il convient selon moi de définir trois catégories d’utilisateurs :

• Ceux qui verront parfaitement l’affichage des informations
• Ceux qui verront l’affichage des informations ainsi qu’un espace vide
• Ceux qui ne verront pas l’intégralité des informations

Il est évident que si l’on adapte son background Twitter à une résolution d’écran, disons, « moyenne », ceux qui possèdent une résolution plus petite ne verront pas ces données et à l’inverse, ceux qui possèdent une résolution plus grande verront ces informations ainsi qu’un espace « vide » à sa droite, l’idée étant alors de proposer un fond qui sera visible et appréciable par un maximum d’utilisateurs. Et quelles sont les dimensions magiques, selon vous ? C’est ce que nous allons découvrir désormais, avec une pointe d’avis personnel en son sein : libre à vous de vous faire votre propre opinion !

• Avec des informations sur 40px, à gauche du background, 22,71% des utilisateurs les voient parfaitement, 74,93% les voient simplement, 2,36% ne les voient pas du tout, ou pas intégralement.
• Avec des informations étalées sur 105px, 24,75% des utilisateurs les voient parfaitement, 47,85% de manière correcte, 27,40% pas du tout, ou une nouvelle fois, pas intégralement.
• Avec des informations sur 185px de large, 10,04% des utilisateurs les voient parfaitement, 30,60% de manière acceptable, et 59,36% de manière incomplète, ou pas du tout.
• Enfin, avec des informations sur 265px à gauche du background, 3,41% des utilisateurs les voient de manière parfaite, 27,19% des utilisateurs les voient avec un espace sur le côté, et 69,4% ne les voient pas du tout.

Mais quel est le poids d’une visualisation « parfaite » par rapport à celle d’une vision « complète mais pas parfaitement adaptée » ? Libre à vous de vous faire votre propre opinion à ce sujet. A première vue, il semblerait que la première possibilité (40px d’informations sur le côté gauche du background) soit la plus intéressante, puisqu’elle est visible par 97,64% des internautes. Cependant, 40px n’est selon moi pas assez important, les données sont très réduites, peu lisibles, raison pour laquelle je suggère un encart informatif de 105px visible par 72,60% des utilisateurs.

Un encart de 105px de large permet en effet d’intégrer un maximum d’informations, de manière lisible et complète, avec une visibilité importante (supérieure à 70%). Libre à vous d’opter pour un cadre informatif plus important ou plus réduit, mais sachez que cela ne sera pas optimisé… et que cela ne présente finalement plus beaucoup d’intérêt. J’ai personnellement opté pour ces dimensions, vous pouvez d’ailleurs avoir un aperçu du rendu :

Background @Kriisiis en 1280×800 :

Background @Kriisiis en 1440×900 :

Background @Kriisiis non-optimisé pour du 1680×1050 :

Comme nous pouvons le constater sur la dernière image, avoir un background permettant un affichage correct du cadre informatif n’est pas suffisant, puisque mon fond n’est pas adapté aux résolutions d’écrans dont la largeur dépasse les 1600px. Nous devons donc intégrer deux variables dans notre sélection de dimensions :

• La résolution nécessaire à l’affichage du cadre informatif
• La résolution nécessaire à l’affichage du background en général

Ici, mon background est adapté à une résolution d’écran 1280×1024 pour ce qui est du cadre informatif, mais cela ne lui empêche pas de ne pas être adapté aux grandes résolutions. Voici donc les dimensions parfaites selon moi :

Un background de dimensions 1680×1050 avec un cadre informatif de 105px de large (pour environ 500px en hauteur).

Quels éléments ?

Comme expliqué précédemment, votre background Twitter peut vous permettre d’afficher votre identité visuelle (notamment si vous gérez le compte d’une entreprise), mais également (et surtout) des informations à l’aide d’un encart spécifique. L’idée n’est bien entendu pas de reprendre ce qui est déjà décrit dans votre description, ce genre de doublon serait inutile. Même si je le fais plus ou moins (oui, je sais), mon background me permet surtout de donner mes coordonnées Facebook, Skype, Google Talk et Email.

Ce background va vous permettre de communiquer des données que vous n’arrivez pas à intégrer dans votre description, je pense notamment à vos différents comptes Twitter, à vos différents sites internet, etc., en plus des données que je viens tout juste de citer. Placer un logo peut également avoir un impact très important puisque cela peut faire pencher la balance vers un « follow » lorsqu’une personne pourrait s’avérer hésitante. N’hésitez également pas à insérer des données qui vous ressemblent, telles qu’un nuage de tags reprenant vos centres d’intérêts, ou les différents aspects de votre métier !

Je me permets également de vous donner deux petites astuces quand à la réalisation de votre background Twitter. La première est de ne pas vous limiter au simple ajout d’un logo sur un fond quelconque. Quitte à personnaliser votre background, prenez soin de le faire complètement, sinon, l’effet sera inverse par rapport à celui désiré. Votre fond doit être agréable au regard, autant qu’informatif. La seconde est de ne jamais utiliser de background au format .Jpeg. La perte de qualité est indéniable, et celle de votre crédibilité, finalement, tout autant. Twitter vous permet l’ajout d’un fond en .Png, et la taille maximale acceptée (800ko) devrait vous permettre de ne pas vous retrouver bloqué.

Un petit canevas ?

La barre de menu de Twitter fait 40px en hauteur. Le background étant affiché suite à cette toolbar (et non « sous »), n’oubliez pas que votre background peut éventuellement faire 40px de moins en hauteur que la résolution à laquelle vous souhaitez vous adapter. Ainsi, pour une résolution de 1024×768, vous background doit avoir des dimensions de 1024×728, pour une résolution de 1280×1024 des dimensions de 1280×984, pour une résolutions de 1440×900 des dimensions de 1440×860 ou encore, pour une résolution d’écran en 1680×1050, les dimensions doivent être de 1680×1010.

Je me permets désormais de vous proposer 5 fichiers au format .Psd (Photoshop) afin que vous puissiez placer des informations sans prendre trop de risques, avec une visibilité importante et un risque de mauvais rendu relativement faible. J’ai pris soin de placer des repères délimitant ces zones, pour une meilleure visualisation. Si vous n’avez pas Photoshop, libre à vous de créer votre background via vos propres logiciels en reprenant les dimensions suggérées, ou encore de passer par l’excellent outil Themeleon de Colourlovers !

Aperçu du canevas 1024×768 :

Télécharger le canevas au format.Psd

Aperçu du canevas 1280×1024 :

Télécharger le canevas au format.Psd

Aperçu du canevas 1440×900 :

Télécharger le canevas au format.Psd

Aperçu du canevas 1680×1050 :

Télécharger le canevas au format.Psd

Pour finir, je vous rappelle que l’idéal est de proposer un background suffisamment large pour être adapté aux plus grandes résolutions d’écran (aux dimensions du dernier .Psd, en 1680×1050, donc), tout en proposant un cadre informatif à la fois complet et visible, et donc de 105px de large. Mais encore une fois, libre à vous de choisir ce qui vous convient le mieux. Vous trouverez donc ci-dessous le .Psd suggéré pour une optimisation de votre background Twitter :

Canevas 1680×1050 & Encart 105px (suggéré) :

Télécharger le canevas au format.Psd

Bien entendu, je vous le rappelle, n’hésitez pas à revenir vers moi via les commentaires, via Twitter (@Kriisiis) ou via Facebook, si vous souhaitez obtenir des précisions concernant cet article ou si vous avez envie de me présenter votre réalisation. Je suis d’ailleurs ouvert à toute suggestion concernant la réalisation d’un background Twitter !

[twitterbox]