Le Graphisme au XXe siècle est la traduction française de Graphic Design (A Concise History) écrit par Richard Hollis et publié en 1994. Ce livre est une mine d’or pour pour qui veut connaitre l’histoire du Graphisme à travers les pays qui lui ont donné ses lettres de noblesse : le futurisme et l’Italie, la Russie soviétique, l’Allemagne, les Pays-Bas, la Suisse, la France, la Grande-Bretagne, les Etats-Unis, l’Europe du Nord. Il contient plus de 800 illustrations et le texte est très riche. Je lis généralement en prenant des notes pour plus tard ou en surlignant les passages qui me plaisent au Stabilo. Ce billet est la compilation des extraits qui ont plus particulièrement suscité mon intérêt. Ils ne suivent pas forcément l’ordre des pages et certains passages ont été remaniés afin de rester compréhensibles une fois sortis de leur contexte.

1. Les trois fonctions du graphisme sont : identifier, informer et promouvoir.
2. Contrairement à l’artiste, le graphiste travaille en vue d’une reproduction industrielle.
3. Les progrès des arts graphiques sont dus à quelques pionniers qui travaillaient en équipe.
4. Les arts graphiques sont un langage à la grammaire indéfinie dont le vocabulaire s’étend sans cesse.
5. Les imprimeurs du moyen-âge réutilisaient déjà à volonté les illustrations gravées sur bois.
6. L’affiche est le premier support et l’entité la plus élémentaire des arts graphiques, mêlant le texte et les images.
7. La règle de base de l’Isotype est que la représentation d’un nombre important d’éléments doit se faire par de nombreux signes (et non par un seul signe de grande taille).
8. Eléments de base de la «typographie Bauhaus» : linéales, chiffres surdimensionnés et barres horizontales ou verticales pour utilisées de manières  esthétique et pour hiérarchiser l’information.
9. En 1906, les timbres dessinés pour la Bosnie-Herzégovine furent les premiers à utiliser la photographie.
10. Les graphistes viennois restaient cependant avant tout des artistes et il fallut longtemps encore avant que la profession de graphiste n’existe à proprement parler.
11. Les biscuits Bahlsen, le café Hag et les encres Pelikan furent parmi les premiers à adopter l’idée d’une image de marque.
12. Le matériel publicitaire que Behrens conçut pour AEG, austère et géométrique, est considéré comme la première utilisation d’un graphisme élaboré au service d’une politique commerciale.
13. Le concept du «style maison», ou de charte graphique fut développé dans les années 1930 par Olivetti et par la Container Coroporation of America (CCA).
14. La première guerre mondiale affirma l’importance du graphisme.
15. A la fin du XIXe siècle, la lithographie permet aux artistes d’imprimer de grands aplats de couleur, ce qui leur donne la liberté de dessiner eux-même les lettres plutôt que d’utiliser la gamme restreinte des caractères existants. Cette nouvelle maitrise de l’impression marque la naissance du graphisme.
16. Le métier de graphiste date du milieu du XXe siècle.
17. Les affiches des pays en guerre reflétaient leur niveau de développement graphique.
18. Mallarmé considérait la double page d’un livre comme un seul et même espace.
19. Le futurisme marque une rupture avec  la mise en page traditionnelle et symétrique.
20. Après la révolution de 1917, les arts graphiques devinrent un outil de communication de masse.
21. Les livres conçus par Lissitzky expriment l’idée selon laquelle les mots imprimés sont vus et non pas entendus.
22. Au sein du Bauhaus, une analyse approfondie de la communication visuelle commença par celle de l’alphabet.
23. Koch avait repris le Erbar, un caractère géométrique du début des années 1920, pour son Kabel qui apparut en même temps que le Futura, en 1927.
24. Le style moderne internationale survécut au nazisme pour réapparaitre dans les années 1960 sous le nom de «style suisse».
25. L’agence de publicité est une invention américaine.
26. Dans le travail de Cassandre, c’est le texte, la lettre qui déclenchent les idées qui engendrent la forme plastique.
27. L’affiche déclina au cours des années 1930 face au développement des magazines affichant de la publicité.
28. De nos jours, l’art de la mise en pages tire sa force de la libre association des techniques. Avec un appareil photo, une paire de ciseaux, une bouteille d’encre de chine et de la colle, une composition peut naitre et une idée nouvelle s’exprimer — Alfred Tolmer, imprimeur à Londres en 1931.
29. Aux Etats-Unis, dans les années 1930, les similitudes entre les pages éditoriales et publicitaires étaient révélatrices de l’interdépendance économique de la presse et de la publicité.
30. Aux Etats-Unis, la profession de directeur artistique était antérieure à celle de graphiste. Le club des directeurs artistiques de New York fut fondé en 1920.
31. Mehemed Fehmy Agha s’occupa de la direction artistique de Vogue, de House and Garden et de Vanity Fair. On lui doit la grille de maquette en double pages et l’utilisation de faux textes. Il fut le premier à considérer un magazine comme une succession de double pages plutôt que comme une suite de pages individuelles. Il est considéré comme le premier directeur artistique moderne.
32. Quand la simple énumération des faits est insuffisante, laborieuse ou peu claire pour le lecteur et qu’une organisation visuelle s’impose, il faut alors faire appel au graphisme — Will Burtin.
33. C’est justement quand vous commencez à vous ennuyer de votre création que votre public commence à la remarquer.
34. Le graphiste, affirmait Lou Dorfsman, doit être capable de montrer que le projet répond à un besoin, comment il fonctionnera, ce qu’il coûtera, à qui et comment il sera diffusé.
35. Au milieu des années 1960, le graphisme fut enfin reconnu comme une profession à part entière et les mensuels spécialisés comme Print, Communication Arts et Art Direction témoignaient de son excellente santé.
36. En 1940, la CCA avait créé son «laboratoire graphique», équipé d’une caméra qui enregistrait les mouvements de l’oeil sur un dessin.
37. Tschichold affirmait que le Bauhaus commettait deux erreurs : le rejet de toute mise en page centrée et l’utilisation exclusive de linéales.
38. Le système de grille de Gerstner trouvait sa source dans l’unité de base de mesure typographique et non dans les proportions de la page.
39. En 1957, le caractère sans sérif Neue Haas (rebaptisé Helvetica) devint incontournable pour les graphistes «constructivistes» des années 1950 et 1960.
40. La charte graphique d’Olivetti concernait même les logements, les écoles et les hôpitaux créés pour les employés.
41. Dans les années 1950, les photographies détourées accompagnées d’aplats de couleur devinrent des éléments incontournables du graphisme italien.
42. Au magazine Elle, dans les années 1960, Peter Knapp diposait d’un personnel considérable : 14 maquettistes, 2 retoucheurs, 1 dessinateur de lettres, 5 photographes de laboratoire, 5 compositeurs, 5 illustrateurs et 6 photographes de modes et leurs assistants.
43. Les graphistes suisses, comme Knapp, avait une formation complète et étaient habitués à des exigeances techniques inconnues en France.
44. En Grande-Bretagne, après la seconde guerre modiale, les arts graphiques participaient au programme de reconstruction économique et sociale.
45. Pendant les années 1950, les graphistes se forgèrent une identité professionnelle en adhérant à la Society of Industrial Artists qui leur offrait une charte professionnelle semblable à celle des architectes.
46. La qualité typographique du livre en Allemagne reposait sur les règles de composition établies par des graphistes tels que Renner et Tschichold dans les écoles d’imprimerie d’avant-guerre , et grâce auxquelles les mots et les lignes étaient correctement espacés, un aspect souvent négligé dans d’autres pays (particulièrement en France).
47. Si l’on considère le graphisme comme un moyen de résoudre un problème, tout ce que l’on peut espérer communiquer, c’est le problème lui-même. Le style est un virus — Neville Brody.
48. Grâce à l’informatique, le nombre de caractères disponibles dépassa le millier dès les années 1980.
49. Tant que nous aurons besoin de l’alphabet et de l’image, le graphisme existera.

Pour terminer cette longue liste, voici ce que pensait Ashley Havinden, qui résume parfaitement l’éclectisme dont doit faire preuve le graphiste :

Le graphiste est celui qui est capable de résoudre les problèmes de communication, quel que soit le médium imposé. Les graphistes sont libres de s’inspirer du classicisme de l’Antiquité, du fonctionnalisme du Bauhaus, de la symétrie du XVIIIe siècle, du réalisme de la Renaissance, de l’expérimentalisme cubiste, des bizarreries victoriennes, des images oniriques surréalistes, des photographies d’amateurs, des dessins industriels, des divisions de l’espace dans l’art abstrait et l’architecture moderne, de la typographie du XVe siècle, de la radiographie, de la gravure sur bois, de la nouvelle typographie de Tschichold, etc.

Le Graphisme au XXe siècle

Richard Hollis

Traduit de l’anglais par Christine Monnatte

ISBN : 2-87811-115-X

J’espère que ces quelques notes vous auront donné envie d’en savoir plus sur l’histoire du graphisme dans le monde. Si le format de ce billet vous plait, j’ai d’autres vieux bouquins dans ma bibliothèque qui n’attendent qu’une relecture pour se manifester !

Articles sur le même sujet

• La typothèque idéale par Smashing Magazine
• Guide stylistique — Exemple de charte graphique et éditoriale
• Quelques notes sur les éléments graphiques du webdesign
• Près de 60 polices de caractère pour Google Font Directory
• Le petit journal permanent de la TypOgrApHiE !

Une petite note personnelle pour annoncer la parution du hors-série n°5 du magazine Webdesign (webdesignmag.fr) dans lequel j’ai écris un tutoriel sur la création d’une page web réalisée avec HTML5 et CSS3 sans image, avec une dégradation gracieuse dans les navigateurs ne prenant pas en charge les coins arrondis, les ombres portées ou les dégradés.

En prime, les fichiers HTML et CSS sont disponibles sur le CD du magazine et l’ensemble est disponible pour la modique somme de 12,90€ dans les bons kiosques à journaux ! Cerise sur le gâteau, vous y trouverez une belle interview de Raphaël Goetter à propos d’Alsacréations.

Réussir son site avec HTML5, jQuery et CSS3. 18 tutoriels : vidéo et HTML5, coins arrondis, ombres portées, lightbox, légendes animés et des interviews de professionnels du web ainsi que des dizaines de liens.

100% tutoriels exclusifs sur HTML5, CSS3 et jQuery

Design dans le navigateur et amélioration progressive avec HTML5 et CSS3 : un exemple fonctionnel pour mettre en oeuvre les nouvelles balises en commençant par le balisage du contenu, l’ébauche de la page, le choix des couleurs, la structure générale de la page.

Retrouvez-moi à la page 128 du magazine !

Une interview de Raphaël Goetter pour découvrir le site d’Alsacréations qui propose à côté de son activité d’agence Web, un site communautaire très riche.

Une bien belle interview à propos d'Alsacréations.

Lire WebdesignMag hors série spécial HTML5, CSS3 et jQuery

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek
• HTML5 Please — Fallback et Polyfills (ou pas)
• 100+ Polyfills et Fallbacks pour HTML5
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours

Les champs personnalisés permettent d’ajouter des informations avant ou après le contenu de votre billet (dans la boucle WordPress) sans quitter l’interface de rédaction. Il s’agit d’associer une valeur (le contenu) à une clé choisie librement (ou parmi celles que vous avez déjà définie) et d’utiliser la fonction get_post_meta() dans votre thème.

De nombreux thèmes à tendance « magazine » se servent des champs personnalisés pour afficher une image au-dessus d’un billet. Pour cela, on crée la clé illustration et on met l’URL de l’image dans le champs valeur.

Voici un exemple concret :

<?php $image = get_post_meta($post->ID, 'illustration', $single = true); ?>

Le contenu de la clé llustration est placée dans la variable $image pour l’afficher plus loin :

<img src="<?php echo $image; ?>" />

C’est déjà fini ?

Les problèmes commencent

Maintenant, il faut saisir l’URL de votre image dans la section Champs personnalisés en bas de l’interface d’édition du billet.

Oui, mais voilà, cette URL, vous ne l’a connaissez pas encore. En effet, WordPress s’occupe lui-même de l’emplacement de votre image dans un dossier du genre /wp-content/uploads/2008/08/...

1ère solution : télécharger l’image via un client FTP

Certains ont résolu le problème en créant un répertoire dédié pour ces images et en les téléchargeant avec un client FTP. Mais à l’usage, ça reste très lourd au point d’enlever presque tout intérêt à l’affichage d’images par ce moyen.

<img src="mes-images/<?php echo $image; ?>" />

Toutefois, il existe une option sous forme de case à (dé)cocher (organiser mes fichiers envoyés dans des dossiers mensuels et annuels) pour mettre toute les images en vrac dans le dossier /uploads. Comme ça, il suffit d’ajouter le nom du répertoire dans le thème et de saisir le nom de l’image dans le champ valeur :

<img src="uploads/<?php echo $image; ?>" />

Toutefois, ces images en vrac ne sont pas une solution satisfaisante : on risque de créer plus de problèmes sur le long terme que ça en a réglé sur le court terme. Et puis, il est toujours nécessaire de télécharger les images à part, même si l’on économise la création d’un dossier ;)

2ème solution : utiliser la boite de dialogue prévue…

En réfléchissant un peu à la question, j’ai trouvé une petite astuce toute simple pour connaitre cette fameuse URL en évitant de mettre le bazar dans /uploads

1. Ajouter une image comme vous le feriez si vous vouliez l’afficher dans le billet,
2. Copier l’adresse de l’image qui apparait dans la boite de dialogue.
3. Fermer la fenêtre d’importation
4. Coller l’adresse de votre image dans le champ valeur à côté de la clé llustration dans les Champs personnalisé.

Voilà, c’est simple, efficace et sans bavure ;)

MAJ : Dans la version 2.7, l’adresse n’apparait plus dans la boite de dialogue d’importation. Il est nécessaire d’incorporer l’image pour obtenir l’url.

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• WordPress — Une meilleure indexation avec Not at All in One SEO
• Quelques notes sur un thème magazine de A à Z — E comme épure

A force de lire tout et n’importe quoi sur la monétisation des blogs, de la rémunération des blogueurs ou sur le fait que tout travail mérite salaire, je me suis demandé ce que le blogging avait de si spécial qu’il faille sans cesse se justifier pour placer une publicité par-ci ou écrire un billet sponsorisé par-là, alors que personne ne trouve à redire à propos des publi-rédactionnels qui envahissent nos magazines papier… Mais chaque chose en son temps : au fait, c’est quoi déjà un blog ?

Définition du blog

Il est généralement admis que le blog est un média d’expression personnel ou collectif regroupant des textes, des images ou des vidéos et où les éléments les plus récents se retrouvent en tête de gondole.

Dis comme ça, si l’on met les vidéos de côté pour des raisons technologiques, il n’y a aucune différence entre un blog écrit par plusieurs auteurs et un magazine.

Le blog est un magazine comme les autres

Avant d’aller plus loin, je tiens à préciser que je n’entre pas dans des considérations qualitatives ni même quantitatives : les goûts et les couleurs… En effet, si les premiers blogueurs ont donné le sacrosaint rythme du billet quotidien, nous ne sommes pas obligé de nous y tenir !

Comme les écrivains, les blogueurs ont chacun leurs motivations. Si les blogueurs historiques ont trouvé dans la blogosphère un espace de liberté dans la continuité des canaux IRC où la publicité était bannie, les blogueurs d’aujourd’hui démarrent souvent leurs blogs avec des interrogations relatives à la protection et la monétisation du contenu. Et-ce-n’est-pas-sale !

Le billet sponsorisé est-il un publi-rédactionnel ?

Dans ces conditions, pourquoi diable, la publicité et les publi-rédactionnels sur les blog ne sont-ils pas considérés de la même façon que dans les journaux et les magazines ? C’est assez simple à comprendre : que dirait-on si l’on trouvait un encart publicitaire ciblé à la fin de chaque chapitre d’un roman ? Franchement on ferait un peu la gueule, non ?

Vous me direz certainement qu’ayant acheté le roman en question, vous auriez le droit de vous plaindre de l’intrusion de la publicité. Et vous seriez dans le vrai…. Mais avouez quand même que vous auriez le même rejet de la publicité si le roman était publié à compte d’auteur et donné gratuitement…

Ce rejet de la publicité ne touche pas la presse quotidienne et la presse magazine, comme il ne touche pas les blogs de type « magazine » très présents dans le monde anglo-saxon, comme techcrunch ou mashable qui ont été, comme qui dirait « franchisés » avec fr.techcrunch.com et fr.mashable.com.

Curieusement, la version française de Techcrunch n’accueillera pas de billets sponsorisés après que les lecteurs du blog ont été invité à donner leur avis sur la question. Pour ma part, j’ai toujours cru qu’au moins la moitié des billets sur ce genre de blogs était soit des billets sponsorisés soit du copinage, ce qui revient au même et devrait faire réfléchir tout les blogueurs qui ont — ne serait-ce qu’une fois –, fait un lien dans un « En vrac » pour copiner :D

En vérité je vous le dis, la plupart du temps, ce n’est pas la publicité en soi qui est rejetée : c’est lorsqu’elle s’affiche au milieu d’un contenu qui apparait ou qui est présenté comme un point du vue personnel sur les choses. Ce n’est pas étonnant quand on pense qu’à l’origine et jusqu’à preuve du contraire, le blog est traditionnellement un carnet de bord personnel, un journal extime voire un journal intime…

Evitons l’intrusion intempestive de la publicité au milieu du contenu

Enfin, dans les magazines, il y a une séparation nette entre le contenu et la publicité. Sur les blogs, le traitement visuel des encarts et leur emplacement répondent aux mêmes lois que sur le papier, même si la spécificité du web fait la part belle aux listes de liens publicitaires qui peuvent se confondre avec une blogroll de bon aloi…

En revanche, il n’y a pas d’équivalent au billet sponsorisé dans la presse magazine : le publi-rédactionnel qui pourrait s’en rapprocher est une forme spécifique de publicité qui s’apparente à un article ou un dossier, mais qui n’a pas vraiment la prétention de se faire passer pour tel. D’ailleurs, son emplacement obéit pratiquement aux mêmes lois que les encarts publicitaires.

Pour finir sur le traitement des publi-rédactionnels, il est important de prendre en compte que s’ils reprennent souvent des éléments de la charte rédactionnelle alentour, on n’ignore jamais qu’il s’agit de publicité. Alors que même signalés, les billets sponsorisés reprennent en revanche presque toujours la mise en forme des billets « naturels ».

Extension du domaine du blog

Depuis peu, le format « blog » sert à véhiculer autre chose que le vécu ou les pensées d’un individu : les sociétés créent des blogs d’entreprise, des créateurs d’entreprise s’en servent pour créer du buzz autour de leur business, les Universités font de la veille technologique et les romancières l’utilisent pour se faire connaitre des maisons d’édition, etc.

Difficile dans ces conditions d’avoir un discours valable pour des pratiques aussi diverses et je ne pense pas que la solution passe par des barrières entre les blogueurs qui monétisent leur contenu et ceux qui sont réfractaires à la publicité. Le web et la blogosphère s’enrichissent des apports de tous, même si certains blogueurs s’enrichissent plus que d’autre…

Articles sur le même sujet

• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Webdesign Magazine — un Hors-Série n°5 spécial HTML5, CSS3 et jQuery
• Guide stylistique — Exemple de charte graphique et éditoriale
• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• Elle a bon dos, la longue traine…

Après le thème Agrumz et après avoir mis en place un thème provisoire en attendant, voici SquaryBluevie, le nouveau thème bleu et carré (et un peu vert aussi) pour css4design. Il ne s’agit pas vraiment d’un thème destiné à transformer ce blog en magazine, mais plutôt d’en faire un magazine qui ressemble à un blog, nuance, nuance… Un blogzine ? Oui, oui, c’est presque ça ! Comme promis, voici donc le premier volet de la série Danse avec les loops pour montrer ce qu’il y a sous le capot.

Une ligne éditoriale moins linéaire

Je ne m’étendrai pas trop sur les interrogations existentielles qui m’ont poussé à changer le design et la structure de ce blog. La première chose, c’est que la succession simple des billets dans l’ordre chronologique inverse ne correspond plus vraiment à mes aspirations et aux différentes rubriques qui composent ce blog.

En effet, si le coeur de la ligne éditoriale est consacré à la création de site web en général en mettant l’accent sur les problématiques liées à l’intégration HTML et CSS et à la structuration des contenus, j’aborde d’autres sujets comme le Web 2.0, le e-commerce et il m’arrive de publier des billets d’humeur sur l’actualité du web.

Si ces sujets peuvent très bien s’accommoder d’une structure de blog classique, j’avais envie de mieux distinguer les articles de fond des billets plutôt brefs, tout en mettant en avant mes billets d’humeur. Le problème du blog « classique », c’est que les billets disparaissent vite de la page d’accueil et perdent rapidement en visibilité, même si l’ami américain Google est là pour les faire remonter à la surface.

Il me fallait donc un système pour conserver une certaine unité dans la liste des articles en rapport avec les thèmes principaux abordés sur le blog tout en autorisant la publication de billets brefs et d’humeur. Un blogzine, en fait ;)

Voici pour les explications éditoriales. Jetons maintenant un oeil sous le capot !

Hiérarchie des Templates

Grâce à WordPress, il est possible de construire un thème en utilisant uniquement le fichier index.php. Chaque requête — le fait de cliquer sur une catégorie, une page d’archive, le titre d’un billet, un tag, etc. — crée un contexte de variables qui pointera vers ce fichier.

Si l’on veut afficher les contenus différemment sur le billet seul, par exemple, deux solutions s’offrent à nous : les marqueurs conditionnels (Conditional Tags) comme is_single() ou la création d’un fichier single.php.

S’il s’agit de modifier une largeur de colonne au passage du billet seul, le marqueur conditionnel suffit. En revanche, si les modifications sont plus profondes, le fichier single.php sera sans doute plus adapté sachant que dans la plupart des cas, la solution passe par un mélange des deux techniques.

La première chose à prendre en compte est le nombre de maquettes dont on dispose pour afficher tous les contextes possibles, même si dans la plupart des cas, il n’est pas nécessaire de mettre en place tous les Templates possibles.

Pour y voir un peu plus clair, voici une table des correspondances entre les marqueurs, les templates et la hiérarchie qui leur est associée (Template Hierarchy) :

Pour SquaryBluevie par exemple, je voulais tout faire en utilisant uniquement le fichier index.php, mais bien que cela soit possible, le risque est grand de se mélanger les pinceaux entre la multitude des conditions…

J’ai donc ajouté à index.php, les fichiers home.php, page.php et single.php. Le reste étant composé de fichiers inclus de manière conditionnelle ou en fonction du Template. C’est le cas pour header.php, footer.php, tutoriels.php, sidebar0.php, sidebar1.php, sidebar2.php, etc.

Un découpage en 7 grandes zones

1 L’en-tête

Le fichier header.php est composé de deux grandes parties. La première contient les éléments qui apparaissent sur l’ensemble du blog. C’est la partie header :

• Sommaire en haut à gauche,
• Classement Wikio en haut à droite,
• Texte de présentation de l’auteur,
• Logo,
• Texte de présentation du blog,
• Liste des pages statiques en dessous.

La deuxième partie header2 est située juste en dessous :

• Photo de l’auteur,
• Icône du flux RSS,
• Texte situé entre les deux.

C’est ce texte qui affichera un contenu différent selon le contexte :

• Dans une catégorie (<?php if ( is_category() ) : ?>), j’affiche la description de la catégorie
• Dans la page affichant l’article seul (<?php if ( is_single() ) : ?>), j’affiche une introduction générale pour les articles,
• Ni dans une page d’article ni dans une page statique ni dans une catégorie (<?php if ( !is_single() && !is_page() && !is_category() ) : ?>), j’affiche le dernier billet dans la rubrique « Editorial ».

La description du blog est celle que l’on renseigne habituellement dans Réglages -> Options générales -> Slogan du panneau d’administration. L’appel du texte se faisant avec la fonction <?php bloginfo('description'); ?>. Comme il s’agit — avec la présentation de l’auteur — d’une zone de widgets, il est possible de remplacer aisément la description du blog par un texte libre (notamment si la description est trop courte) en utilisant un widget texte.

Ceci est possible grâce à la fonction suivante (voir ce billet consacré à la création de zones widget dans WordPress) :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header2') ) : ?>
<div>
    <h2>Description du blog</h2>
    <div><?php bloginfo('description'); ?></div>
</div>
<?php endif; ?>

<?php $my_query = new WP_Query('category_name=editorial&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();?>
    Votre boucle ici
<?php endwhile; ?>

A l’affichage d’une catégorie, cet édito est remplacé par la description de la catégorie idoine. Cette description est accessible dans l’administration via Gérer -> Catégories -> Description. Le code à utiliser dans le Template est <?php echo category_description(); ?>. Enfin, lorsqu’on affiche l’article seul, cette description est remplacée par un texte libre (widget texte).

2 Billet « C’est vite dit ! » (En bref)

Sous le header, la deuxième zone se compose d’un billet « En bref » (cet intitulé — comme d’autres sur le blog — est modifiable dans le fichier functions.php) surmonté d’un visuel optionnel géré par les champs personnalisés (Customs fields).

Cette rubrique n’est ni plus ni moins que la catégorie 1 (uncategorized à l’origine) dont j’ai modifié l’intitulé. L’avantage est de pouvoir compter sur l’identifiant présent dès l’installation du blog, ce qui évite d’avoir à mettre les mains dans le code pour masquer cette catégorie dans les autres boucles. Par ailleurs, cette catégorie « originelle » est cochée par défaut, ce qui permet de gagner du temps lorsqu’on veut rédiger un billet court ;)

Note : pour afficher une seule rubrique, il est possible de se servir de son nom, mais pour l’exclure, il semble nécessaire de passer par l’identifiant numérique (à moins qu’une option m’ait échappée).

Voici le code pour cette boucle :

<?php if(!is_paged()) : ?>
    <?php $my_query = new WP_Query('cat=1&showposts=1');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
        Contenu de la boucle
    <?php endwhile; ?>
<?php endif; ?><!-- end !is_paged -->

Pour cela, en plus d’initialiser la variable $do_not_duplicate dans la première boucle, il faut exclure le billet en question de la deuxième boucle :

<?php $my_query = new WP_Query('cat=1&showposts=6'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
        Contenu de la boucle
<?php endwhile; ?>

La fonction update_post_caches() est là pour pallier le fait que certains plugins ne fonctionnent pas correctement lorsque plusieurs boucles sont présentes sur la même page. Cette fonction réinitialise le cache des billets pour éviter d’éventuels problèmes.

3 Les articles du blogzine proprement dit

Cette zone est suivie de la liste des billets publiés au fil de l’eau sur le blog à l’exception de l’édito et des billets « En bref ». Toutefois, je voulais que ces deux rubriques puissent apparaitre lorsque les visiteurs cliquent sur les Articles plus anciens car si la redondance est gênante sur la première page, elle l’est moins sur les autres :

<?php if(!is_paged()) : ?>
    <?php query_posts("$query_string&cat=-1,-16&showposts=10");
    /* Affichage des articles sauf featured et édito */?>
<?php else : ?>
    <?php query_posts("$query_string&showposts=15"); ?>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
        Contenu de la boucle
<?php endwhile; ?>

Il ne faut pas oublier le paramètre $query_string qui permet de recréer le contexte de la requête (ici is_paged() ) car la fonction query_posts() est un peu l’auberge espagnole : seules les variables précisées en paramètres sont disponibles sur votre page.

4 Le menu à onglets sur la droite

Ce pavé inaugure la barre latérale et est en quelque sorte le pivot du blog, la boussole qui sert de point de repère dans ce qui pourrait apparaitre comme une cacophonie de textes :

• Catégories — le moins mauvais des systèmes pour se repérer dans un blog ;
• Derniers articles publiés afin que le lecteur ait une vision « applatie » des parutions sur le blog. En effet, l’édito ou le billet « En bref » peuvent rester un certain temps avant d’être remplacés, même si le contenu du blog proprement dit (la quatrième zone) peut évoluer plus rapidement ; à moins que l’inverse se produise car il est tout à fait possible de publier plusieurs billets courts dans « En bref » ou de prendre un coup de sang quotidien avec l’édito !
• Articles les plus commentés. Si les derniers commentaires (voir plus bas) permettent aux visiteurs de se faire une idée sur les dernières discussions en cours, la liste des articles les plus commentés permet de faire remonter certains articles anciens qui ont, en leur temps, fais parler d’eux ;)
• Derniers commentaires avec le gravatar, l’URL du commentateur et l’adresse du billet commenté. Pratique, pour donner au visiteur un aperçu des sujets qui suscitent actuellement le plus d’intérêt.
• Nuage de tags pour donner un aperçu des thèmes abordés sur le blog au visiteur de passage (qui représente quand même plus de la moitié des visites).

A noter que lorsqu’on se trouve sur les pages single.php (affichage des billets seuls) et page.php (affichage des pages « statiques »), ce menu ne propose que les 3 premiers onglets afin de laisser plus de place pour l’article. Voici le code :

<?php if ( !is_single() && !is_page()) : ?>
    <div id="menu-wide">
<?php else : ?>
    <div id="menu-narrow">
<?php endif; ?>

5 Tutoriels aléatoires

Sous le menu à onglets, j’affiche un article aléatoire parmi ceux qui sont tagués « tutoriel ». Ca tombe bien car c’est un des rares tags que j’ai employé à bon escient depuis de début ! Ca permet de faire « remonter » des billets rédigés il y a plus de deux ans et sur lesquels j’ai le plus transpiré ;) La boucle est relativement similaire aux autres :

<?php /* Affichage des tous les billets tagué "tutoriels" */
query_posts('tag=tutoriel&showposts=1&orderby=rand');
while (have_posts()) : the_post(); ?>
    Contenu de votre boucle
<?php endwhile; ?>

Cette zone peut être précédée ou suivie d’une zone widgétisable pour placer une éventuelle publicité (actuellement des vidéos virales de unrulymedia) ou tout autre élément à la mode. Une zone est même prévue au-dessus du menu à onglets pour la même chose. Bon, rassurez-vous, une publicité placée au-dessus du menu principal vaut son pesant de cacaouettes : le jour où ça arrive, je vous invite à boire un café sur Lyon :D

6 Deux barres latérales pour le prix d’une !

C’est le moment de diviser la barre latérale en deux afin d’accueillir d’autres types de contenus. Pour le moment la première sidebar accueille la suite des billets « En bref » suivie d’une petite publicité virale (oui, j’essaie de trouver des alternative à Google Adsense… pas si facile non plus ;) )

La deuxième barre latérale est destinée à accueillir des liens externes comme les liens sponsorisés (saymal, mais saybon quand même :D ), les flux RSS externes, etc.

A noter que sous cette double sidebar, il est possible d’afficher du contenu à l’aide d’une zone widgétisée sur la largeur des deux colonnes.

7 Le footer

Ce footer est lui-même divisé en deux : un big footer (inactif pour l’instant) et le footer proprement dit qui affiche quelques informations classiques comme les droits réservés, l’adresse des différents flux RSS, le lien vers le formulaire de contact, etc.

Les widgets

Ce thème est truffé de zones widgets ready pour permettre une certaine souplesse dans l’administration du blog en minimisant les allers-retours dans le code. Pour information, SquaryBluevie ne compte pas moins de de 19 zones de widgets, certaines actives et d’autres pouvant être activées sur un claquement de souris.

Voici la liste des différentes zones de widget et leur utilisation actuelle ou prochaine :

1. header1 – présentation de l’auteur (widget Texte),
2. header2 – présentation du blog (inactive pour l’instant),
3. article – texte de remplacement de l’édito et de la description de la catégorie quand on est sur l’article seul,
4. tab1 — contenu du premier onglet dans le pavé de droite. Actuellement les catégories,
5. tab2 — derniers billets publiés,
6. tab3 — articles les plus commentés par les visiteurs,
7. tab4 — derniers commentaires des visiteurs
8. tab5 — listes des tags les plus utilisés
9. sidebar-top — zone située au-dessus du menu à onglets (inactive pour l’instant),
10. sidebar-middle — zone située sous le menu à onglets (Actuellement une vidéo publicitaire),
11. sidebar-middle2 — zone située sous le tutoriel aléatoire (inactive pour l’instant),
12. sidebars-bottom –zone située sous les deux colonnes latérales,
13. sidebar1-top — zone placée au-dessus de la première barre latérale étroite,
14. sidebar1-bottom — zone placée en dessous,
15. sidebar2 — l’ensemble de la deuxième barre latérale étroite est gérée par cette zone. Principalement pour des liens externes et/ou publicitaires (flux RSS, liens sponsorisés, blogroll, etc.),
16. bigfooter – si le besoin s’en fait sentir, une zone big footer est diponible sur toute la largeur de la page en 2, 3, 4 ou 5 colonnes en fonction des besoins. (inactive pour l’instant),
17. footer – zone disponible au début du footer (inactive pour l’instant),
18. adz — affichage des publicités AdSense à la fin du billet seul et sous le billet « En bref » présent sur la Home.
19. sidebar-single – permet d’afficher des élément sous le menu à onglets lorsqu’on lit un billet seul.

Grille de mise en page, feuilles de styles CSS et Javascript

Je ne m’étendrai pas trop sur ces questions qui feront l’objet d’un autre article : ce design est provisoire (ce qui n’est pas le cas de cet article) et je ne suis pas sûr de vouloir garder la même approche. Mais pour ceux qui sont curieux et qui n’ont pas envie de regarder le code source, voici quelques informations.

Pour ce thème, j’ai utilisé le framework CSS Blueprint en redéfinissant totalement la grille horizontale proposée par défaut en utilisant l’excellent Blueprint Generator pour générer automatiquement le fichier grids.css : il suffit de préciser quelques informations. J’ai opté pour une grille en 14 colonnes de 52 pixels chacune, séparées par une gouttière de 18 pixels, pour une largeur totale de 962 pixels.

L’avantage du framework Blueprint est de pouvoir tester rapidement plusieurs mises en page à partir de la même grille. La prise en main est relativement facile si l’on possède des bonnes notions de CSS et si l’on si sait à quel moment il faut rétablir le flux après les flottants : lorsqu’on détermine une largeur à l’aide de Blueprint, on utilise un float: left en même temps !

J’ai utilisé également le script ie7.js de Dean Edwards pour faire en sorte que Internet Explorer 6 se comporte comme IE7. Je vous invite à lire l’article Quelques notes sur la bibliothèque Javascript IE7 qui vous permettra d’en savoir plus sur les comportements ajoutés à Internet Explorer pour le rendre plus friendly ;)

Conclusion

Dans ce billet, je n’ai pas abordé les aspects graphiques : comme je l’ai déjà évoqué, ce thème est pour moi un saut dans l’inconnu car je n’ai pas l’habitude de travailler le bleu, les blocs carrés ou encore les designs symétriques ! Tout celà donne un aspect institutionnel qui n’était pas recherché au départ mais qui peut faire son petit effet ;)

Rassurez-vous toutefois, mon objectif n’était pas d’obtenir des backlinks d’un site se terminant par .gouv, mais simplement de mieux structurer le blog et d’utiliser une palette de couleur tendant vers la monochromie (deux couleurs froides) afin que le regard du lecteur ne se disperse pas trop : plus les contenus sont nombreux et variés et plus la sobriété est importante.

Par ailleurs, le graphisme de ce blog est destiné à évoluer régulièrement pendant quelques temps, le temps de trouver un rythme de croisière entre l’édito, les brèves, les articles de fond, les tutoriels, etc…

Stay tuned and mind the gap!

Articles sur le même sujet

• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• Les widgets dans WordPress 2.5 avec widgétisator ;)
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• Quelques notes sur un thème magazine de A à Z — E comme épure

Rappelez-vous, je m’étais lancé dans la conception d’un thème pour WordPress qui aurait des « allures » de magazine. C’est Julien qui m’a gentiment lancé un petit reminder sur Twitter pour que je me bouge la souris ;) Après avoir gribouillé quelques notes, je me suis aperçu qu’il serait difficile de proposer un thème magazine adapté à tous les publics et à toutes les lignes éditoriales… (Je précise d’emblée que le thème que vous avez sous les yeux n’est pas celui qui est destiné à être distribué. Il en est juste l’épure qui me sert à tester le moteur de WordPress en profondeur in situ. Pour l’occasion, j’en ai profité pour faire mon redesign de printemps. Je précise aussi que cet article est un mashup de plusieurs billets que j’avais prévu de publier séparément ; il est donc un peu long)

Un thème, une imprimante ?

…Difficile en effet de se mettre à la place de blogueurs d’horizons aussi différents que ceux qui traquent le scoop sur internet, et ceux qui bloguent sur des niches éditoriales en creusant leur sillon rédactionnel, on trouve même des blogs à mi-chemin comme G&H par exemple.

Après le slogan Un PC, une imprimante, voici le temps d’Un blog, un thème magazine ? Peut-être pas, mais tout le monde a le droit d’avoir une structure souple et modulaire, tant dans l’emplacement des différentes rubriques que dans le template lui-même qui doit pouvoir accepter facilement la création d’une colonne supplémentaire par ci ou la disparaition d’un bloc par là.

Dans les thèmes comme Révolution ou Mimbo, les contenus sont souvent posés comme un cheveu sur la soupe et rendent les blogs qui les utilisent inutilement complexes ; le contenu a du mal à trouver sa place, ce qui est un comble pour la forme la plus épurée du discours écrit qu’est le journal de bord, à l’origine !

Edit : Suite au commentaire d’Al-Kanz concernant son très joli blog basé sur le thème Mimbo, je me dis qu’il va être difficile de tenir la position du paragraphe précédent qui ne reflète qu’une partie de ma pensée : je ne critique pas les thèmes Mimbo ou Revolution en eux-même, mais l’utilisation qui en est faite (je vous assure que j’ai vu des horreurs basées dessus, même si je ne parviens plus à trouver les liens…).

Ce n’est évidement pas une fatalité, mais force est de constater que dans thème magazine, il y a magazine, que dans magazine il y a mode et que dans la mode, on trouve de tout : du prêt-à-porter et du sur-mesure… Seul ce dernier permet de mettre le contenu en valeur et fidéliser un lectorat qui saura faire la différence entre la chaine de Pizza qui fait dans le quantitatif et le petit bouchon lyonnais qui prépare ses petits plats dans les grands.

Le nerf de la guerre du thème magazine, c’est n’est pas le contenu à proprement parler, mais les contenus : il est préférable que les thèmes abordés, les angles de vue soient différents d’une rubrique à l’autre pour profiter au mieux d’un découpage de type journal ou magazine, sinon, il est préférable d’en rester au blog traditionnel.

Attention, je ne parle pas ici de découpage dans le sens « design » du terme, mais plutôt du découpage des différents thèmes (hum.. sujets) abordés dans un blog.

Back to basics

Ce qui fait le succès du blog traditionnel est sa simplicité : il s’agit essentiellement d’afficher une liste plus ou moins longue de billets dans l’ordre chronologique inverse. Mais cet avantage peut se retourner contre l’auteur du blog qui rédige régulièrement des articles de fond : au bout d’un moment, des billets qui en ont encore sous le pied, disparaissent dans le trou noir des « Older Posts » et autres « Lire les billets plus anciens »… Heureusement, Google est là pour les ressortir de temps à autre, mais ce n’est pas toujours suffisant…

Il peut être intéressant de « repêcher » les billets plus anciens pour les remonter en page d’accueil. Grâce aux archives ? Non, car elles sont rarement consultées, et WordPress propose une foultitude de fonctions pour pêcher les billets en eaux profondes.

Contrairement aux sites web qui ont tendance à mettre le paquet en page d’accueil, les magazines papier présentent souvent en 1ère de couverture un aperçu des sujets abordés dans le numéro pour éveiller l’intérêt du lecteur ; sur le web, on a pris l’habitude de diminuer le nombre de clics nécessaires pour accéder à une information : les splash screens et autres pages tunnels ont disparu depuis longtemps, et je ne suis pas sûr qu’il faille les remettre en selle ;)

C’est quoi au juste le « style » magazine ?

D’après ce que j’ ai compris, pour donner à un thème de blog un air de « Magazine », il suffit souvent de mettre en exergue le dernier billet publié ou de réserver un espace pour une catégorie featured (A l’affiche) et mixer le tout dans l’espace pour s’affranchir un peu du sacro-saint ordre anté-chronologique parfois bien monotone. Voici une liste de quelques élements qui caractérisent un magazine :

Publication périodique et régulière

La périodicité est peut-être l’élément le plus évident pour qualifier un journal ou un magazine. Toutefois, cette notion de « numéro » est difficile à retranscrire sur un blog, bien qu’il soit possible d’écrire à l’avance tous les articles d’un même numéro pour les publier en même temps grâce à la publication différée ! Bien qu’un peu extrême, cette solution peut correspondre à certains besoins.

L’autre façon de simuler la notion de « numéro » passe par les tags : il suffit de taguer à l’identique tous les billets d’un numéro pour qu’ils s’affichent en même temps si le template est équipé des query_posts personnalisées ou WP_query qui vont bien. Dans le cas d’un blog « hebdomadaire », on pourrait, par exemple, taguer les articles de la semaine avec « s1″ pour « semaine 1, etc. et d’être un minimum rigoureux dans le temps (en même temps on parle d’un magazine, pas d’une feuille de choux !).

Sinon, il reste toujours la possibilité de publier chaque billet au fil de l’eau, sachant que certaines zones seront peut-être mises à jour moins souvent que les autres. Ce qui n’est pas forcément un mal en permettant de conserver certains articles en page d’accueil plus longtemps.

Plusieurs auteurs

Parmi les grands principes que l’on retrouve dans une publication de type magazine, on trouve la pluralité des auteurs, alors que le blog est généralement écrit par une seule personne. Ceci dit, on peut constater depuis quelques temps, une nette tendance à accueillir des contributions extérieures sur de nombreux blogs.

Si ça devenait une habitude, les thèmes magazine pourraient avoir un rôle important à jouer en donnant à différents auteurs une place sur le blog pour s’exprimer.

Les dossiers thématiques

Un dossier est un ensemble d’articles tournant autour d’un même sujet. Comme la question de la périodicité, la constitution de dossiers est difficile à rendre avec les systèmes de blog qui trouvent là leurs limites en terme de profondeur taxonomique ou de mise en place de sommaire automatique comme cela existe par ailleurs sur certains systèmes de wiki capables de récupérer les titres.

WordPress a le bon goût de fournir une fonction pour découper un article en plusieurs parties, ce qui n’est déjà pas mal pour transformer un article en dossier. On pourra utiliser également les tags communs à un sujet pour regrouper les billets concernés.

Un édito

L’édito symbolise presque à lui tout seul le style magazine : c’est le supplément d’âme de la publication. Les plus grands journaux l’ont bien compris en donnant la parole à des écrivains expérimentés ou polémiques en fonction de la ligne éditoriale et rédactionnelle retenue.

les rubriques

C’est l’élément le plus évident et le plus simple à mettre en place. On pourra même utiliser plusieurs blocs pour regrouper certains thèmes en fonction des pages affichées : les rubriques principales en page d’accueil et les rubriques secondaires lorsque le billet est affiché seul ou lorsqu’on affiche certaines catégories.

Mise en page

Pour finir, la mise en page doit rythmer cet ensemble de contenus hétérogènes tout en proposant un sens de lecture en privilégiant certaines zones par le traitement de la typographie, de la couleur, de la taille, etc.

De quelle type de contenus disposons-nous dans WordPress ?

WordPress est composé d’un écosystème assez riche pour permettre de diversifier les différents types de contenus de votre magazine :

• Articles,
• Pages,
• Widget Text — très pratique pour afficher des portions de texte un peu partout sur la page ! A consommer avec modération ;)
• Descriptions des catégories — Encore peu utilisées, cette zone permet de donner des informations supplémentaires lorsqu’on affiche une catégorie.
• Listes de liens (blogoliste) — Une option permet d’associer une vignette à un lien.
• Description du blog — Généralement affichée sous le nom du blog, elle peut très bien être déplacée où l’on veut.

Lorsqu’on manque de contenu, il peut être utile de faire appel à des professionnels.

A cela, il faut évidemment ajouter les éléments de navigation suivants :

• Catégories,
• Tags,
• Archives,
• Formulaire de recherche,
• etc.

Sans compter tous les différents « widgets » qui ajouteront du piment à votre magazine :

• Liste des derniers commentaires — Le courrier des lecteurs est une composante importante dans la vie d’une publication.
• Liste des articles les plus commentés — A ne pas confondre avec les articles les plus lus.
• Photos d’un compte Flickr ou Picasa,
• Profils des réseaux sociaux sur lesquels on est inscrit,
• etc.

Et la liste est encore longue. Tellement, qu’il est urgent de résister à la tentation de trop en faire : sobriété, efficacité devraient guider nos choix en la matière !

Comment rythmer ces contenus ?..

WordPress nous offre plusieurs manières d’afficher les contenus pour rompre la monotonie des billets affichés les uns à la suite des autres. On pourra, par exemple, afficher un éditorial en fonction de la rubrique du même nom ; un billet d’une rubrique spécifique (A l’affiche, En bref, etc.) ou en fonction d’un tag précis.

Les possibilités sont nombreuses mais des pièges se glissent souvent sous la souris quand on utilise des boucles multiples sur la même page. J’évoquerai ces points dans une autre série de billets intitulée Danse avec les Loops en hommage à Zazie

…En tenant compte des contenus, pardi !

Rappelez-vous que ce qui fait le magazine, c’est plus le fond et la logique éditoriale, que la forme. Il est important de prendre en compte la diversité des contenus qui existent ou qui existeront : on peut très bien prévoir des zones (widgétisées par exemple) qui seront utilisées plus tard.

Pour partir sur quelque chose de concret, je me suis donc demandé ce que donnerait mon blog avec un zeste de Magazine Attitude au lieu de réfléchir dans le vide sur les différentes fonctionnalités dont un utilisateur inconnu aurait besoin.

Je dispose, en effet, d’un historique de 217 articles, 3 pages, 15 brouillons, contenus dans 18 catégories et 500 tags (dixit mon tableau de bord WordPress…) pour poser quelques jalons qui me guideront dans l’élaboration de ce thème.

J’ai donc rapidement fait le tour des rubriques de ce blog et je me suis aperçu que j’avais déjà une rubrique intitulée « Blockquotes » qui accueille des billets courts, soit d’humeur, soit pour partager une actualité sans me sentir obligé de m’étendre sur le sujet (pas comme là, quoi…).

Du coup, rien que cette pauvre petite rubrique peut donner naissance à deux entités distinctes : un éditorial pour les billets d’humeur et des brèves liées à l’actualité. Pour l’instant, je n’ai pas encore écrit tous les contenus spécifiques à ces rubriques (j’ai utilisé l’existant) ni ajouté toutes les vignettes prévues par les champs personnalisés (customs fields).

Par ailleurs, il reste encore des rubriques qui n’ont pas encore pris toute leur place, car il faut produire les contenus qui rempliront la rubrique pour présenter quelques travaux graphiques, ou celle pour proposer des tutoriels sous forme de video.

Mais chaque chose en son temps car il faut que ce blog continue de vivre sa vie et que je prenne mes marques : j’ai le sentiment qu’un thème magazine, c’est moins léger à manier qu’un blog « standard ». Il faut bien choisir les sujets, et préparer les visuels pour donner un sentiment d’ensemble au lieu d’avoir une simple juxtaposition de textes sans lien les uns avec les autres (tandis que dans le blog tradi, l’ordre chronologique inverse organise en même temps qu’il justifie la place de chaque article).

Pour conclure

Une des forces du concept des thèmes magazine est donc de présenter en page d’accueil des contenus supplémentaires par rapport au blog traditionnel. Par ailleurs, certaines rubriques comme l’édito ou le fait de mettre en évidence le dernier article, et/ou ceux faisant partie d’une rubrique spécifique permet de rythmer la page d’accueil, ce qui devrait inciter le lecteur à passer plus de temps sur le blog.

Comme je l’ai évoqué plus haut , je reviendrai vers vous avec plusieurs séries de billets (car je compte bien aller jusqu’à Z comme… Zorro !) qui tiendront compte des accidents de parcours et des fausses bonnes idées ;)

Je tiens à remercier tous les blogueurs qui m’ont aidé — souvent sans le savoir — lorsqu’il me manquait le bon plugin, la bonne approche pour lancer les requêtes, etc. J’espère n’oublier personne (si c’est le cas, n’hésitez pas à vous plaindre) :

• fran6art
• webinventif
• burninHat
• papygeek
• wordpress-tuto
• wordpress-fr
• Homo Sapiens Internetus
• Exutoire
• A suivre…

Stay tuned and mind the gap!

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• Le petit journal du web — WordPress, développement web, etc.
• Quel tarif pour un thème WordPress ?
• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• Thème Magazine pour WordPress de A à Z — D comme déjà fini ?

Ceux qui surfent par l’intermédiaire de leur navigateur au lieu de leur aggrégateur l’auront déjà remarqué : le thème magazine pour WordPress est entré dans sa phase active en habillant d’ores et déjà ce blog. Quatre lettres, donc, au lieu des vingt-six prévues, car l’envie de mettre la main à la pâte a été plus forte que celle de réfléchir encore et encore au cahier des charges idéal…

J’ai préféré réfléchir dans l’action, histoire de faire avancer les choses plus rapidement, même si c’est parfois au détriment du fignolage des détails : il reste encore de la peinture par endroit. Il me reste donc vingt-deux lettres pour expliciter les choix graphiques, ergonomiques, etc. et vous dire deux mots de ce qu’il y a sous le capot en attendant que tout soit prêt pour une distribution publique ;)

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• Quelques notes sur un thème magazine de A à Z — E comme épure
• Conception d'un thème magazine de A à Z — A comme "Allons-y !"
• Le petit journal du web — WordPress, développement web, etc.
• Le Petit Journal du Web — 09/2011

Après A comme Allons-y et B comme Bêtise, Je continue à égrener l’alphabet qui me sert de fil conducteur pour la création d’un thème de type magazine, selon la formule consacrée. C comme Cahier des charges parce que si lors de la première étape, j’ai noté quelques idées pour savoir dans quelle direction aller, il est temps de fixer le cap avec la liste des fonctionnalités dont j’ai besoin. Cette phase, indispensable lorsqu’on doit développer les fonctionnalités d’un site from scratch, peut sembler un peu formelle pour un blog, où sauf exception, tout est déjà codé dans le moteur du blog ; il reste néanmoins à déterminer celles que l’on va intégrer, de quelle manière et avec quelles options.

Le cahier de charges, c’est un peu l’art des choix. Pour me guider, je me suis imposé une ligne directrice car le risque est grand de vouloir tout mettre dans un seul thème, là où des déclinaisons thématiques — voire des thèmes totalement différents — seront certainement plus judicieux ;) J’ai opté pour la simplicité, qu’il s’agisse des fonctionnalités ou du design, afin de faciliter les éventuelles adaptations selon des secteurs d’activité différents. En effet, ce qui distingue à mes yeux le thème magazine (thème journal serait peut-être plus approprié) des autres, c’est la place faite au contenu qui est souvent mis en valeur par la notion de dossier thématique.

Thème journal ou magazine ?

Un magazine est une publication régulière plus ou moins spécialisée dans laquelle un sujet précis donne matière à faire une couverture différente à chaque numéro pour déclencher l’acte de lecture d’achat.

Un journal est aussi une publication régulière plus ou moins spécialisée. Mais à la différence du magazine, la notion de dossier thématique est remplacée par la notion d’actualité qui détermine l’emplacement et la taille du sujet dans la mise en page.

La différence essentielle entre un journal et un magazine est donc temporelle. A ce titre, l’affichage traditionnel des billets dans l’ordre anté-chronologique que l’on trouve généralement sur les blogs se rapproche plus du journal que du magazine.

C’est d’ailleurs cette prime à la fraicheur du contenu qui fait toute la différence entre un site traditionnel et un blog standard. Entre les deux — et contrairement à ce que l’on peut lire parfois — la notion de thème magazine à toute sa place dans la panoplie de l’éditeur de blog qui pourra traiter d’une part le contenu dépendant de l’actualité comme sur un journal ou un blog (où un billet chasse l’autre) et d’autre part les contenus qui méritent un traitement de faveur comme dans un magazine, soit par la mise en page ou la permanence des articles en page d’accueil.

Le cahier des charges :

1. Mettre l’accent sur la notion de dossier en page d’accueil avec un billet mis en valeur par une mise en page sortant un peu de l’ordinaire du blog — Utilisation des customs fields et/ou des sélecteurs CSS avancés pour atteindre la première image ou le premier paragraphe par exemple,
2. Avoir, sous ce premier « billet », d’autres contenus en lien direct avec le dossier du numéro en cours, parmis lesquels : des brèves, des articles complémentaires, des images, des vidéos — Utilisation sélective des tags, des catégories et des requêtes personnalisées (query_posts, shortcodes ),
3. Ne pas oublier la facilité d’utilisation du thème, notamment en ce qui concerne la rédaction des billets — Eviter d’imposer un gabarit trop strict pour la rédaction des articles,
4. Mettre en place un système rappelant la notion de numéro différent à chaque parution — Utilisation sélective des tags et des catégories, ainsi que les classes générées par le thème Sandbox,
5. proposer une charte graphique facilitant la personnalisation des couleurs — Réduire l’utilisation des images et prévoir une CSS spécifique pour les couleurs,
6. Réfléchir à une taxonomie rappellant plus le monde de la presse que des blogs (ex. : courrier des lecteurs vs commentaires, etc.)
7. etc.

Je m’arrête là sachant que ces 7 éléments sont déjà bien suffisant pour remplir ma petite tête pour le moment ;) La prochaine fois, je pense revenir vers vous avec une première maquette de zoning et quelques idées plus précises sur les fonctions que j’utiliserais pour parvenir à mes fins.

Stay tuned and mind the gap!

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• Nouveau design en place : plus bleu, plus carré, plus centré
• Mise en place d'un nouveau design : perburbation en vue ;)
• Quelques notes sur un thème magazine de A à Z — E comme épure
• Thème Magazine pour WordPress de A à Z — D comme déjà fini ?

Le thème magazine se porte bien cette année et la tendance est à la hausse. Dans cette catégorie, quelques thèmes sont sortis du lot : Mimbo, traduit en français et modifié par niss et décrit par fran6. (Mimbo Pro est disponible à partir de 90$ — captures d’écran disponibles chez stagueve) et Révolution (à partir de 79$) qui a ouvert la voie aux thèmes magazine payants. Après eux, une foultitude de thèmes du même genre ont vu le jour. Les raisons du succès de ces habillages graphiques pour les blogs sont multiples :

• Les thèmes magazines donnent un look plus professionnel pour des blogs qui prennent leurs distances avec le « journal intime » ou le « carnet de bord » ;
• ils permettent une lecture qui s’affranchit du traditionnel ordre anté-chronologique en affichant généralement en première page, la liste des derniers billets par catégorie sous le « billet » du jour mis en avant par un traitement graphique spécifique ;
• Ils font un usage intensif des images qui prennent souvent la place des titres pour attirer l’oeil et guider le lecteur à travers la page, véritable vitrine du contenu ;
• pour finir, le look magazine se prête parfaitement à la mise en place de partenariats commerciaux, et nombreux sont les thèmes conçus en fonction des formats publicitaires les plus courants.

Je le veux mon thème magazine !

Tout celà, rend les thèmes magazines très attrayants. Mais tous les blogs ne gagneront pas à les utiliser : dans certains cas, l’utilisation d’un thème magazine pourra sembler disproportionné si les billets ne deviennent pas des articles : de nombreux thèmes n’ont de « magazine » que la première page, les autres ressemblant souvent aux blogs traditionnels, et le pauvre billet de 10 lignes semblera comme posé là comme un cheveu sur la soupe…

ll faut dire qu’un thème public a pour vocation d’être utilisé par le plus grand nombre, quelque soit le sujet, le nombre de rubriques, etc. de sorte, qu’à mon avis, on perd ce qui fait tout le charme des magazines que l’on trouvent chez le libraire : l’adéquation entre le fond et la forme. Rien que ça.

Après avoir réfléchis à cette question épineuse (comment proposer un thème générique adapté au contenu de chacun), j’ai compris que je ne trouverais pas la solution en me grattant la tête, alors j ‘ai pris un crayon et du papier pour poser quelques idées.

Un style magazine, mais lequel…

La première chose que je me suis demandé c’est : un style magazine, oui, mais quel style de magazine… En effet, selon que l’on ouvre GQ, SVM, ELLE ou Entrevue, on s’aperçoit vite que chaque habillage graphique épouse le contenu en fonction des habitudes des lecteurs et de leurs attentes.

J’allais abandonner l’idée quand je me suis dit que le style « journal » pouvait ouvrir des perspectives plus intéressantes encore pour structurer les divers contenus produits par un CMS comme WordPress ou Dotclear.

Finalement, en matière de balisage HTML comme en mise en page, il faut toujours partir du contenu et déterminer ensuite quel sens on lui donne, ce qui déterminera son importance et son emplacement dans la maquette.

P.S. : Ce billet est le premier d’une série dont le dernier sera la présentation d’un nouveau thème destiné à être être distribué.

Stay tuned!

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• Quelques notes sur un thème magazine de A à Z — E comme épure
• Thème Magazine pour WordPress de A à Z — D comme déjà fini ?
• Le petit journal du web — WordPress, développement web, etc.
• Le Petit Journal du Web — 09/2011