Google API webfont : enfin !

Media_httpwwwblomigco_bamec

Si vous lisez ce blog, vous savez que j’ai toujours aimé les polices de caractères.

Je viens de découvrir, via Embruns, que Google venait de rendre utilisable par le biais d’une API un certain nombre de polices.

Du coup, les polices mises à dispo par Google sont appelables dans les feuilles CSS ! Génial. Il faut donc faire deux choses.

1. Ajouter un lien de type « stylesheet » vers la police souhaitée :

 

2. Mettre en forme une classe CSS avec la police en question :

CSS selector {
  font-family: 'Font Name', serif;
}

Je sens que je vais bien m’amuser, moi, avec ça. J’espère que le choix de police va s’étoffer rapidement. En fait, je ne vois pas pourquoi il en serait autrement. Vive Google !

Lorem Ipsum

Ce billet me servira pour tester le nouveau design, et les classes CSS mises en place. Il n’est donc pas très utile pour les lecteurs, sauf ceux qui s’intéressent à la mise en forme des billets. Je vais tout de même y insérer des éléments de code pour que les débutants puissent s’en inspirer…

Poursuivre la lecture

Le nuage de tags qui déchire tout !

Je ne pouvais pas attendre pour partager avec vous ce super plugin pour WordPress : WP-Cumulus.
Ce plugin génère un nuage de tags en 3D, sous forme d’une sphère composée de vos tags qui tournent (et qui restent cliquables!). C’est magnifique…!

Pour le voir en fonctionnement, vous pouvez aller dans la barre de menu de ce blog, cliquez sur Sphère !strong>

Je l’ai découvert chez In Mulot Veritas, qui a gentiment répondu à mes questions, et m’a surtout donné l’adresse de la discussion du forum FR WordPress où je pouvais trouver l’info qui me manquait. L’info qui me manquait, c’était l’endroit où il fallait aller pour changer le nombre de tags utilisés par défaut. C’est Dric qui donne l’info :

Il faut éditer wp-cumulus.php, ligne 56, et remplacer

wp_tag_cloud('');

Par :

wp_tag_cloud('number=100');

Pour afficher les 100 premiers tags.

Excellent ! Je vous laisse l’essayer, moi je cours m’amuser avec les paramétrages !

Media_httpimagesblomi_cacjj

3 invitations pour Aviary !

Media_httpwwwimagesbl_uljfs

Découvert par le biais d’une « bulle de découverte » d’Aysoon (qui faisait suivre une info glanée sur TechCrunch), Aviary est :

un écosystème de créativité en ligne avec une série d’outils graphiques en Flash ; le tout associé à une place de marché ou les artistes peuvent vendre leurs créations.
L’équipe de 12 personnes située a New-York a développé une serie de 14 outils allant d’éditeurs graphiques à des générateurs de motifs. Ils apportent actuellement les dernières retouches aux programmes principaux (éditeur d’images et le générateur de motifs).

Vous pouvez voir des exemples de créations ici. Votre serviteur, amateur de dessin, s’est inscrit. Et dispose du coup de 3 invitations : les premiers à le demander en commentaire les auront ! A vos claviers !

Deux mines d’or sur les blogs !

Je fais un petit billet pour vous signaler deux articles très intéressants que j’ai lu récemment, et qui sont deux mines d’or pour tous ceux qui tiennent un blog, et que les outils de design, les plugins, les trucs pour WordPress, etc. intéressent !

Bonne lecture, et merci à leurs auteurs pour ce gros boulot de synthèse !

Le lecteur est roi ! (1/4 : le design)

Media_httpwwwimagesbl_haaau

On résume généralement l’esprit du service par ces mots : « le client est roi ! ». Satisfaire le client doit être la priorité numéro un. Ou alors, ce n’est pas la peine d’aller à sa rencontre. Sur un blog, le client c’est le lecteur. Comment le placer au centre de votre blog ? Comment satisfaire vos lecteurs ? Quatre aspects principaux peuvent être analysés : le design du blog, la structuration des articles, l’écoute accordée aux lecteurs et enfin la fidélisation des lecteurs. Chacun de ces aspects sera traité dans un article, pour éviter un trop long article. Voici donc le premier de la série, traitant du décor dans lequel vous présentez vos articles à vos lecteurs : le design. 3 moyens de penser au visiteur/lecteur sont décrits : personnalisation du thème, utiliser un thème lisible, et prévenir des changements de décor. Cela pose la question cruciale de la mise en forme du flux RSS. Le client est roi ! C’est de cette manière que l’on traduit généralement l’esprit du service : tout, dans un commerce quel qu’il soit, doit tendre vers la satisfaction du client. Un client satisfait est un client qui revient, et qui fait de la publicité. Sur un blog, c’est le lecteur qui est roi. On n’écrit pas pour soi, mais pour les lecteurs. Fort de cette idée, on peut lister tout ce qu’il faut faire pour garder, à tous les niveaux, le lecteur au centre de nos préoccupations. Sur un blog, c’est le lecteur qui est roi. Cela signifie souvent laisser de côtés nos propres désirs, et écouter plus ceux de nos lecteurs. J’avais déjà publié une liste de 9+2 conseils pour faire un bon blog. Voilà une liste – complémentaire – de choses qui, selon moi, permettent de montrer au lecteur qu’on le respecte et qu’on veut le satisfaire. Ce qui n’a rien d’honteux, au contraire ; que serait un blogueur qui s’en foutrait de ses lecteurs ? Pour chacun des points, il importe de s’interroger sur la manière de le mettre en œuvre, et sur ce qui empêche de le faire. Commençons par la première chose que le lecteur trouve en arrivant sur votre blog, ce qui crée la première impression : le design.

3 moyens de soigner le décor

La mise en page et la lisibilité des articles sont primordiales. Le visiteur qui passe sur votre blog doit se retrouver dans un cadre à la fois agréable, et original.

  • Evitez de conserver un thème standard : personnalisez-le un minimum (dessinez un logo, par exemple, et changez les couleurs dans la feuille de style CSS).
  • Choisissez (ou modifiez, ou construisez) un thème lisible et pas trop surchargé comme base pour votre design. L’information doit se trouver facilement.
  • N’oubliez pas que le décor est rarement vu par les lecteurs habituels, qui lisent souvent vos articles dans un aggrégateur : faites de brefs articles pour prévenir lorsqu’un changement de décor a lieu. Vos lecteurs fidèles seront contents de revenir faire un tour sur votre blog, et d’en évaluer les changements.

Pour personnaliser votre blog, apprendre des bases de CSS et bien plus encore, je vous conseille d’aller lire (et mettre en œuvre) l’excellente série d’articles de Fran6 : Créez votre thème WordPress de A à Z.

Personnaliser son flux RSS ?

Un problème avec ce perfectionnement de l’apparence du blog est qu’il ne sert finalement qu’au nouveau visiteur, mais pas trop au vieux client régulier (qui lit le plus souvent les articles dans un aggrégateur). Sauf à construire soi-même son flux RSS en adéquation avec le design du blog…Quelqu’un parmi vous sait-il faire cela ? Je crois que je vais devoir me pencher sérieusement là-dessus ; si quelqu’un a des liens intéressants pour comprendre comment construire son propre flux RSS sous WordPress, et/ou modifier celui envoyé par FeedBurner, je suis preneur ! En attendant vos conseils, je vais aller fouiner dans la liste assez complète de plugins pour le flux RSS fournie par Mashable… Edit du 25/07/2008 : FeedStyler est un plugin qui permet de faire cela…il n’y a donc plus à hésiter…!

Donnez à vos billets une mise en page « pro » !

Des techniques existent pour prendre en compte le peu de temps dont dispose le lecteur. Elle consiste à présenter les conclusions d’abord – dans le « chapeau » -. Et à parsemer le corps du texte d’éléments plus visibles (« sous-titres » et « exergues »), qui soulignent les grandes lignes, ou les points forts, du contenu. De cette manière, plusieurs niveaux de lectures sont possibles, et le lecteur est plus facilement attiré vers votre contenu. Vous trouverez ici la description de ces différents éléments, et la manière de les coder en CSS.

Poursuivre la lecture

Améliorer la lisibilité de votre blog : utilisez des résumés !

Cet article est le premier à être affiché en mode « résumé » sur BLOmiG. Ce billet décrit les arguments qui militent pour l’affichage sur la « home » des billets résumés (rythme graphique, et analyse des stats facilitée), et la manière de mettre en oeuvre tout cela (utilisation du « more » dans les billets, utilisation d’une classe spéciale dans style.css pour personnaliser le résumé, et installation du plugin Full Text Feed pour conserver un flux RSS complet). Simple à mettre en oeuvre, et efficace pour améliorer la lisibilité de votre blog !

Poursuivre la lecture

Accrochez vos lecteurs de passage !

Comment accrocher les lecteurs de passages sur un blog ?
Un article lu sur le très bon 16 secrets m’a fait rebondir, parce qu’il rejoignait mes réflexions du moment pour accroitre l’intérêt de BLOmiG. Thierry Belanger Clermont explique pourquoi il ne pense pas qu’il soit une bonne chose de ne publier que des extraits d’articles sur la home page.
Si je suis d’accord avec lui sur le confort de lecture (flux complets dans les lecteurs RSS et les newsletter, bien sûr, restent de mise), je pense qu’il est bon de ne publier que des extraits d’articles en home. Pourquoi ? parce que la plupart du traffic (c’est le cas ici, en tout cas) concerne des visiteurs ayant les caractéristiques suivantes :

  • arrivés depuis un moteur de recherche
  • première visite

Je me dis donc en ce moment que le meilleur moyen de transformer ces visiteurs de passage en abonnés est de leur permettre – en quelques tours de roulettes – d’avoir une bonne vue d’ensemble de plusieurs posts. Tous, en effet, ne vont pas rester pour naviguer dans les catégories ou le calendrier…
Je pense donc changer la manière de publier les articles. Qu’en pensez-vous ? Vous pouvez vous exprimer dans le sondage ci-dessous :

Edit (28/06/2007) : d’autres arguments se trouvent sur un nouveau billet de Thierry Bélanger Clermont. Ils ont achevé de me convaincre, avec les discussions que nous avons eues en commentaire ici et avec le sondage auquel vous avez répondu, de continuer à afficher mes billets entiers sur la home page.

Kawa Yaka

Projet design / blog

Kawa Yaka, c’est une chaîne lancée par css4design, et à laquelle Fran6 m’a gentiment invité. Je suis gêné : il s’agit de livrer en avant-première des petits morceaux des projets sur lesquels on travaille, sachant qu’il doit s’agir de projets graphiques / design. Et je n’ai en ce moment que deux projets « blogs » :

  • un blog familial que j’ai installé chez mon hébergeur :

    • accès privé réservé aux membres de la famille et aux amis
    • chaque personne possède des droits d’auteurs pour poster des billets
    • c’est beaucoup de travail, parce qu’on découvre que les opérations que l’on fait quotidiennement sur notre blog ne sont pas évidentes pour les néophytes : il faut mettre en place des outils, et il va falloir en expliquer le fonctionnement
    • le jeu en vaut la chandelle : ça sera un super lieu d’échange et de discussion dans un cercle retreint – familial
  • les finitions de mon nouveau design : je vais parler brièvement de ça, même si ce n’est pas vraiment une avant-première, vu que c’est déjà en ligne…

Design BLOmiG

Je n’ai pas vraiment fait un travail de mise en place d’un thème, puisque j’ai travaillé à partir d’un thème dont la structure me convenait et que je trouvais programmé proprement (il s’agit de l’excellent thème wordpress de N.design Glossy Blue). Tout ce que j’ai fait a été fait (à peu de choses près) sur la feuille de style en CSS. Ma réflexion initiale est partie sur la volonté d’alléger au maximum le design pour faire ressortir les articles, et faciliter la lecture. Le blanc s’imposait donc comme couleur dominante. Comme je souhaitais conserver une sidebar, pour pouvoir afficher – entre autres – des citations de la base de données que je construit dimanche après dimanche, et les noms des meilleurs commentateurs, j’ai choisi de laisser la sidebar, en l’affichant en gris. Choix délicat, qui visiblement ne fut pas forcément bon, puisque beaucoup de lecteurs m’ont fait part de la lisibilité difficile de la sidebar. J’ai foncé un peu le gris, mais ce n’est toujours pas ça…
Pour le reste, voilà la liste de ce que j’ai changé dans le thème initial pour améliorer la navigation et la lisibilité des articles (tous les retours sont les bienvenus!) :

  • Image de fond pour la date : couleur brune claire
  • Police de caractère : famille « Bitstream vera sans », couleur gris foncé
  • Modification de toutes les polices et couleurs des différentes balises h1, h2, h3, a, etc…
  • Ajout d’une classe Lettrine pour avoir des beaux débuts de paragraphes :
    .lettrine {
    float: left; /* positionnement de la lettrine dans le conteneur*/
    font-size: 4em; /* 3 hauteurs de lignes pour la lettrine*/
    font-weight: bold;
    font-family: "Bitstream Vera Sans", Lucida grande, Verdana, Arial, sans-serif;
    color: #007399;
    border: none;/* définition d'une bordure autour de la lettrine*/
    background-color: #FFFFFF;
    margin: 1px;
    padding: 1px;
    line-height: 1em;
    }
  • Ajout d’une classe Chapeau pour pouvoir résumer les articles longs au début
  • Ajout d’une classe rss-feed pour afficher en bas des articles un bandeau d’abonnement au blog par RSS ou mail
  • Modification de la largeur des billets dans le thème (plus large que dans le thème initial
  • ajout d’un image à côté de tous les liens externes pour signifier explicitement au lecteur quand je vais ouvrir une nouvelle fenêtre (pour rendre l’utilisation des target= »_blank » acceptable…)
  • liste d’articles en relations après chaque bandeau de fin d’article
  • plugins Threaded Comments et MBLA (ajout d’une image à côté du nom des commentateurs) pour améliorer l’allure des commentaires

Voilà, ce sont les grandes lignes des modifications que j’ai effectuées sur la feuille de style de Glossy Blue ! N’hésitez pas à me faire des remarques là-dessus, je suis preneur. Ce qui me reste à faire est d’améliorer modifier le logo qui manque de caractère : qu’en pensez-vous ?

Pour finir, je vais inviter Frenchmat (je sais qu’il triture aussi Glossy Blue en ce moment), Matthieu M. (de CeciDit) (parce que son design est bien léché et qu’il doit donc avoir des trucs à raconter) et Thomas (de Toile Filante) (pour les mêmes raisons et parce que son design change par petites touches régulièrement) à poursuivre (s’ils le souhaitent) la chaine Kawa Yaka !