Vous avez découvert que vous pouviez créer vous-même votre propre thème pour votre blog WordPress mais vous vous rendez compte que vous êtes un peu juste au niveau des CSS ? Il y a bien entendu un nombre important de ressources sur le web comme notamment les tutoriels de Site du Zéro ou ceux d’Alsacréations, mais parfois on a besoin d’un bon bouquin plutôt que de rester scotcher derrière son écran à se griller les yeux !

Donc, je vais vous présenter ici les 3 livres qui sont, selon moi, les plus pédagogues et les plus intéressants pour non seulement comprendre les CSS mais aussi pour les appliquer au mieux. Enfin, il est important de ne pas oublier la créativité et comment appliquer techniquement via les CSS ce qu’on a conçu au préalable. Donc, ici je vous présenterai un premier livre qui présente les bases des CSS, puis deux autres livres, plus orientés “design” mais incontournables pour vous mettre dans le bain à travers toute une série d’exemples. Je suis convaincu que c’est la meilleure manière pour comprendre que d’ingurgiter des pages de code. Bien entendu, tout ça est sans compter la pratique sans laquelle on ne va nulle part !

1. CSS2: Pratique du design web de Raphaël Goetter

J’ai lu toute une flopée de livres sur les CSS, expliquant les bases, mais c’est vraiment celui-ci qui est le plus facile d’accès, le plus complet et qui est écrit par un des acteurs d’Alsacréations. Il est pour moi incontournable si vous voulez bien comprendre le fonctionnement des CSS. Un must have !

Maintenant, si je devais lui faire un reproche c’est que, comme la plupart des livres consacrés aux CSS, il ne se contente que de donner des bases, et ne donne pas vraiment d’astuces et de trucs pour contourner toute une série de problèmes. C’est un peu comme les livres pour des logiciels comem Photoshop par exemple, on y apprend les bases, mais pour le reste, il faut aller voir ailleurs ! C’est pour ça que j’ai ajouté deux autres livres !! héhé !!

2. Le Zen des CSS ( ou connu aussi sous CSS Zen Garden ), de Dave Shea et Molly Holzschlag

Là. on rentre dans un tout autre domaine. Le zen des CSS est né d’une idée qui avait pour but de promouvoir les CSS auprès des développeurs et surtout montrer qu’on pouvait faire de jolies choses avec les CSS, aussi bien et beaucoup plus propres que ce que l’on faisait auparavant. Dave Shea a donc créé un site, CSS Zen Garden, dont il existe une version française, et il a fournit au public une base HTML unique que chacun, et notamment les graphistes, peuvent styliser comme ils le veulent via les CSS. Et donc, si vous vous baladez sur le site, vous trouverez différents designs pour un contenu identique. D’ailleurs, ce site est une mine d’or pour l’inspiration.

Dave Shea et Molly Holzschlag, designer et consultante CSS, connus de part le monde, ont donc créé ce livre et repris un grand nombre de designs du site et les ont disséqués dans ce livre. Une très bonne manière de montrer comment les designers ont travaillé.

Pour moi ce livre est une bible. Dès que je m’y repenche, je trouve de nouvelles idées, des trucs et des astuces pour mieux “coder” mes CSS.

3. Transcender CSS, sublimez le design web ! d’Andy Clarke

Tout frais tout chaud, je l’ai reçu hier, mais je me suis déjà penché dans ce qui est, une fois de plus, un livre de référence. Déjà, Andy Clarke est un designer que j’apprécie tout particulièrement. Il contribue notamment à .net mag UK.

Quand on prend ce livre pour la première fois dans ses mains, on a plus l’impression d’avoir affaire à un livre de “beaux arts” qu’à un livre dédié à la pratique des CSS. J’avoue que j’aime beaucoup cette vision des choses. Beaucoup de designers anglosaxons insistent sur le fait que les CSS sont une affaire de designers et non de développeurs. Et, au risque de froisser certains développeurs, lecteurs du blog, je suis assez d’accord. Si les développeurs nous prennent ça, que nous reste-t-il !! Plus sérieusement, j’en parlais il y a quelques temps dans mon article “To code or not to code“, je crois que le job de webdesigner est de concevoir et d’intégrer un design. Il apporte la créativité mais aussi la manière d’intégrer le tout. Je ne dis pas que les développeurs ne doivent pas intégrer ou s’intéresser aux CSS, mais je pense que dans le processus de conception, associer le côté artistique et l’intégration me semble très logique.

Et pour en revenir au livre, il est écrit par un designer et donc apporte une approche complètement créative. Et j’aime beaucoup. Andy Clarke a rédigé ici une approche originale des CSS. On y parle technique mais à travers des exemples. On n’est plus sur les bases du premier livre présenté, et on va plus loin que le CSS Zen Garden. Ici, on aborde tous les aspects des CSS, on y parle accessibilité sémantique. Bref, plus qu’un simple manuel, ce livre est une sorte de retour sur expérience d’un des plus grands designers actuels. Qui plus est, comme le livre est superbe et que les exemples pris sont d’une qualité incroyable, on a très vite envie de s’atteler à Photoshop pour concevoir de nouveaux designs !!

Souvent les livres sur les CSS datent de quelques années et les exemples ne sont pas très beaux ou plus très actuels. Avec ces 2 derniers ouvrages, vous aurez une source de créativité incroyable et moderne.

Donc, voilà ma petite liste. J’aurai sûrement l’occasion de revenir sur le dernier livre d’Andy Clarke puisque je suis en train de le dévorer ! En tout cas, si vous voulez faire un tour complet des CSS à travers plusieurs livres, ces 3 là sont pour moi les meilleurs et les plus complets !

Après Mint il y a deux semaines, je me suis fait encore un petit cadeau aujourd’hui: CSSEdit. S’il y a un logiciel dont je ne pourrais me passer dans le webdesign, c’est bien celui-ci. Il rend “visuel” vos pages web et l’étude des CSS en est largement simplifié. C’est vraiment très sympa. Il existe des plugins Firefox qui font un peu le même boulôt mais c’est très limité et surtout là j’ai un éditeur de code qui me fait les changements instantanément sur la page web. Comme ça, je peux savoir tout de suite ce que rendent les changements que je viens d’effectuer. C’est très intuitif en fait.

CSSEdit est également très bien pour les débutants qui sont un peu perdus et qui ne trouvent pas leurs erreurs. Ils peut y avoir des erreurs qui ne se voient pas, des cadres complètement à la rue alors que visuellement tout tiens. Et bien, avec CSSEdit, on voit tout, et on répare tout facilement avec l’éditeur. Et encore, c’est uniquement ce que j’ai eu le temps de voir avec l’utilisation des dernières semaines. Mais il possède également d’autres fonctions tout aussi utiles que je n’ai pas pu découvrir. Allez faire un tour sur leur site, ils ont une preview qui explique toutes les fonctionnalités du logiciel.

Vous l’aurez compris, je suis fan et après l’avoir essayé, je l’ai adopté sans aucune hésitation. Donc, si vous avez un superbe mac, vous pouvez télécharger une version d’évaluation du logiciel. Si vous décidez de l’acheter, il vous en coûtera 30$. Moi, je dis vive la monétisation des blogs !! En tout cas, je vous ferai, bien entendu une présentation complète du soft, et ce, peut-être même en vidéo !

Quand on crée son site web pour la première fois, on ne se pose pas trop de questions. On est sur son OS préféré, c’est-à-dire Windows, Mac OSX ou encore Linux. On développe son site, on met tout en ordre et puis voilà. Seulement, si on fait l’effort de “porter” son site sur un autres OS, on se rend compte que non seulement il y a des différences entre les navigateurs, et ce, même pour le même navigateur mais sous un OS différent, mais que certaines polices ont disparu et ont été remplacées par d’autres, bien moins belles ! Et oui, les polices standards système ne sont pas les mêmes d’un OS à un autre…super… Du coup, vous voilà parti à devoir tout repenser pour que votre site ou blog soit plus ou moins valable sur les différents OS… Dans cet article, je vais essayer de vous donner quelques trucs pour faciliter votre travail au niveau du choix des polices et vous permettre de faire le meilleur choix, ou plutôt devrais-je dire le moins mauvais choix !!

N’oubliez pas non plus un aspect que je n’aborderai pas ici, mais j’ai remarqué que la même police peut avoir un aspect différent selon le navigateur. C’est le cas par exemple de Verdana dont l’épaisseur est plus prononcée sur Internet Explorer 7 que sur Firefox 2.0.0.4… Donc, bien choisir ses polices peut devenir rapidement un vrai casse-tête si vous êtes un tantinet perfectionniste !

Avec l’arrivée des CSS, la gestion des polices a été considérablement facilitée. Dans votre feuille de style, vous déterminez la ou les polices que vous voulez voir s’afficher et si l’ordinateur de la personne qui visite votre site ne l’a pas, elle ne verra le contenu comme vous souhaiteriez que ce soit le cas. La police par défaut des navigateurs est Times New Roman. Ca veut dire que si le navigateur ne trouve aucune police à afficher, c’est celle qu’elle utilisera.

Le problème qui se pose ici, c’est que selon l’OS sur lequel on se trouve, les polices de caractère “standards” ne sont pas les mêmes. Vous pouvez très bien développer votre site avec une police que vous aimez bien mais si le visiteur ne l’a pas sur son ordinateur, toute votre mise en page risque d’être chamboulée. Pour faciliter le travail, il vous faut donc choisir parmi les polices qui sont disponibles sur TOUS les OS. Et là, le choix est très limité… Du côté des Serif, on retrouve Times New Roman et Georgia, et du côté des Sans Serif, on retrouve Arial, Helvetica, Verdana et Trebuchet MS. Enfin, vous pouvez également utiliser la monospace Courier pour tout ce qui est code par exemple. Pour faire simple, ce sont les principales polices que vous êtes sûrs de trouver sur les différents OS.

Alors, pour être sûr que le navigateur n’ira pas pioché sur les Serif quand vous voulez une Sans Serif, vous pouvez rédiger des “font-family”. Prenons l’exemple suivant:

font-family= Trebuchet MS, Verdana, Arial, Sans-Serif;

Ici, le navigateur ira chercher la première police et s’il ne la trouve pas, ira chercher la seconde et ainsi de suite. En ajoutant “Sans-Serif” qui est une police “générique”, vous êtes sûr de rester dans les polices droites. Déjà, c’est un premier point à ne pas oublier.

Mais vous aimeriez bien utiliser des polices un peu plus fun tout de même… Pour cela, il existe bien des possibilités comme créer des images pour certaines parties “statiques” du site, mais très mauvais en terme d’accessibilité, ou encore utiliser SiFR qui vient mettre un peu de Flash sur votre site, de manière dynamique, mais dont les conséquences au niveau référencement sont critiquées… Donc au final, rien de bien concluant. Il va donc falloir bien choisir ses polices, et ce différemment pour le corps du texte que pour les titres.

Comment bien choisir une police pour le corps du texte ?

Ici, vous avez un impératif. Il vous faut choisir une police qui soit lisible à petite taille. C’est très important. Vos visiteurs sont là pour lire vos articles, il faut donc qu’ils puissent le faire facilement. Mais certaines polices ne sont pas trop belles à petite taille et ont tendance à se déformer.

Commencez par faire des essais pour voir ce qui vous plaît le plus et vous semble le plus lisible. Restez tout d’abord dans la liste réduite des polices valables sur tous les OS. Faîtes vos tests. Ensuite, vous pouvez très bien ajouter une police que vous aimez encore mieux mais qui ne sera pas forcément sur tous les OS.

Par exemple, pour les polices Serif, Book Antiqua et Bookman Old Style sont tout aussi lisible que Georgia et seront présentes sur tout ordinateur qui a Microsoft Office d’installé. Et ce, que ce soit sous Windows ou sous MacOSX. URW Bookman L peut être utilisée pour Linux. Ainsi, comme je l’ai expliqué plus haut, vous pouvez vous construire votre “font-family”en mettant en premier les polices que vous souhaitez voir apparaître et ensuite les polices dites “standards”.

Pour les Sans-Serif, j’aime beaucoup Lucida Grande, qui n’est valable que sous Mac OSX. Mais Lucida Sans Unicode et Lucida Sans sont valables sur les dernières versions de Windows, et remplaceront très bien la police Apple.

De même, j’aime beaucoup Century Gothic, mais elle n’existe pas de base sur les différents OS, mais elle utilisable dès lors que le visiteur a Microsoft Office. Du coup, vous pouvez faire votre mise en page avec les polices standards et y ajouter devant Century Gothic qui ne s’affichera que chez les personnes qui l’ont sur leur ordinateur. Et chez les autres, ils auront la police qui suit que vous avez défini et paramétré.

Attention cependant à une chose. A une famille de polices sont associés des paramètres, comme la hauteur de ligne (line-height) ou l’espace entre les lignes (letter-spacing) par exemple. Vérifiez bien que que chaque police soit toujours lisible selon les paramètres définis.

Et pour les titres ?

on gardera le même principe. Ici, votre police doit être lisible à plus grande taille. Ici, je souhaiterai juste intervenir sur un point en particulier. Il peut arriver que dans votre sidebar vous mettiez des images en background, derrière du texte, histoire de mettre les choses bien en forme. Vous avez mis par exemple un joli cadre en arrière plan et vous avez bien centré votre texte. Ici, selon la police qui va s’afficher, leur taille peut être différente et ainsi mettre en péril le centrage de votre texte. Il est impératif de faire votre cadrage avec une police standard et de voir s’il n’existe pas d’autres polices, plus sympas, qui pourraient être utilisées avec ce même cadrage… Attention à ne pas aller piocher dans des polices peu connues ! Auquel cas, ça ne servira pas à grand chose puisqu’à part vous, peu de personnes la verront… Mais dans ce cas, vous pouvez également utiliser des images sans texte pour pouvoir utiliser la police de votre choix… Cependant, pensez qu’en grossissant le texte, ces images resteront à la même taille…

Bref, il n’est jamais facile de choisir la meilleure police pour son site web… Et je dois bien avouer que c’est quelque chose qui me pose un problème comparé l’univers de du “print” ou du graphisme ou la créativité peut s’exprimer librement…

Quoi qu’il en soit, certaines polices sont tout de même intéressantes et proposent un niveau de lisibilité optimal, ce qui est le plus important ici. A vous ensuite de trouver le meilleur compromis entre “beauté” et “accessibilité”…

liens intéressants:
Guide Microsoft sur les polices (anglais)
Liste de polices sur Wikipédia
Article sur les fontes de caractères sr Wikipédia

Francis

Ces derniers jours, j’essaie vraiment d’avancer un peu plus sur mon thème. Entre le travail, les articles, les tutos, la wp_plugins list et la vie personnelle, pas facile de trouver le temps pour faire l’intégration… Mais depuis la fin de semaine dernière, je me suis remis au charbon et je dois dire que le constat est terrible: c’est super dur de construire un thème autour de k2.

Au départ, je m’étais dit qu’étant déjà sur k2, ce serait bien d’y rester et de profiter de toute la puissance de ce thème. Donc, je suis parti de la version “de base” et j’ai développé autour. Et finalement, ce n’est pas le développement dans les templates qui m’a le plus pris la tête. Bien sûr, il y a vraiment beaucoup de choses à assimiler, mais il y a aussi pas mal de trucs inutiles. Il faut prendre le temps de parcourir chaque template. Mais je dois dire que j’ai appris pas mal de choses. C’est vraiment un thème maîtrisé de A à Z. Les gars y ont passé beaucoup de temps. Donc, non, ce n’est pas au niveau des templates que je me suis pris la tête, mais au niveau des CSS.

Déjà, chaque bloc a un nom bien précis, déterminé par les développeurs de k2. Il faut donc prendre le temps de bien comprendre l’architecture de la mise en page. Mais pour cela, j’ai un petit bijou de logiciel qui s’appelle CSSEdit, qui grâce à sa fonction “rayons X” permet de visualiser rapidement chaque bloc et le “chemin” qu’il suit, son imbrication en remontant jusqu’à “html”. Donc, j’ai passé pas mal de temps à comprendre comment tout cela fonctionnait. Et ce que j’ai découvert est interminable… J’ai voulu imprimer la feuille de style pour y regarder de plus près et y faire des retouches à la main, dans le tram. La feuille de style fait 47 pages !! Très vite, j’ai découvert des imbrications, des connections dans tous les sens, et là, je me suis dit: “Francis…je ne sais pas dans quel pétrin tu t’es mis…mais ça va être galère…”. Pas loupé… Pendant un moment, je me suis posé la question de tout laisser tomber et de repartir sur un autre thème, comme le mien par exemple, ou Sandbox. Mais j’avais déjà fait pas mal de modifications dans les templates, donc je ne me voyais pas tout recommencer.

J’ai donc continué sur cette voie et j’ai passé pas mal de temps à trouver des solutions à des problèmes, notamment celui que je viens de débloquer et qui m’a pris la tête pendant un petit moment. Je vous expose la chose: En travaillant sur les polices, je me suis aperçu que le rendu n’était pas top. Je me suis dit que c’était peut-être Firefox. J’ai essayé sous Safari et même résultat. Le truc c’est que même les couleurs n’étaient pas tout à fait les bonnes… Et en passant dessus, en rollover, elles redevenaient “normales”, comme je les avait paramétré dans les CSS. Enfin bref, j’ai parcouru la feuille de style en long et en large pour essayer de comprendre d’où pouvait provenir le problème. Rien. Le même style sur un autre thème ne pose aucun problème… Et puis, hier midi, je pense à un truc. Les options Ajax de k2… Et effectivement, ça n’a pas loupé… Les options Ajax pour la recherche créaient une sorte de “calque” qui rendait moins lisible le texte. Je ne pourrai pas vous en dire plus car je n’y connais rien en Ajax, mais le problème provenait bien de là. J’ai donc désactivé la chose et maintenant, tout va mieux. Je vais pouvoir enfin terminer mon thème et vous le dévoiler rapidement !!

Tout ça pour vous dire que rien ne vaut un développement complet de son thème, avec ces propres nominations. C’est la meilleure manière d’apprendre et de connaître sur le bout des doigts sont thème. Partir d’un existant, c’est jamais facile et il y aura toujours quelque chose que l’on ne maîtrisera pas. Dans les prochains mois, j’ai l’intention de bouger mon thème vers mes propres templates et laisser tomber k2. Cette situation n’est que temporaire. Quoi qu’il en soit, c’est aussi un bon moyen d’apprendre et de voir ce que font les autres. J’ai appris pas mal de truc sque je réutiliserai sûrement prochainement !!! Y a quand même pas que du négatif dans tout ça !!!

Fran6

Hicksdesign propose une solution pour pouvoir changer le thème de Google Reader. Pour cela, il vous faut Firefox, Camino, Safari, Omniweb ou Opéra. En fait, vous allez venir remplacer le fichier CSS du site par une feuille de style personnalisée qui va être utilisée à chaque fois que vous ouvrirez le site en question, ici Google Reader.

Téléchargez le fichier greader.zip et suivez les instructions selon votre navigateur (en ce qui me concerne je n’ai essayé la chose que sous Firefox et ça fonctionne parfaitement):

Firefox

Il vous faut l’extension Stylish. Une fois l’extension installée, un petit icône apparaît dans la barre du bas. Cliquez dessus et ouvrez “Gestion des styles”. Cliquez sur “Ecrire”. Donnez un nom à votre style et copiez le contenu du fichier greader.css (contenu dans le greader.zip) dans la grande fenêtre. Enregistrez et l’affaire est faite ! Vous pouvez maintenant rouvrir Google Reader, son apparence a changé !

Camino

Copiez le fichier greader.css dans le fichier suivant: /Library/Application/Support/Camino/chrome/userContent.css ou alors, si ce fichier n’existe pas, renommer greader.css en userContent.css. Relancez Camino pour que les changements apparaissent.

Safari

Il vous faut d’abord installer SafariStand. Ensuite, placez greader.css dans le dossier suivant: user/Library/Safari/Stand/UserStyleSheets. Allez ensuite sur l’URL de Google Reader, onglet SafariStand > Settings > Site Alteration. Ajoutez le site, autoriser (“enable”) le “Site alteration” et choisissez le fichier greader.css dans la liste. Videz le cache, redémarrez le navigateur et rafraîchissez la fenêtre de Google Reader.

Omniweb

Allez dans l’onglet Site Preferences > Page Appearance, choisissez greader.css dans “Style Sheets”.

Opera

Affichez la page de Google Reader, Click Droit, et choisissez “Edit Site Preferences”. Sélectionnez le fichier greader.css sous “My Style Sheet”.

Personnellement, j’aime assez, même s’il reste encore quelques retouches à faire…J’espère que ce genre de personnalisation va se développer. Pouvoir choisir son thème pour des applications en ligne, ça peut être très intéressant !

Fran6

Source: Hongkiat

Quand on se lance dans le blogging, c’est une des questions qui se pose très rapidement. Combien de colonnes doit avoir mon blog ? Mark de Weblog Tools Collection et Lorelle se sont posés la question et j’avoue que, moi-même, je me la pose depuis un petit moment, depuis que j’ai décidé de changer de thème.

Quand je suis débarqué dans le monde du blog, je n’ai eu que des blogs 3 colonnes classiques, avec une sidebar à gauche, la colonne contenu au centre et une autre sidebar à droite. Puis, avec Dotclear, je suis passé au 2 colonnes avec la sidebar à droite, idem pour mon premier thème chez WordPress, puis j’ai finalement choisi le thème que vous voyez aujourd’hui, qui n’a qu’une colonne. Au début, je voulais quelque chose de simple, épuré, design et concentré sur le contenu. Puis, au fur et à mesure que j’avançais et que le blog avait de plus en plus de visiteurs, je me suis dit que la sidebar dans le footer c’était sûrement sympa mais que très peu de visiteurs devait scroller jusqu’en bas. Je pense qu’aujourd’hui ce thème ne joue pas en ma faveur.

En gros, on va avoir 2 catégories de visiteurs: les habitués et les nouveaux. Les habitués connaissent déjà le blog, certains ne le consultent que très peu, restant sur les flux complets RSS. Pour ceux qui le visitent, ils ont tendance à se focaliser sur le contenu et connaissent déjà ce qu’il y a dans la ou les sidebar. Mis à part les derniers commentaires, ils seront peu intéressés par le reste. Concernant les nouveaux visiteurs, c’est une autre histoire.

Beaucoup de vos nouveaux visiteurs vont arriver sur une page d’article et non sur votre homepage. Ce qui va pousser ce visiteur à aller voir d’autres pages et à rester plus longtemps sur votre blog, c’est une bonne navigation. Pour cela, il faut que des liens lui propose d’aller se balader au fil des articles, soit via les “articles les plus populaires”, “les derniers commentaires”, des sujets particuliers abordés dans la sidebar. Bref, l’info doit être visible, lisible, et ce sans qu’il ait besoin de parcourir le site de bas en haut. Très souvent, les internautes recherchent une information et s’il la trouve, ne regarde pas forcément le reste du blog. Bien sûr ça dépend du sujet du blog. Donc, si tout en faisant sa recherche, vous pouvez attirer le lecteur vers d’autres pages, le visiteur peut rester plus longtemps, voir bookmarker votre blog et revenir une autre fois. Donc, il est important que cette info soit visible rapidement. Et c’est là que mon blog pêche.

On trouve de plus en plus de thèmes à plusieurs colonnes, mais avec la tonne de contenu dans le footer. C’est sûrement très joli mais je suis convaincu que ce n’est pas du tout accrocheur pour le visiteur. Quand je visite un blog que je ne connais pas mais dont le contenu me plaît, je vais instinctivement regarder à droite ou à gauche, mais je descend peu souvent jusqu’en bas pour trouver d’autres choses à découvrir. Tout doit être là, disponible, sous la main ! Donc, rien que pour ça, adieu le blog 1 colonne, sauf pour des cas particuliers. Même s’ils sont très beaux, ils ne sont pas très pratiques.

Ensuite, 2 ou 3 colonnes ? A gauche ou à droite ? Commençons déjà par l’organisation, avant le contenu. En peinture, on dit souvent qu’on lit d’en bas à gauche vers le haut à droite. Je ne sais pas trop pourquoi, mais c’est comme ça. Je pense quand même que notre vision est habituée, du fait de notre alphabet et de notre écriture à lire de gauche à droite. Donc, pour moi, le contenu doit être tout de suite accessible. Donc, directement comme première colonne à gauche. Je n’ai rien contre une sidebar à gauche mais je trouve que ça bloque quelque chose, ça nous pollue avant même qu’on n’ait eu accès au contenu. Je trouve que c’est une barrière. Avoir une colonne à droite donne au blog une note plus aérée. On se concentre sur le contenu et on a accès à plus, en allant voir sur la droite, après avoir lu le contenu.

Concernant le nombre de sidebars, tout dépend de ce que l’on veut mettre dans cette ou ces sidebars. Si c’est pour n’avoir qu’une seule sidebar mais qui est très longue, mieux vaut en avoir deux. Evitez de surcharger votre sidebar sur le haut. Mettez en premier les informations de navigation qui peuvent intéresser le lecteur et sur le bas, vous pouvez mettre plus de widgets, de gadgets. Si vous avez de la pub, c’est sûr que pour une meilleure monétisation, les liens doivent se trouver en haut de la sidebar. Attention toutefois à ne pas surcharger ou à faire fuir le lecteur.

Personnellement, je suis plutôt poue 2 sidebars à droite. Le haut des deux sidebars contiendrait des infos claires et facilement trouvables par le visiteur. Et plus on descend, plus on y trouve des liens, la blogroll et j’en passe. Si je n’ai pas beaucoup de choses à montrer, je resterais peut-être sur une sidebar. Tout dépend vraiment de ce que l’on veut faire de son blog. Et surtout, un blog doit ressembler à son propriétaire ! En ce qui concerne mon blog, j’attends encore un peu avant de changer le thème. Je bosse sur le prochain mais j’avoue être à cours de temps en ce moment…

Et vous, vous êtes 1,2,3, voire 4 colonnes ?

Fran6

Ca fait un petit moment que je connais le blog de Justin Shattuck. Je suis un grand fan du thème que l’on retrouve régulièrement un peu partout sur le web. Et je dois dire que je suis super content ce matin de découvrir qu’il vient d’en sortir une version gratuite et téléchargeable. Bon c’est une affaire de goût. Certains préfèreront des couleurs plus vives mais j’aime beaucoup de côté feutré, pastel et plutôt neutre. Bon faut dire que j’adore le bleur aussi…;-) On critique souvent les blogs avec une police claire sur fond sombre comme étant pas forcément très lisible. Je ne suis pas toujours d’accord. Ici, ce n’est pas agressif. Je dirais même que c’est chaleureux ! En tout cas, du très beau travail, non ?

Fran6

Nuff Respec, qui utilise pas mal les galeries CSS comme source d’inspiration, nous livrait il y a quelques jours sa liste des 74 galeries CSS préférées. Il les a d’ailleurs ordonnées par ordre de préférence en partant de la plus intéressante. Notez d’ailleurs la mise en page façon nuage de tags. Je trouve ça très sympa. Ces galeries sont de véritables mines d’or pour trouver des idées de design. Les plus connues proposent vraiment des sites de très haute qualité qui poussent parfois même jusqu’à la frustration !! De l’autre côté ça donne souvent envie de s’y mettre sérieusement !!

Par contre, pas facile de toutes les bookmarker et de visualiser chaque jour tous les nouveaux sites référencés… Et bien, il y a une solution simple pour pallier à ce genre de souci et c’est Amine qui me l’a fait découvrir, c’est Most Inspired ! En effet, ce site regroupe plusieurs flux de galeries CSS et donc vous pouvez tout regarder sur le même flux !

Fran6

En ce moment, je travaille sur le futur thème de Fran6art.com. Je sais exactement ce que je veux et pour cela, j’ai choisi de partir du thème le plus utilisé sur WordPress, c’est-à-dire k2. Un des aspects du thème est qu’il sera en 3 colonnes, une avec le contenu, appelée “primary”, et deux autres à droite, qui vont accueillir la sidebar. Le but est d’obtenir un résultat comme celui-ci, en terme d’organisation des colonnes.

Pour modifier un thème, il vous faut tout de même des connaissances en CSS et quelques unes en Php. Sans les connaissances en CSS, vous n’irez pas bien loin ! Si tel est le cas, je vous conseille notamment ces quelques livres ou encore ce site ou celui-ci qui m’ont pas mal aidé au début.

Idem, si vous ne souhaitez pas plonger les mains dans le cambouis, il existe beaucoup de thèmes tous prêts en 3 colonnes. Ici, on va se pencher sur la customisation de k2, mais le principe reste le même pour l’ensemble des thèmes pour WordPress.

Modification du fichier sidebar.php:

Pour ajouter une colonne dans votre sidebar, il va falloir aller toucher au code, aux “templates”, et ça, principalement dans sidebar.php. Pour ceux qui ne sauraient pas où trouver ce fichier, il est sous Thèmes (ou Présentation) > Editeur de thèmes > Fichier “Panneau latéral”. Ce fichier comporte tout ce qui compose votre sidebar. Pour le moment, il n’y a qu’une colonne et elle se nomme “secondary“. On va donc rechercher le code et le <div> qui lui correspond:

<div class=�?�secondary�?�>

On va donc créer une nouvelle <div> à l’intérieur de celle-ci pour pouvoir avoir créer la première des 2 colonnes. On va, par exemple, lui donner le nom suivant:

<div class="leftsidebar">

On va y mettre tous les plugins et widgets que l’on souhaite voir apparaître. Vous pouvez très bien reprendre le contenu de “secondary” tout en pensant à en laisser pour l’autre colonne, histoire de pouvoir valider que tout fonctionne bien. Une fois la colonne “remplie”, pensez à fermer la div (</div>).

On crée alors la deuxième colonne:

<div class="rightsidebar">

Remplissez une nouvelle fois la colonne avec ce que vous souhaitez y voir apparaître. Souvent, c’est dans cette colonne-là qu’on y mets les pubs par exemple, ou encore les blogrolls. Une fois la colonne remplie, vous fermez la div et vous vérifiez que la div de fin de “secondary” se trouve juste derrière. Vous devez avoir le type de schéma suivant:

<div class=�?�secondary�?�>

<div class="leftsidebar">
-- CONTENU DE LA COLONNE DE GAUCHE --
</div> (on ferme la leftsidebar)

<div class="rightsidebar">
-- CONTENU DE LA COLONNE DE DROITE --
</div> (on ferme la rightsidebar)

</div> (on ferme la secondary)

Modification des styles du blog (style.css):

Ensuite, il va falloir aller modifier le style de votre blog pour que les colonnes apparaissent comme vous le souhaitez, et surtout, qu’elles soient bien alignées. Allez ouvrir le fichier style.css. Là, il y a pas mal de changements à faire. En effet, votre blog passe de 2 à 3 colonnes. Vous allez devoir l’élargir pour accueillir tout le monde. Par exemple, la largeur de la page va passer à 995px, secondary à 450px et chaque colonne à 200px. Encore une fois, ce ne sont que des exemples, libre àvous de donner les dimensions que vous voulez. Ensuite, on va donner un peu de marge entre les colonnes pour aérer le tout. On va mettre un “float=left” pour la colonne de gauche et un “float=right” pour la colonne de droite. Comme base de travail, vous devriez arriver au code suivant pour les lignes concernées et à modifier:


#page {
background: white;
text-align: left;
margin: 0 auto;
padding: 20px 0 10px;
position: relative;
width: 995px;
border: 1px solid #ddd;
border-top: none;
}

#primary {
width: 500px;
float: left;
padding: 20px 0 10px;
margin: 0 10px 0 30px;
display: inline;
}

.secondary {
font-size: 1em;
line-height: 1.5em;
padding: 10px 0;
margin: 0 25px 0px 560px;
width: 410px;
color: #666;
position: relative;
}

.leftsidebar {
font-size: 1em;
line-height: 1.5em;
padding: 10px 0;
margin: 0 20px 0 0;
width: 195px;
float: left;
color: #666;
position: relative;
}

.rightsidebar {
font-size: 1em;
line-height: 1.5em;
padding: 10px 0;
margin: 0 0 0 0;
width: 195px;
float: right;
color: #666;
position: relative;
}


Je le répète, ce ne sont que des valeurs à titre d'exemple. Il vous faudra ensuite jongler avec toutes ces données pour arriver au résultat que vous cherchez. Une fois que vous avez enregistré le tout, visualisez le blog et si tout a bien été paramétré, vous devriez avoir maintenant 2 colonnes pour former votre sidebar. Maintenant à vous d'être créatif !

Si vous utilisez un module pour gérer vos widgets:

On voit de plus en plus de thèmes qui sont "widgets ready". Ca veut dire qu'ils peuvent accueillir des widgets dans la sidebar, notamment grâce à un module, qui vous permet de gérer tout ça très facilement. Si vous avez modifié votre thème, ce module ne va pas reconnaître votre nouvelle colonne. Il va falloir aller "lui dire" en modifiant un autre fichier. Et ce fichier, c'est functions.php.

Tout ce qu'il va falloir faire, c'est modifier la commande "register_sidebar" qui permet au module de reconnaître le nombre de colonnes, et donc de sidebars. Les lignes à modifier vont être les suivantes:

// Sidebar registration for dynamic sidebars
if(function_exists('register_sidebar')) {
register_sidebar(array('before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>'));
}


Vous allez les remplacer par

// Sidebar registration for dynamic sidebars
if(function_exists('register_sidebar')) {
register_sidebars(2, array('before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>'));
}

Qu'est ce qui a changé ? Et bien, on a modifier la commande. On a mis une "register_sidebars" à la place de "register_sidebar". Et on y a ajouté une donnée, le nombre de sidebars, c'est-à-dire 2. Chez moi, ça fonctionne très bien. Mais j'ai lu ici qu'on pouvait tout de même avoir quelques soucis. Dans ces cas-là, gardez la commande "register_sidebar" et ajoutez-y uniquement les noms des colonnes:

// Sidebar registration for dynamic sidebars
if ( function_exists('register_sidebar') ) {
register_sidebar(array('name'=>'leftsidebar'));
register_sidebar(array('name'=>'rightsidebar'));
}

Mais bon, je n'ai pas essayé cette méthode, la première fonctionnant parfaitement bien chez moi. Une fois tout enregistré, retournez dans le module de gestion des widgets et vous avez désormais deux sidebars, "sidebar 1" et "sidebar 2" !

Les prochaines semaines, je devrais pas mal communiquer sur la customisation sur WordPress, étant à fond dedans en ce moment. Pour être tenu au courant des prochains articles, n'hésitez pas à vous abonner au blog, si ce n'est pas déjà fait ! Et n'hésitez pas à poser des questions. J'essaierai 'y répondre de mon mieux !

Fran6

]]>