Superlink me

Cer­tains d’entre-vous ont émis le souhait de per­son­naliser l’apparence de leur blog. J’ai été déjà assez exhaus­tif sur le sujet au lance­ment du pro­jet : L’interface d’un blog, en l’occurrence ici de type Word­Press, est plus une ques­tion d’habillage que de design. Il est pos­si­ble de lui faire dépasser ce cadre de façade mais cela sous-entend une solide cul­ture tech­nique en PHP / CSS. Sans aller jusque là, j’avais prévu une intro­duc­tion à cer­taines mod­i­fi­ca­tions de base sur les styles CSS (couleurs, polices, etc.) mais nous n’aurons pas le temps néces­saire dans le plan­ning de fin d’année. De plus je con­sid­ère cette phase d’habillage comme sec­ondaire dans le con­cept d’un blog.

Comme je l’ai déjà dit, un blog est avant tout un pro­jet édito­r­ial, Sa rai­son d’être est surtout sa thé­ma­tique et l’approche qu’il pro­pose à son lec­torat. Tout comme un mag­a­zine, penser son apparence, ses styles, etc. avant d’avoir trouvé son con­tenu et son nom est met­tre la char­rue avant les bœufs.

Aussi vous avez mis trop de temps à tra­vailler sur cette phase de con­cep­tion édito­ri­ale. Elle est, pour cer­tains, encore floue, et pour d’autres, au mieux, à con­solider. Comme vous n’avez apparem­ment pas assez de temps à y con­sacrer en dehors du cours, je préfère donc que vous util­isiez le temps de cours pour con­tin­uer à tra­vailler sur ce con­tenu et son approche.

Il appa­raît dif­fi­cile de con­cevoir une pra­tique du design qui ne fasse pas appel avant tout a des pré­ceptes formels visuels. Pour­tant nous avons bien un matériau : l’information. Nous avons égale­ment un outil avec ses car­ac­téris­tiques : le blog. La dimen­sion « design » de cet outil réside dans ce qu’il per­met : il relate des infor­ma­tions, en pro­pose une approche, lie vers des sources de références, etc. : du design d’information. Ensuite, revi­en­nent des prob­lé­ma­tiques formelles plus com­munes : polices, corps, couleurs, etc. mais ce n’en est pas là l’objet prin­ci­pal de design dans ce cas.

Le design de site aujourd’hui est un exer­cice qui devient presque trop formel lorsqu’on con­sid­ère les facil­ités de mise en place de tem­plates et autres tâches automa­tisées. La prob­lé­ma­tique de design se déplace en amont dans des choix struc­turels d’outils, de la manière de les lier et de les assem­bler. C’est une fois ces car­ac­téris­tiques définies que revi­en­nent des choix d’interface per­ti­nents. Je ne vais pas m’étendre là dessus main­tenant ici, j’y reviendrai peut-être pour les futurs 4e années qui le souhaiteront. En atten­dant, si faire du graphisme à l’ère des tem­plates vous intéresse, cet arti­cle en est une bonne introduction.

Word­Press pro­pose 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énom­i­na­tion n’est pas anodine et au départ de Word­Press, les thèmes pro­posés étaient en fonc­tion du car­ac­tère à don­ner à son blog en adéqua­tion avec sa thé­ma­tique. on avait le tech­noïde, le rigolo, etc. L’ennui, pour nous autres design­ers, c’est que cette pra­tique con­fine le graphisme dans une car­i­ca­ture. Quoi qu’il en soit, je sug­gère forte­ment de rester très sobre ou min­i­mal­iste dans le choix de l’apparence de son blog.

En con­clu­sion, pour ceux que ça démange trop, il existe, outre les mil­liers de thèmes Word­Press pro­posés ça et là sur le web, des out­ils de prise en main et de con­cep­tion de thème en ligne. Word­Press Theme Gen­er­a­tor, de Yvo Shaap, basé des grille mises au point par Yahoo! et qui est le plus util­isé. Vous avez moult alter­na­tives comme Theme-generator, ou WPPAL. Ensuite vous avez quels softs qui s’installent sur votre machine comme Word­Press Theme Gen ou The­Word­Press­The­meGen­er­a­tor (vous remar­querez le for­mi­da­ble effort d’imagination dans le nom de ces outils).

Je ne les ai pas tous testé mais dans leur fonc­tion­nement, il en résul­tera que vous récupér­erez à la fin de votre tra­vail un dossier (ou un dossier com­pressé au for­mat 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 bil­let, au cas où ne vous sou­vien­driez plus de quoi il s’agit). Une fois ce trans­fert de fichier effec­tué, vous devriez voir appa­raître votre nou­veau thème dans la liste des thèmes pro­posés de votre inter­face d’administration de blog. Il suf­fit ensuite de le sélec­tion­ner et voilà…

Pour ceux qui souhait­ent tra­vailler directe­ment sur leur thème, le mieux est de par­tir d’un thème très basique. Celui livré par défaut avec Word­Press à le mérite d’être sobre à défaut d’être com­plète­ment basique. Son avan­tage est qu’il con­tient toutes les classes de styles néces­saires. Il suf­fit d’y rem­placer ensuite les valeurs de couleurs et de familles de fontes, ou encore de côtes en pixels.

Un thème très intéres­sant est le Fluid Blue Theme, de Srini. Son incon­vénient (c’est relatif et sub­jec­tif) est d’être bleu et dit flu­ide (la zone de lec­ture n’est pas délim­itée en pix­els – moi je préfère, comme vous l’aurez remar­qué sur Super­link me). Son intérêt est que sa struc­ture est très bien faîte et per­met de le pren­dre en main facile­ment pour mod­i­fier ses styles.

Pour les roots qui veu­lent vrai­ment par­tir de zero, il y a le thème Naked, de Sift­ware qui est une bonne base. Ici aucune fior­i­t­ures, le flux d’information est nu. L’inconvénient est qu’il faut ici ajouter toutes les classes de styles néces­saires qui n’existent pas puisque par défaut le thème est livré sans styles.

Une fois décom­pressé et installé, l’essentiel des styles sont con­tenus dans le fichier style.css (logique­ment), Là on trouve les valeurs du corps de texte de lec­ture de base (dans body), des dif­férents niveaux de titres (h1, h2, h3, etc.), le style des liens (a, a:hover, etc.), les valeurs de couleurs en hexa­déci­mal (#FFFFFF…), etc.

Sinon le petit dépli­ant reprenant l’essentiel des styles CSS est Memento CSS, des éditions Eyrolles (disponible chez eux ou sur Ama­zon et autres) pour seule­ment 4 à 5 €. À noter, il existe dans la même col­lec­tion Memento XHTML et Memento Ergonomie Web (pour ce dernier l’approche n’est pas celle d’un graphiste mais juste­ment l’ergonomie est d’une telle évidence qu’on rejoint des logiques de lec­ture qu’un graphiste devrait naturelle­ment met­tre en place).

Avis aux ama­teurs. On en verra si pos­si­ble quelques bases (sinon petite astuce : Inter­net est un for­mi­da­ble outil pour dégoter ces informations).