A première vue, les classes ajoutées au code HTML par les déclarations présentes dans les bibliothèques CSS sont essentiellement destinées à la présentation. Un peu comme si l’on mettait une classe .rouge pour afficher en rouge ce qui est important dans le texte, alors que tout le monde sait que .red, étant plus court, est bien plus approprié ^_^v (je suppose ici que les professionnels du web seront sensibles à l’ironie ; je ne suis pas inquiet pour les autres !).

Ensuite, à cause des frameworks CSS, l’intégrateur serait obligé de commencer par la feuille de style au lieu de baliser correctement son contenu avec du HTML bon CHIC (Code Html Intrinsèquement Classe) bon genre.

Vous avez dit web sémantique ou flux de production web ?

Je ne suis pas vraiment convaincu par ces arguments car la sémantique ne se réduit pas à la place des opérations à accomplir dans le flux de production web : à partir du moment où l’on connait le pas de la grille, il n’y a aucune raison de ne pas générer le fichier grid.css qui va bien. D’autant plus que cette grille ne devrait avoir aucune influence sur la qualité du code HTML à venir, si justement, l’intégrateur ou le webdesigner a pris soin de séparer le fond de la forme en amont.

Mais surtout, à part quelques frameworks qui nécessitent jusqu’à trois classes — voire plus — pour placer un bloc (ce qui commence à manquer de factorisation), la suite des .span-x peut se comprendre comme l’importance accordées à chaque bloc : du moins important (.span-1) au plus important (.span-24), à l’image de la presse écrite où un article surmonté d’un titre en 8 colonnes à Une mérite plus d’attention qu’un entrefilet sur 2 colonnes.

C’est dans cet esprit que je préfère un .span-x à un .grid-x, d’autant plus qu’il existe déjà un élément span en HTML.

Est-ce une raison pour justifier l’utilisation d’un framework CSS ?

J’aime bien tester rapidement différentes déclinaisons d’une charte graphique avec les frameworks. En effet, dès que le fichier grid.css (ou layout.css, maquette.css, etc.) est en place, on peut déplacer les blocs de contenus très rapidement : l’Édito sur 6 ou 8 colonnes ? Le Sticky Post, avec une marge à gauche ou à droite ? etc.

Quand les choix sont validés, je refais la partie layout de mon fichier styles.css avec les éléments utilisés réellement tout en gardant grid.css sous le co(u)de prêt à servir avec une règle @import entre commentaires.

Par exemple, pour tester ma grille, j’ai tendance à utiliser :

<div id="sticky-post" class="clearfix span-8 last"></div>

Et en production :

<div id="sticky-post"></div>

Avec :

#sticky-post {
    width: 310px;
    float: left;
    margin-right: 0;
    overflow: hidden; /* avec #sticky-post { zoom: 1 } dans le fichier ie.css */
}

Et ainsi de suite avec tous les éléments de la page. C’est un peu fastidieux, mais au final — et pour peu que vous réunissiez toutes vos CSS dans un fichier unique bien commenté — votre code HTML et votre feuille de style CSS y gagneront en lisibilité et surtout en légèreté.

Mais avant de modifier la base de données, je vous conseille d’en faire un backup. Pour cela, plusieurs solutions s’offrent à vous :

5 solutions pour sauvergarder votre BDD

1. Utiliser la fonction Export intégrée à WordPress pour obtenir un fichier XML sans les liens de votre blogroll préférée (d’ou la pauvreté de la mienne à ce jour) et sans toutes les tables ajoutées par les plugins que vous avez installés. Autant dire que cette option est à réserver lorsqu’on remet son blog à plat.
2. Installer un plugin dédié à cette tâche comme WordPress Database Backup qui va sauvegarder les tables selon votre bon vouloir. Notez que ce plugin permet de ne pas enregistrer les commentaires considérés comme du spam dans la table wp_comments et d’exclure les Post Revisions de la table wp-posts. Dans le même genre, wp-dbmanager offre un menu étoffé pour effectuer des opérations de maintenance de votre base de données sans quitter WordPress !
3. Profiter des fonctions de votre hébergeur préféré qui devrait permettre de faire des sauvegardes quotidiennes de l’ensemble de vos bases : les fichiers compressés seront probablement enregistrés à la racine de votre hébergement.
4. Trouver le lien Exporter dans phpMyAdmin puis cliquer sur Transmettre pour sauvegarder votre base sur votre poste de travail ou obtenir un joli fichier texte si vous laissez les choses en l’état. Enfin, vous pouvez cliquer sur Exécuter.
5. Enfin, pour les Jedi, il reste la ligne de commande comme mysql -h host -u user -ppass base_de_donnees > fichier_dump — Plus d’information sur aidenet.

Opération Search & Destroy avec Delete Revisions

Une fois la BDD à l’abrit, faites intervenir l’excellent Delete-Revision commis par gohsy. Ce plugin va simplement dégraisser la base de données et lui redonner une deuxième jeunesse en supprimant toutes les révisions redondantes. Comme ça, d’un seul clic. Je l’ai mis en place sur ce blog et tout à l’air de fonctionner correctement.

Le coup de la constante WP_POST_REVISIONS

Il est possible de se prémunir une fois pour toutes de ces révisions intempestives en ajoutant une constante dans le fichier wp-config.php situé à la racine du blog :

define('WP_POST_REVISIONS', false);

Et en la plaçant juste avant le commentaire :

/* That's all, stop editing! Happy blogging. */

Dans le même esprit, il est possible de ne conserver qu’un nombre définit de révisions avec la ligne (ici 3) :

define('WP_POST_REVISIONS', 3);

Le coup de la requête SQL DELETE

Si vous n’avez pas ajouté WP_POST_REVISIONS dès l’installation de votre blog, il faudra supprimer les révisions existantes. Pour cela, cette requête SQL — à copier-coller dans le champs phpMyAdmin qui va bien — est votre amie :

DELETE FROM wp_posts WHERE post_type = 'revision';

Plus d’information sur Comment désactiver le suivi des versions sous Wordpress 2.6 chez Korben et Malaiac qui nous offre une page consacrée à l’optimisation pour WordPress.

Quelques pistes pour optimiser WordPress

Supprimer les Post Revisions, c’est bien, mais pourquoi s’arrêter en si bon chemin alors que le réseau regorge de liens plus intéressants les uns que les autres ?

Profitons-en pour profiler notre outil de blog comme une voiture de course :

• Optimisation wordpress
• Alleger base de donnee db wordpress
• Petits moyens pour contenir et optimiser la base de donnees d’un blog sous wp
• Wordpress optimisez votre base de donnees en supprimant les revisions de billets

Ah bon, y a des gens qui travaillent sans grille ?

Grosso modo, tout le monde reconnait que oui, les frameworks c’est de la balle mais que non, ça n’est pas toujours possible car les éléments du design, du .psd, de la charte graphique, etc. n’entrent pas forcément dans une grille horizontale.

Travailler avec une grille de mise en pages est très courant dans le print : j’ai pris l’habitude de travailler en fonction d’un format de papier, de marges, de colonnes et de gouttières ainsi qu’avec l’option Aligner sur la grille du logiciel QuarkXPress.

Pour beaucoup de webdesigners en revanche, les grilles semblent vécues comme une contrainte au lieu de servir de guide. Comme le dit si bien André Gide, l’art nait de contraintes, vit de luttes et meurt de liberté. Ce qu’on pourrait traduire librement par : sans contrainte, l’art n’est rien ou encore par trop de liberté, nuit.

Votre grille, vous la prenez en entrée ou au dessert ?

Faut-il pour autant commencer la conception du design avec une grille devant les yeux ? Je ne le pense pas. Les premières recherches graphiques et les premiers placements de blocs devraient s’effectuer librement, à l’instint. C’est lorsque le résultat ressemble à quelque chose, qu’il est temps de déterminer le “pas” de la grille.

Pour des raisons de simplification et d’arrondi, la plupart des frameworks CSS proposent des grilles se limitant à des largeurs de 960 ou 950 pixels en 12, 16 ou 24 colonnes. Dans ces conditions, il est probable que le plus petit élément de ces grilles ne conviendront pas à vos besoins.

Pour définir une grille qui sorte des sentiers battus, il faut rassembler le maximum d’information sur votre contenu et le temps que vous êtes prêt à passer pour le préparer. Par exemple, si vous voulez afficher rapidement des vidéos Youtube dans votre sidebar, assurez-vous que sa largeur soit au moins égale à la largeur par défaut des vidéos, soit 425 pixels ! C’est pareil pour tout les éléments qui possèdent une taille fixée à l’avance, comme les Gravatars, les présentations Slideshare, les publicités, etc.

Pas besoin de framework pour travailler avec une grille

Et oui, il n’est pas nécessaire d’utiliser un framework CSS pour profiter des avantages qu’il procure. Dès que vous aurez déterminé le nombre de colonnes et la largeur de la gouttière en fonction de la largeur totale de votre design, vous aurez fait la moitié du chemin. L’autre moitié est composée du choix des balises HTML pour le contenu et le placement des blocs principaux (content, sidebars, header, footer, etc.).

Factoriser les déclarations CSS avec des classes plus ou moins sémantiques dans le code HTML ou multiplier les float:left et autres margin-right n’est pas le plus important et en ce qui concerne la partie purement layout. Il y a rarement des pixels à gagner avec l’une ou l’autre des solutions car  les octets économisés par la factorisation sont souvent dépensés par les span-x et autres append-x ou prepend-x inutilisés : toutes les combinaisons d’une grille ne sont pas de la partie, et heureusement !

Ne vous faites pas griller…

Les frameworks, c’est de la balle, mais il est important de s’éloigner des formats proposés pour suivre sa propre voie car si les solutions proposées par Blueprint ou 960.gs et consorts peuvent généralement prétendre au statut de standard, le risque est justement de standardiser sa production graphique pour la faire entrer dans le moule ! Gardez à l’esprit qu’une différence — même minime — dans les proportions d’un design peuvent changer radicalement la perception qu’on peut en avoir.

Ne vous laissez pas faire, mettez-moi ces grilles au pas

• blueprint — Fournit des fondations solides pour vos projets grâce à une grille facile à utiliser, une typographie fine, des goodies utiles et même une feuille de style pour l’impression.
• 960.gs — Ce système de grille est conçu pour fluidifier votre  chaine de production avec des dimensions communément utilisées à partir d’une largeur de 960 pixels. Existe en deux parfums : 12 et 16 colonnes pouvant être utilisés séparément ou ensemble.
• tripoli — Redéfinit une feuille de style par défaut pour les balises HTML de manière à assurer un rendu identique sur les navigateurs présents sur le marché. Excellente alternative aux full Framework si vous faites vous-même votre grille de mise en page.
• yaml — “Yet Another Multicolumn Layout” est un framework (x)html/css pour la création de maquettes flexibles.
• bluetrip — le meilleur de Blueprint et de Tripoli avec un zeste de Hartija pour la feuille de style à l’impression, la simplicité de 960 Grid System.
• typogridphy — Basé sur 960 Grid System, ce framework permet de créer des grilles flexibles d’une grande beauté typographique.
• yui grids — Offre un jeu prédéfinit de largeur de page comprenant 6 templates avec la possibilité de subdiviser les blocs. Au total c’est plus de 1000 combinaisons de maquette pour seulement 4kb.
• elasticss — Basé sur des techniques de colonnage traditionnel en 4 colonnes, ce framework permet de multiples combinaisons et subdivisions, et se distingue des autres par sa capacité à produire des design fixes, liquides ou élastiques très facilement.
• sencss — Un frameword “zen” qui ne vous obligera pas à adopter un système de grille particulier mais qui fournit plutôt un ensemble de styles pour les parties les plus répétitives de votre travail sans trop s’éloigner du style par défaut des navigateurs avec une grille verticale en 18 pixels. Fournit des jeux de polices de caractères spécifiques pour Windows, Mac et Linux.
• the golden grid — Ce système de grille est le fruit d’une recherche constante de la grille parfaite, et rien de tel que le nombre d’Or pour se rapprocher des dieux !
• css-boilerplate — Par l’un des  créateurs de Blueprint qui a décidé de se remettre à l’ouvrage pour aboutir à un framework qui ne vous obligera plus à choisir entre sémantique et efficacité : c’est vous qui décidez d’utiliser { float: left; width: 240px; margin-right: 110px; } ou class=”column span-2 append-1″ !
• BIC — Cf. BIC, un framework orienté couleur et typographie.
• bungee — Bungee utilise une grille de 12 colonnes dont la plus petite subdivision vaut 4em. Pour les nostalgiques des pixels, ça fait environ 64px. Au niveau de zoom par défaut, un site construit avec Bungee mesure 768px de large, et s’affiche donc parfaitement sur un écran de faible résolution.
• sparkl — Combine un marquage HTML CHIC (Code HTML Intrinsèquement Classe — POSH en anglais) et du javascript non-intrusif pour créer des sites web à l’épreuve des balles et conformes aux Standards. Ce framework CSS très modulaire vous permettra de vous concentrer sur vos besoins.
• hartija — CSS Print Framework.
• The 1Kb CSS Grid — Une grille minimaliste qui tient en une quinzaine de déclarations CSS. Idéale pour les débutant qui veulent comprendre le principe général des frameworks et pour les intégrateurs aguerris qui verront là un moyen économique de donner un rythme horizontal à leur mise en page. Choix du nombre de colonnes, de la gouttière et de la largeur totale avant le téléchargement. Suggéré par Darklg)
• 1 line CSS Grid Framework — Vous avez bien lu, il s’agit d’un framework qui tient en une seule déclaration : .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; } Etonnant, non ?
• malo — Du même auteur que le précédent et le suivant dont il est le petit frère, malo se distingue par sa légerté au service d’une grille en pourcentage
• emastic — Très complète, cette bibliothèque CSS s’utilise aussi bien avec des em qu’avec des % et s’accommode de largeur fixes ou fluides pour un poids de 4Kb pour la version compressée. Nombreuses démonstrations disponibles pour voir ce qu’il est possible de faire.
• logicss — basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités de redimensionnements de texte et un rythme vertical. Trois systèmes de grilles très souples, personnalisables à l’aide d’une boite à outils. Designs élastique en utilisant des EMs, liquide via les pourcentages ou fixe avec les pixels.
• wymstyle

L’appel de la fonction étant réduite au strict minimum :

$().ready(function(){ $(”#MySplitter”).splitter(); });

La splitbar peut être déplacée très facilement de manière accessible en cliquant-déplaçant avec la souris, avec une accessKey ou encore via la touche tab.

1. cleancss — La version française propose 4 niveaux de compression et permet de personnaliser les paramètres avec un gabarit de formatage pour votre feuille de style (exemple de compression maximale).
2. Styleneat — Trie (ou pas) les sélecteurs ou les déclarations par ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la feuille de style ou de l’uploader depuis votre poste de travail. (via roget.biz).
3. dustmeselectors — Cette extension pour Firefox traque les sélecteurs CSS inutilisés dans la page web affichée à l’écran.
4. Em Calculator — Pratique pour obtenir des valeurs en `em` pour les éléments de votre document HTML à partir d’une taille exprimée en `px`.
5. Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique.
6. pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les `%`, les `px` ou les `em`. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets.
7. drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné.
8. CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !
9. CSS Compressor.
10. CSS Compressor Advanced (cssdrive).
11. List-u-Like CSS Generator.
12. Cascading Style Sheets Optimization.
13. Labo CSS.

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Stay tuned and mind the gap!

Ca donne :

<blockquote id="baseline">
    <p>Ma baseline est plus belle que la tienne</p>
</blockquote>

En ce qui concerne les autres micro-contenus, je suis beaucoup plus partagé. Un paragraphe est un ensemble de phrases et on peut concevoir qu’en présence d’une seule phrase voire d’un seul mot, la balise p n’est pas la plus adaptée : on lui préfère d’ailleurs souvent la balise div.

Or, en l’absence de CSS — notamment sur les périphériques mobiles — les micro-contenus enveloppés avec div ne possèdent pas de marges, et visuellement, au mieux, c’est balot, au pire, c’est illisible (cf. le visionnage du flux friendfeed, par ex.) !

Dans ce contexte, vous privilégiez quoi entre :

<p id="copyright">copyright, copyleft ou copycenter ? </p>

et

<div id="copyright">copyright, copyleft ou copycenter ? </div>

A vous les studios !

Voici donc 4 messages que vous personnaliserez selon votre bon plaisir :

<?php  
    $more_strings = array(
    "Ne cliquez pas...",
    "Il n'est de bonne compagnie qui ne se clique",
    "Quand y en a plus, y en a encore...",
    "Voulez-vous en savoir plus ?..");
?>

Reste à remplacer l’appel à la fonction the_content() que vous utilisez habituellement pour afficher vos billets par cette ligne :

<?php the_content($more_strings[rand(0,count($more_strings))]); ?>

MàJ du 13/06/09 : Suite à la vigilance de Damien et aux explications détaillées de piouPiouM ainsi qu’à la cerise sur le gâteau apportée par Oncle Tom, voici les corrections apportées à l’appel à la fonction (voir les commentaires pour plus de détails) :

<?php $more_strings[mt_rand(0,(count($more_strings)-1))]); ?>

And the cat’s in the bag!

L’existence d’un fichier wordpress.css sera très utile pour les fans de cette plateforme de blog ! Je regrette juste que les styles spécifiques à WordPress ne soient pas tous présent dès maintenant. Peut-être dans la prochaine version ? Pour finir, il reste myclass.css au cas où vous auriez quelque chose à déclarer

Bref, du beau, du bon, du pocky à télécharger d’urgence.

PS : Si vous trouvez que les frameworks pénalisent les performances globales de votre site web en raison des requêtes surnuméraires, jetez quand même un oeil dans les différents fichiers de BIC : vous y trouverez certainement matière à réflexion.

Pour la revue des nouvelles fonctionnalités, je vous renvoie sur le test de Julien paru sur WebInventif qui est très complet.