Superlink me

Sarah Connor ?

10 avril 2009 | par Christian Porri

Certains d’entre-vous ont émis le souhait de personnaliser l’apparence de leur blog. J’ai été déjà assez exhaustif sur le sujet au lancement du projet : L’interface d’un blog, en l’occurrence ici de type WordPress, est plus une question d’habillage que de design. Il est possible de lui faire dépasser ce cadre de façade mais cela sous-entend une solide culture technique en PHP / CSS. Sans aller jusque là, j’avais prévu une introduction à certaines modifications de base sur les styles CSS (couleurs, polices, etc.) mais nous n’aurons pas le temps nécessaire dans le planning de fin d’année. De plus je considère cette phase d’habillage comme secondaire dans le concept d’un blog.

badgesuperlinkme
Comme je l’ai déjà dit, un blog est avant tout un projet éditorial, Sa raison d’être est surtout sa thématique et l’approche qu’il propose à son lectorat. Tout comme un magazine, penser son apparence, ses styles, etc. avant d’avoir trouvé son contenu et son nom est mettre la charrue avant les bœufs.

Aussi vous avez mis trop de temps à travailler sur cette phase de conception éditoriale. Elle est, pour certains, encore floue, et pour d’autres, au mieux, à consolider. Comme vous n’avez apparemment pas assez de temps à y consacrer en dehors du cours, je préfère donc que vous utilisiez le temps de cours pour continuer à travailler sur ce contenu et son approche.

Il apparaît difficile de concevoir une pratique du design qui ne fasse pas appel avant tout a des préceptes formels visuels. Pourtant nous avons bien un matériau : l’information. Nous avons également un outil avec ses caractéristiques : le blog. La dimension « design » de cet outil réside dans ce qu’il permet : il relate des informations, en propose une approche, lie vers des sources de références, etc. : du design d’information. Ensuite, reviennent des problématiques formelles plus communes : polices, corps, couleurs, etc. mais ce n’en est pas là l’objet principal de design dans ce cas.

Le design de site aujourd’hui est un exercice qui devient presque trop formel lorsqu’on considère les facilités de mise en place de templates et autres tâches automatisées. La problématique de design se déplace en amont dans des choix structurels d’outils, de la manière de les lier et de les assembler. C’est une fois ces caractéristiques définies que reviennent des choix d’interface pertinents. Je ne vais pas m’étendre là dessus maintenant ici, j’y reviendrai peut-être pour les futurs 4e années qui le souhaiteront. En attendant, si faire du graphisme à l’ère des templates vous intéresse, cet article en est une bonne introduction.

WordPress propose de changer son apparence en téléchargeant des « thèmes ». On ne parle pas du thème en soi du blog mais de son apparence. Pour autant cette dénomination n’est pas anodine et au départ de WordPress, les thèmes proposés étaient en fonction du caractère à donner à son blog en adéquation avec sa thématique. on avait le technoïde, le rigolo, etc. L’ennui, pour nous autres designers, c’est que cette pratique confine le graphisme dans une caricature. Quoi qu’il en soit, je suggère fortement de rester très sobre ou minimaliste dans le choix de l’apparence de son blog.

En conclusion, pour ceux que ça démange trop, il existe, outre les milliers de thèmes WordPress proposés ça et sur le web, des outils de prise en main et de conception de thème en ligne. WordPress Theme Generator, de Yvo Shaap, basé des grille mises au point par Yahoo! et qui est le plus utilisé. Vous avez moult alternatives comme Theme-generator, ou WPPAL. Ensuite vous avez quels softs qui s’installent sur votre machine comme WordPress Theme Gen ou TheWordPressThemeGenerator (vous remarquerez le formidable effort d’imagination dans le nom de ces outils).

Je ne les ai pas tous testé mais dans leur fonctionnement, il en résultera que vous récupérerez à la fin de votre travail un dossier (ou un dossier compressé au format zip ou rar) à placer via FTP dans le dossier wp_content/theme/ qui se trouve à la racine sur le serveur de votre hébergeur (reportez vous à ce précédent billet, au cas où ne vous souviendriez plus de quoi il s’agit). Une fois ce transfert de fichier effectué, vous devriez voir apparaître votre nouveau thème dans la liste des thèmes proposés de votre interface d’administration de blog. Il suffit ensuite de le sélectionner et voilà…

Pour ceux qui souhaitent travailler directement sur leur thème, le mieux est de partir d’un thème très basique. Celui livré par défaut avec WordPress à le mérite d’être sobre à défaut d’être complètement basique. Son avantage est qu’il contient toutes les classes de styles nécessaires. Il suffit d’y remplacer ensuite les valeurs de couleurs et de familles de fontes, ou encore de côtes en pixels.

Un thème très intéressant est le Fluid Blue Theme, de Srini. Son inconvénient (c’est relatif et subjectif) est d’être bleu et dit fluide (la zone de lecture n’est pas délimitée en pixels – moi je préfère, comme vous l’aurez remarqué sur Superlink me). Son intérêt est que sa structure est très bien faîte et permet de le prendre en main facilement pour modifier ses styles.

Pour les roots qui veulent vraiment partir de zero, il y a le thème Naked, de Siftware qui est une bonne base. Ici aucune fioritures, le flux d’information est nu. L’inconvénient est qu’il faut ici ajouter toutes les classes de styles nécessaires qui n’existent pas puisque par défaut le thème est livré sans styles.

Une fois décompressé et installé, l’essentiel des styles sont contenus dans le fichier style.css (logiquement), Là on trouve les valeurs du corps de texte de lecture de base (dans body), des différents niveaux de titres (h1, h2, h3, etc.), le style des liens (a, a:hover, etc.), les valeurs de couleurs en hexadécimal (#FFFFFF…), etc.

Sinon le petit dépliant reprenant l’essentiel des styles CSS est Memento CSS, des éditions Eyrolles (disponible chez eux ou sur Amazon et autres) pour seulement 4 à 5 €. À noter, il existe dans la même collection Memento XHTML et Memento Ergonomie Web (pour ce dernier l’approche n’est pas celle d’un graphiste mais justement l’ergonomie est d’une telle évidence qu’on rejoint des logiques de lecture qu’un graphiste devrait naturellement mettre en place).

Avis aux amateurs. On en verra si possible quelques bases (sinon petite astuce : Internet est un formidable outil pour dégoter ces informations).


2 Réponses à cette discussion pour le moment.


  1. louise-clémence

    Merci de prendre du temps pour nous c’est vrai que maintenant avec la collégiale on n’a pas vraiment de temps à perdre avec l’apparence
    de notre blog alors qu’on déjà du mal à mettre en place correctement le contenu.
    Cependant tu avais parlé d’un thème « naked » où peut-on le trouver ? ^^

  2. Christian Porri

    Oui, c’est vrai, j’ai oublié. Voilà j’ai édité l’article avec ces informations complémentaires… Bon courage.

.Participer à la discussion


Propulsé par WordPress | Sur un thème de Tamanta Famiglia | Creative Commons License