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; ?>

L’éditorial regroupe tous les billets appartenant à la catégorie… “editorial” La boucle WordPress utilisée est la suivante (plus d’informations sur les boucles) :

<?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; ?>

Note : le fait d’utiliser le nom de la catégorie à la place de son id, permettra de faciliter la mise en place du thème : il suffira de créer la catégorie Editorial au lieu de chercher le numéro identifiant et de mettre les mains dans le code.

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 -->

Notez la variable $do_not_duplicate initialisée avec la valeur de l’identifiant du billet : comme les anciens articles de cette catégorie se retrouvent plus bas dans la première barre latérale, il sera important de l’exclure de la prochaine boucle.

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; ?>

Grâce au mot-clé PHP continue, on saute le billet repéré plus haut en passant directement au suivant. Et hop ! Ce billet est censé s’afficher sur la Home uniquement et la condition !is_paged() permet de s’assurer que l’utilisateur n’a pas cliqué sur les billets plus anciens, auquel cas ce billet “En bref” ne s’affiche pas. Je pense que l’on pourrait utiliser la nouvelle condition is_front_page() apparue avec WordPress 2.5 pour obtenir le même résultat.

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; ?>

Comme vous pouvez le constater, j’en ai profité pour afficher un nombre plus important de billets sur les “pages suivantes” grâce au paramètre showposts=15 histoire de donner à voir plus d’articles à chaque fois. Celà n’est pas indispensable ici, mais si vous envisagez de n’afficher qu’un seul article complet sur la Home, ça peut-être très utile.

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; ?>

Le nerf de la guerre étant ici, les paramètres tag et orderby. Notez que si l’on voulait obtenir les billets contenant plusieurs tags il suffirait de préciser : tag=tutoriel+wordpress.

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

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 ), 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!

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

Articles relatifs

• Les widgets dans WordPress 2.5 avec widgétisator ;) (7)
• WordPress : astuces pour afficher une page "autonome" avec wp_list_pages() (9)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org (8)
• Tutoriel WordPress 2.2 : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" (32)
• Thème Magazine pour WordPress de A à Z — D comme déjà fini ? (12)

Vous saurez ensuite combien de pixels vous manquent (ou de combien vous dépassez) pour arriver à la bonne largeur. Reste à jouer sur les différentes valeurs pour générer le code CSS qui remplacera les valeurs de grid.css inclus à l’origine dans Blueprint.

Cerise sur le gâteau, une version compressée est proposée, ainsi que l’image grid.png qui sert à afficher la grille de base pour le placement des colonnes lors de la phase de conception.

Articles relatifs

• Frameworks CSS + Reset CSS : design from scratch (15)
• [résolu] Les folles journées de l’intégrateur HTML et ses petits tracas… (14)
• Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ? (24)
• WordPress 2.5 en Release Candidate 1 (1)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org (8)

Il s’agit d’une protection basique pour éviter que Pierre, Paul ou Jacques utilise votre flux. Avec cette option, vous protégez votre flux en utilisant une authentification HTTP. Les requêtes sur vos flux hébergés chez FeedBurner demanderont aux lecteurs une combinaison identfiant / mot de passe pour y accéder à condition que leur aggrégateur de flux support le protocole d’authentification pour visualiser votre flux RSS.

Il vous suffira donc de spécifier un identifiant/mot de passe et d’activer (Activate) le service. Notez que cette protection peut entrer en conflit avec la livraison des flux par mail ou avec l’utilisation de la fonction Headline Animator.

Ce système semble intéressant car il nécessite un minimum d’action de la part de l’éditeur : choisir un identifiant et un mot de passe. Toutefois, il faudra bien communiquer cette combinaison à chacun de vos abonnés dans un dernier billet non protégé. Il faudra ensuite que vos lecteurs aient noté cette combinaison auparavant pour pouvoir lire le flux à nouveau une fois la protection mise en place… sans compter que l’aggrégateur de l’utilisateur doit être Authentification HTTP friendly ^^

Cette solution est séduisante, mais je ne pense pas la mettre en place ici car je recherche plutôt un système permettant aux abonnés de lire un flux tronqué dans un premier temps et d’avoir accès au flux complet avec une authentification s’ils le désirent. Ceci dit, il peut s’agir d’une solution efficace lorsqu’on lance un nouveau blog : pas d’historique à gérer !

Je cherche encore

Articles relatifs

• Une blogroll 2.0 avec la liste de partage des flux RSS de Google Reader (5)
• Oh, Il a bon dos le Web 2.0 ! (49)
• Intéressés par la monétisation de votre contenu ? Jettez un oeil sur Google AdSense (3)

Que les lecteurs de Notorious Blog se rassurent, ce n’est pas le signe de l’arrêt du blog, mais comme d’autres, j’ai des nouveaux projets qui m’attendent à la rentrée et je ne pourrai pas continuer à alimenter Notorious comme je l’ai fait jusqu’à présent, même si le rythme n’était pas endiablé

Alors, comme j’ai déjà fait l’expérience du coblogging avec Clément Delmas, j’ai pensé proposer à ceux d’entre vous qui seraient intéressés, de devenir Notorious Redactor ! Clément pourra vous confirmer que je ne suis pas un rédac’ chef trop pénible, même s’il m’arrive de proposer des corrections sur la forme, histoire de conserver une tonalité rédactionnelle plus ou moins uniforme.

Pour ceux qui aurait remarqué le paradoxe apparent qui consiste à publier certains billets sur css4design tout en continuant sur Notorious Blog, je précise que la “migration” des billets ne concerne que ceux en lien avec les thèmes abordés ici, comme le référencement, les noms de domaines, et quelques billets de la rubrique web 2.0 et blog d’entreprise. Par ailleurs, les billets seront toujours disponibles sur Notorious Blog avec la mention du lien d’origine pour éviter les confusions hypertextuelles.

En effet, si l’audience en terme de visites n’est pas satisfaisante, Notorious Blog a toutefois acquis une certaine notoriété en figurant, par exemple, à la 180ème place dans la catégorie High Tech du classement des blogs de Wikio et à la 629ème place toutes catégories confondues et le compteur feedburner tourne autour d’une centaine d’abonnés.

Si l’aventure vous intéresse, vous pouvez prendre contact de la manière qui vous convient le mieux : commentaires, page contact ou même Twitter vu que c’est comme ça que j’avais fais la connaissance de Clément au départ

Stand up!

Articles relatifs

• WordPress vs Dotclear : Migration d’automne (dernier round) (21)
• WordPress : astuces pour afficher une page "autonome" avec wp_list_pages() (9)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org (8)
• Votre blog sur un téléphone portable, really ready ? (9)
• Vis ma vie d’intégrateur HTML (2)

Articles relatifs

• Mise en place d’un nouveau design : perburbation en vue ;) (2)
• Devenez Alpha testeurs pour Vanilla : un thème WordPress basé sur SandBox et Yahoo! User Interface CSS (0)
• Thème Magazine pour WordPress de A à Z — D comme déjà fini ? (12)
• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…) (7)
• Quelques notes sur un thème magazine de A à Z — E comme épure (38)

Articles relatifs

• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…) (7)
• Nouveau design en place : plus bleu, plus carré, plus centré (29)
• Devenez Alpha testeurs pour Vanilla : un thème WordPress basé sur SandBox et Yahoo! User Interface CSS (0)
• Thème Magazine pour WordPress de A à Z — D comme déjà fini ? (12)
• Quelques notes sur un thème magazine de A à Z — E comme épure (38)

Ca va sans dire mais mieux en le disant : sauf indication contraire, le contenu de ce blog (le fond et la forme) est protégé par le droit d’auteur.

Mes articles ne sont donc pas sous une licence Creative Commons ou autre, mais sous le régime du droit d’auteur (ouais, comment je me la pète grâve ^_^v ).

Jusqu’à présent, le procédé ne me gênait pas plus que ça, car je fais un usage régulier de liens internes dans mes billets, de sorte que je pensais que la reprise de mon flux pouvait au moins m’apporter quelques backlinks à défaut de royalties

Grossière erreur. Depuis que je suis (verbe suivre) la croisade d’Aymeric contre les pilleurs de contenus, je suis un peu plus vigilant et je viens de m’apercevoir que les liens internes contenus dans mes billets passent de la forme monblog/titredubillet à aspirateur/titredubillet sur xoofoo, mais aussi sur feedshow, par exemple, lorsqu’on utilise des liens relatifs sur son propre blog !

Quelques pistes pour que ça change

Chercher les coordonnées des contrefacteurs et de les prévenir une première fois gentiment de me reverser une parties des sommes gagnés grâce à mes articles ou de supprimer mon flux de leur Planet.

Adresser systématiquement une facture au responsable du site aspirateur avec le rappel du fonctionnement du droit d’auteur. Vu le temps que je passe sur certains articles, la note peut grimper très vite. Pour ceux qui seraient intéressés par cette approche, voici une estimation des tarifs :

• 150€ pour chaque article tagué “tutoriel” ou classé dans Articles traduits,
• 75€ pour chaque billet présents dans les catégories Conception web ou Intégration web,
• 25€ pour les autres.

Revenir aux flux tronqués. Sachant que le service rendu aux lecteurs change de nature : au lieu d’apporter au visiteur le contenu sur un plateau, on le prévient juste qu’un billet a paru. Un pis-aller à mon humble avis.

Supprimer totalement les flux RSS, ce qui aurait pour avantage inconvénient de faire venir les visiteurs sur le blog au lieu de lire le billet confortablement installé dans leur aggrégateur

Je dois avouer que cette dernière solution me tente bien. A la limite, pour ne pas pénaliser les lecteurs réguliers en les obligeant à venir sur le blog pour rien, je regarderai s’il est possible de mettre en place un système pour permettre la réception des billets par e-mail sans avoir de flux RSS actif. (Si quelqu’un a une idée).

Sachant que les visiteurs les plus actifs viennent généralement sur le blog pour lire et/ou laisser un commentaire, la suppression des flux RSS couplé avec la réception des articles par e-mail n’est finalement pas si pénalisante que ça.

Ma question est donc la suivante : préféreriez-vous recevoir un flux tronqué et venir sur le blog si le texte visible vous intéresse, ou la suppression pure et simple et recevoir les billets par email ?

PS : si d’autres solutions vous viennent à l’esprit, n’hésitez pas à m’en faire part

Articles relatifs

• Une blogroll 2.0 avec la liste de partage des flux RSS de Google Reader (5)
• Web beuh zéro : au secours, ils ont fumé la moquette ! (2)
• Walk like an ajaxian (6)
• Twitter : Signal social, microblogging et moblogging (12)
• SCRIPTS (0)

Et puis, en lançant mon aggrégateur, je suis tombé sur ce billet de Gou où il est question d’un article de 37 signals qui envisage de se passer de la traditionnelle maquette sous Photoshop pour se coltiner directement avec le code. Si Gou n’est pas vraiment convaincu par cette approche, je suis pour ma part rassuré sur ma façon de voir les choses

En effet, si la maquette Photoshop (ou Illustrator) rassure le client sur vos compétence en graphisme, elle ne dit rien sur votre talent de webdesigner, c’est-à-dire d’organisateur d’espace sur le web en vue de favoriser le clic et la navigation !

Pour vous faire une opinion sur cette question, voici une “craduction” rapide des arguments avancés par 37 signals :

Pourquoi nous zappons Photoshop

Voici quelques raisons qui expliquent pourquoi nous devrions nous passer de Photoshop :

1. On ne peut pas cliquer sur une maquette. C’est probablement la première raison qui fait que nous avons abandonné les maquettes statiques. Elles ne sont pas réelles. Le papier ne l’est pas plus, mais il ne provoque pas les mêmes attentes. La présentation à l’écran d’une maquette réalisée sous Photoshop devrait fonctionner. Mais vous ne pouvez pas faire défiler les menus déroulants, ni saisir du texte dans un champs dessiné. Vous ne pouvez pas non plus cliquer sur un lien. A l’inverse, un prototype HTML/CSS est une vraie expérience.
2. Photoshop fournit trop d’outils qui nous scotchent sur les détails. Lorsqu’on utilise Photoshop, on ne peut pas s’empêcher d’accorder de l’attention aux alignements, aux couleurs, aux formes, etc. Tout ces petits détails qui auront certainement leur importance… mais plus tard. L’essentiel est invisible pour Photoshop !
3. Dans Photoshop, le texte n’est pas le même que sur le web. Quand on regarde une maquette réalisée sous Photoshop, on ne peut pas modifier le texte sans retourner dans le logiciel pour changer le texte, enregistrer le fichier, l’exporter au format gif/png/jpg, etc. On ne peut pas le mettre en ligne et demander à quelqu’un de recharger la page dans cinq secondes comme il est possible de le faire en éditant rapidement un fichier HTML. On doit dire : Donnez-moi quelques minutes… Par ailleurs, les polices de caractères n’ont jamais le même aspect ni la même taille qu’en HTML. Ce n’est pas la même expérience.
4. Photoshop met l’accent sur la production, pas sur la productivité. Photoshop sert à construire quelque chose qui doit “paraitre”, pas quelque chose qu’on peut utiliser. Lorsqu’on s’inquiète seulement de l’apparence des choses, on passe trop de temps en “fignolage”. HTML/CSS permet d’être productif en permettant d’aller de l’avant après chaque modification.
5. On refait souvent les mêmes choses dans Photoshop. D’accord, vous avez passé trois jours sur une maquette. Et après ? Maintenant, il faut tout transformer en HTML/CSS. C’est du temps perdu. On peut prendre ce temps pour faire l’intégration HTML/CSS et passer plutôt du temps à l’améliorer, au lieu de tout construire/déconstruire. Si l’on est pas assez rapide en HTML/CSS, on peut passer plus de temps à apprendre à travailler plus vite.
6. Photoshop n’est pas un logiciel très collaboratif. J’ai déjà touché du doigt cet aspect plus haut, mais laissez-moi enfoncer le clou : HTML/CSS vous permet de faire des changements, d’enregistrer et de voir le résultat. C’est le flux de collaboration que nous avons mis en place : laissez-moi changer ça, ça y est, faites F5 ! Ces changements prennent quelques secondes. Attendez, je vais placer cet élément à gauche plutôt qu’à droite. F5 ! Toujours quelques secondes. Pas besoin de sélectionner un outils, de modifier quelques éléments manuellement, d’enregistrer, d’exporter, de télécharger, de donner au client le nouveau nom de fichier, etc. HTML/CSS est idéal pour faire des prototypes itératifs ; ce n’est pas le cas de Photoshop…
7. Phostoshop est lourdingue. Même après 10 ans de pratique intensive de ce logiciel je trouve toujours que l’utilisation d’un crayon et du papier est plus naturelle que de faire des aller-retours dans la barre d’outils. Un crayon peut dessiner n’importe quoi, tandis que dans Photoshop, vous devez utiliser l’outil texte pour saisir du texte, l’outil forme pour dessiner une forme, la barre d’option pour ajuster tout ça, etc.

Rien de tout ce qui précède n’est là pour dénigrer Photoshop, mais nous avons trouvé que plonger les mains dans le code HTML et CSS apporte une meilleure expérience créative. La voie du code est vraie comme Photoshop ne le sera jamais.

Quelques mots pour finir

Bon, j’espère que cette “craduction” ne comporte pas trop d’erreurs d’interprétation… J’imagine que beaucoup trouveront cette prise de position un peu extrême et se demanderont ce que l’on peut bien intégrer en HTML/CSS si on a pas fait de maquette avant…

En gros, on peut très bien dessiner une maquette sur le papier en commençant par le zoning global et en donnant des indications graphiques plus ou moins précises en fonction de la nature de la commande. Par exemple, dans la plupart des cas, il n’est pas nécessaire que la maquette soit exacte au pixel près, tant que le résultat final tient compte des détails.

L’avantage ? Selon, les méthodes de travail il sera ainsi possible de lancer Illustrator (ou de prendre son crayon) pour “dessiner” quelque chose sans se préoccuper de la largeur de la page ou de l’espace entre les colonnes. Ces éléments pourront trouver une réponse plus tard.

Je suis convaincu que même pour pour des projets ayant une charge graphique forte, il est possible de proposer l’univers graphique d’un côté pour s’assurer que la cible est prise en compte, et le prototype fonctionnel de l’autre pour valider les grands principes ergonomique et navigationnels. Sachant que le premier influe sur le second et vice-versa ! Tiens, j’ai bien envie de relire Transcender CSS sous cet angle

PS : cet article étant programmé depuis une semaine, il se peut qu’en mon absence du web, certains commentaires passent à la trappe à cause d’un Akismet trop sensible : depuis mon changement de design, j’ai réinstallé totalement la base de donnée, ce qui fait que l’anti-spam semble devoir tout réapprendre…

Que celà ne vous empêche pas de laisser vos impressions et d’excuser mon absence de la zone des commentaires, mais que voulez-vous, avec 40° à l’ombre…

A bientôt !

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

Articles relatifs

• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations (6)
• [résolu] Les folles journées de l’intégrateur HTML et ses petits tracas… (14)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org (8)
• Trucs et astuces CSS (5)
• Smashing Magazine : des CSS plein les yeux (13)

Quelques chiffres en provenance de Google Analytics

Depuis le 26 juillet 2006, date d’installation du script Google Analytics, ce blog a trouvé sa vitesse de croisière par petits bonds successifs pour cumuler un total de :

• 226 328 visites,
• 168 243 Visiteurs uniques absolus,
• 443 950 pages vues.

Aujourd’hui, la moyenne mensuelle s’établit vers :

• 18 000 visites,
• 15 000 Visiteurs uniques absolus,
• 35 000 pages vues.

Les sources de trafic sont relativement stables depuis le début avec en moyenne :

• 13% accès direct,
• 28% sites référents,
• 59% moteurs de recherche.

Le flux RSS de css4design confié au bons soins de Feedburner oscille quant à lui entre 1200 et 1400 abonnés, pour un nombre de reach quotidien d’environ 20%. A noter que la promotion de ce flux a été très sporadique et relativement discrète pour les non initiés.

Pour finir avec les chiffres bruts, ce blog totalise plus de 2 000 commentaires, ce qui fait une dizaine de commentaires par article en moyenne.

Quelques liens

Les 6 billets les plus lus sont :

1. 1000 ressources pour WordPress et le développement web,
2. Détourer les cheveux avec photoshop,
3. Exercice de style CSS et HTML table vs div,
4. Menu à onglet avec Javascript et CSS,
5. Design de formulaire HTML avec CSS,
6. Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

Parmi les sites référents, voici les principaux apporteurs de trafic (hors blogs) :

1. tutmarks.com
2. netvibes.com
3. scoopeo.com
4. blogmarks.net
5. wikio.fr
6. blogasty.com
7. css.developpez.com
8. mybloglog.com
9. twitter.com
10. del.icio.us
11. bloglines.com
12. forum.alsacreations.com
13. dmoz.org
14. technorati.com
15. fr.wikipedia.org

Place aux blogs :

1. peutetreunereponse.net
2. excargot.net
3. pnxdesign.com
4. ajblog.fr
5. fran6art.com
6. bvwg.actulab.net
7. jeuxdemaux.com
8. sutekidane.net
9. ologram.be
10. webdesign.2803.com
11. blog.accessoweb.info
12. smashingcoding.com
13. jarodxxx.com
14. blog.barbayellow.com
15. blomig.com

Conclusion

Déjà deux ans et j’ai l’impression d’avoir commencé mon premier billet la veille ! Bref, je pars quelques jours pour fêter ça en famille et je reviens en pleine forme avec une série d’articles intitulée Danse avec les loops (sur les boucles WordPress) et une autre avec des morceaux d’exemples d’intégration HTML et CSS.

Stay tuned and mind the gap!

Articles relatifs

• WordPress vs Dotclear : Migration d’automne (dernier round) (21)
• WordPress : astuces pour afficher une page "autonome" avec wp_list_pages() (9)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org (8)
• Votre blog sur un téléphone portable, really ready ? (9)
• Vis ma vie d’intégrateur HTML (2)

Articles relatifs

• Pas d'article en relation