Cette page résume les étapes de refonte de cet espace personnel qui constitue mon identité numérique et mon historique d’expression sur le Web. Il y aura une étape par jour d’ici le 24 décembre 2012 pour me motiver à avancer tout en partageant les connaissances et la vision que j’ai d’une refonte. En attendant la suite, vous pouvez aller ouvrir les premières cases chez 24ways (en) et 24 jours de Web (fr).
Commençons par un état des lieux de ce qui va changer/être créé :
En attendant la suite, vous pouvez aller ouvrir les premières cases chez UXmas (en) et Joranne Bagoule (fr).
Je voulais une navigation qui soit épurée, ce qui demande d’avoir plusieurs niveaux. En premier lieu une navigation globale qui résume en 3 mots les différentes facettes que je partage en ligne : professionnel, personnel et citoyen (des détails là-dessus plus tard). Ensuite, une navigation de second niveau qui permet de résumer le type de la page visitée et d’ajouter de façon optionnelle des liens internes de navigation contextuels.
Les deux types de navigation sont sous forme de phrase. Ça génère un peu de bruit mais ça apporte aussi un peu d’humanité dans ces menus si froids.
En attendant la suite, vous pouvez aller tricoter sur GitHub (en) et fabriquer votre propre calendrier (en), ça marcherait aussi avec le vin me souffle-t-on.
Cette étape fera l’objet de plusieurs itérations (et donc cases numériques) compte-tenu de l’ampleur de la tâche et de vos potentiels retours. J’ai utilisé des subtlepatterns pour les fonds clairs et foncés mais ça gênait un peu la lisibilité alors j’ai remis un aplat sur les fonds clairs (si votre écran est trop lumineux, vous ne remarquerez probablement pas la subtilité). Je me suis fixé comme contrainte d’utiliser au maximum les couleurs pré-définies en CSS ainsi que les tailles de texte comme suggéré par Emmanuel et je vais essayer de garder une CSS elle aussi minimaliste.
Je voulais avoir deux styles complémentaires : clair et foncé. Le problème de la lisibilité sur un fond foncé est bien réel mais il peut être amoindri en jouant sur l’espacement des lignes, des mots et même des lettres (ce qui n’a pas l’air de fonctionner sous Webkit). J’hésite encore à augmenter la taille du texte sur l’ensemble de la page, j’ai tendance à quasiment toujours faire un cmd++ lorsque j’arrive sur une page que je souhaite lire ou à utiliser un outil externe qui en facilite la lecture (et supprime le style choisi par l’auteur, ce qui est dommage).
Je vais laisser le header tel qu’il est actuellement et résister à la tentation d’ajouter un footer inutile. J’ai hésité à avoir une approche mobile-first mais je préfère privilégier le contenu et m’assurer que ça passe bien avec un petit écran. Si ce n’est pas le cas, c’est un indice que l’enveloppe a pris trop d’importance sur le message.
Je suis loin d’être satisfait du résultat actuel mais c’est un début.
J’utilise les services de Typekit pour servir les polices de caractères que j’utilise. C’est le seul outil externe qui peut potentiellement vous traquer sur ce site, j’en suis bien conscient et malheureusement je n’ai pas d’alternatives (pour une sombre histoire de copyright obsolète) à part celle d’utiliser des polices par défaut qui nuisent à l’esthétique de la lecture. Je m’en passerais bien mais j’ai tendance à remarquer de façon positive cette attention sur les sites des autres.
J’avais mis en place Abril Text/Display cette année et je compte passer à CamingoDos Web/Rooney Web pour cette nouvelle itération. J’aime bien utiliser les polices issues de la même fonderie car j’y retrouve une certaine cohérence (peut-être totalement imaginaire mais j’aime ça :p). C’est très subjectif mais je trouve cette paire extrêmement lisible et équilibrée, la lecture sur fond sombre s’en trouve améliorée.
L’ajout des polices demande un téléchargement de 336Ko en plus, c’est important mais difficilement réductible compte tenu des spécificités de la langue française. En attendant la suite, vous vous ferez bien quelques gifs.
J’ai entrepris de collecter les choses qui m’agacent dans ma ville pour constituer un jeu de données pouvant être ensuite discuté, confronté. J’ai formulé des propositions concrètes permettant d’améliorer la situation de mon point de vue. Je ne sais pas encore ce que je vais en faire mais peut-être que cela pourra générer des échanges entre arlésiens et de nouvelles propositions à défaut d’actions de la puissance publique.
J’ai conscience du manque de recul de ces constats, mais parfois les petites améliorations du quotidien apportent un petit réconfort qui ajouté à d’autres petits réconforts permet d’améliorer le bien-être global des citoyens. L’action citoyenne mène irrémédiablement vers la politique locale et c’est un univers qui me fait un peu peur.
C’est la page (juste après le profil personnel) qui est la plus compliquée à écrire. Je commence toujours par rédiger une sorte de CV pour me mettre en confiance, puis je jette tout pour avoir une approche plus humaine de la relation que j’ai avec mon travail. J’ai du mal à voir si c’est pertinent, c’est en tout cas une page me permettant de demander poliment aux recruteurs s’ils ont pris le temps de la lire et c’est déjà pas mal.
Aujourd’hui elle sert surtout de clarification pendant la période de transition avec ma nouvelle activité au sein de Scopyleft. En attendant la suite, quelques cases pour améliorer la performance de vos sites.
Bon finalement après réflexion il me fallait placer 2 liens supplémentaires et j’avais du mal à voir une autre place que le pied de page. J’ai donc ajouté :
head mais vu la raréfaction des accès natifs au sein des navigateurs je préfère être explicite ;En attendant la suite, allez découvrir de nouveaux outils / bibliothèques / astuces.
Pas convaincu par l’arrivée du lien vers la refonte en pied de page, je me suis demandé s’il n’était pas plus pertinent de mettre une sorte de plan de site décrivant les différentes pages présentes. Le problème, c’est que je n’ai jamais aimé ce style de page présentant un arbre incompréhensible, j’ai donc essayé de décrire les sections concernées qui sont déjà en ligne.
Et puisque j’en étais à faire des liens internes, j’ai choisi d’ajouter des liens externes vers des sites et des personnes que je lis au quotidien depuis des années. C’est une page dont j’avais envie depuis longtemps.
Passons aux choses sérieuses, exercice difficile dont j’ai repris des éléments de la précédente itération suite aux retours très positifs que j’ai eu.
C’est le moment où il faut que j’essaye de faire ressortir tout l’optimisme qui est en moi, ce qui nécessite pas mal d’itérations lorsqu’on est aussi aigri :p.
J’ai essayé de rester très succinct en me concentrant sur les objectifs personnels qui m’animent. Il y aura probablement une seconde itération au cours de la refonte car je ne suis pas pleinement satisfait de là où j’en suis arrivé.
J’ai offert un certificat SSL à mon site pour Noël dernier et j’ai choisi de le renouveler pour la simple et bonne raison que les options sécurisées ne doivent pas être réservées aux sites qui ont quelque chose à cacher. La confidentialité devrait être activée par défaut pour limiter toute suspicion a priori.
HTTPS permet de certifier que vous rejoignez bien l’URL que vous avez renseignée dans votre barre d’adresse, sous réserve que vous n’ayez pas appris à ignorer cette erreur sans y réfléchir à 2 fois ;HTTPS permet de certifier que le contenu qui transite entre mon serveur et votre navigateur a été chiffré et n’a théoriquement pas été consulté ni altéré.L’investissement me semble raisonnable pour continuer l’expérience.
On fait des rétrospectives mensuelles avec Scopyleft et j’ai pu constater à quel point il était efficace de faire des bilans réguliers pour décider d’actions concrètes visant à pérenniser le positif et influer sur le négatif de manière itérative. J’ai décidé d’en faire une à mi-parcours pour voir si c’était pertinent également dans le cadre de cet exercice.
Il est fatigant de tenir le rythme en parallèle de pas mal d’activités professionnelles qui demandent beaucoup d’énergie et de temps.
styleguide CSS avec les différents cas possibles ;Allez hop, au boulot !
Nicolas Dubois me demandait à juste titre de développer :
pourquoi j’ai viré GA de mon site ;) Ou, au delà du Google is Satan pourquoi ce n’est pas important pour toi de savoir quelle audience a tel ou tel billet, etc
Alors premièrement, je n’ai plus Google Analytics sur mon site depuis très longtemps et je l’ai remplacé par Mint qui est installé sur mon serveur et qui n’alimente aucune base de données d’entreprise tirant profit de votre activité en ligne par respect pour vous. En revanche, il est vrai que je l’ai rapidement enlevé de la page de Scopyleft sans proposer d’alternative car je pense qu’il faut avoir un objectif précis pour suivre l’activité des visiteurs sur son site.
Avec le recul, je me rends compte que je n’utilise les statistiques que pour flatter mon égo de temps en temps et c’est à peu près tout. Les liens entrants sont toujours les même, les recherches pour aboutir sur le site également. En fait je ne me suis servi que de 3 données depuis 4 ans :
user-agent pour justifier ma fainéantise à ne pas me soucier de certains navigateurs obsolètes lors des refontes ;C’est bien peu et j’ai donc décidé de retirer totalement la récupération des statistiques de fréquentation de ce site. Je serais curieux par contre d’avoir vos retours concernant vos adaptations lorsque vous constatez qu’un billet est plus lu qu’un autre. Est-ce que cela vous incite à faire plus de billets de ce style ? Est-ce que ça dirige votre « ligne éditoriale » dans le but de faire plus d’audience ?
Problème épineux compte-tenu des contraintes que je m’impose :
J’avais commencé à expérimenter des choses avec git(hub), ce qui s’était soldé par un échec assez flagrant mais ça m’a donné l’idée de partir sur une autre tentative à base de liste de diffusion. Les avantages pour répondre aux contraintes pré-citées :
La contrepartie à tout ça, c’est qu’il va potentiellement être compliqué d’automatiser le traitement de ces échanges en vue de leur publication ici. La liste peut également avoir une activité non adaptée aux différents abonnés ce qui pourrait aboutir au retrait de la discussion de certaines personnes qui avaient des choses intéressantes à échanger. C’est une expérience que je limite dans un premier temps à la refonte avec un unique lien en pied de page qui devrait formater le mail de façon à pouvoir en automatiser le traitement à terme. On en discute ? ;-)
PS : attention, le premier message que vous allez envoyer par mail ne va pas être immédiatement transmis en raison du workflow de souscription de librelist, il faudra le renvoyer une fois inscrit. Il devrait ensuite apparaître dans les archives passé un délai de quelques minutes.
Il y a un texte que je voulais publier depuis longtemps qui a été écrit pas une grand-tante et dont j’ai une rare copie papier. C’est l’histoire de ma famille vivant au Vietnam il y a quelques décennies, à l’époque des colonies.
La numérisation du texte est fastidieuse mais je m’impose de le faire car j’y retrouve une partie de mes racines et je ne souhaite pas que de tels écrits puissent disparaitre lors d’un accident. J’en suis pour l’instant au premier quart et j’avance doucement en essayant de m’astreindre à quelques pages par jour.
J’ai souhaité conserver un style dactylographié pour la typographie qui rappelle par skeuomorphisme les pages que j’ai tapé jour après jour. Si vous prenez le temps de lire ce texte (iA Writer m’indique 1 heure de lecture), sachez que Victor Lê était mon grand-père.
PS : inutile de demander une version epub pour l’instant.
Une des actions de ma rétrospective de mi-parcours aura été d’établir un jeu de test permettant de finaliser le design. J’avais commencé par une sorte de styleguide et je me suis dit que les tests devaient être le plus proche de la réalité pour être vraiment représentatifs. J’ai donc commencé à rédiger le contenu du futur blog ce qui m’a pris plus de temps que prévu pour ajouter également un accès aux archives.
Savoir reconnaître les échecs de ses estimations est aussi une forme de partage :-).
Et hop, comme promis un premier billet avec une page d’archives. Rien de bien phénoménal si ce n’est un page d’archives renvoyant aux anciens articles en anglais et aux billets de Biologeek.
Au moins je vais pouvoir commencer à publier en parallèle car il y a des billets qui ne sont pas liés à la refonte qui commencent à s’accumuler.
Reprise de la timeline qui fonctionne assez bien avec une simple adaptation du design pour la page des conférences. Elle montre une certaine régularité ces derniers temps mais j’aimerais bien me confronter à un public différent, une audience qui pourrait m’apporter un peu de candeur dans les échanges et de fraîcheur dans les concepts.
La page d’archives de mes tweets commence à prendre un peu trop de poids (2000 items à ce jour) et je n’ai pas encore trouvé de solution miracle pour pallier cela. Il faudrait que je refasse une passe pour élaguer dans ce que j’ai sauvegardé, à l’usage je me rends compte qu’il est très utile de pouvoir faire une recherche sur la page complète pour retrouver un lien (marque-page -2.0).
Un autre option serait d’arrêter de transmettre les liens intéressants sur Twitter pour les publier directement ici avec un peu plus de contexte et de réflexion sur le lien partagé. Je laisse pour l’instant en l’état et j’aviserai plus tard en fonction de mon degré de militantisme.
La page regroupant mes projets était clairement obsolète. J’ai commencé par appliquer le nouveau style et à supprimer les projets que je ne maintiens plus, j’ai ensuite lié cette page uniquement depuis ma page pro.
J’en profite pour parler du moteur de ce site. J’ai commencé par faire 2/3 commandes fabric pour générer les pages dynamiques et importer les anciens articles de blog et tweets. Aujourd’hui, j’ai une trentaine de commandes qui sont relativement répétitives car je ne me suis pas basé sur un moteur de templates initialement. C’était une erreur et je ne suis pas tout à fait satisfait de la solution actuelle mais elle a le mérite de fonctionner et j’en connais chaque ligne. Je pense pouvoir réussir à vivre avec… au moins jusqu’à la prochaine refonte :D.
En bonus aujourd’hui l’Interactive Guide to Blog Typography.
Ma fainéantise aura attendu toute la journée pour ne pas avoir à continuer cette refonte mais les mayas auront eu raison d’elle. Du coup, c’est une étape assez courte avec le style des pensées en anglais qui s’uniformise. J’ai également passé les articles en ordre chronologique ce qui me semble plus cohérent dans le déroulé de mes réflexions au cours de cette année.
J’en ai profité pour relire un peu ces pensées de façon à vérifier que le style s’appliquait bien et je suis retombé sur mon théorème que je vais tenter d’invalider sous peu, pour ma plus grande joie :-).
Ceci est un manuel explicatif concernant les commentaires/discussions sur le site.
Les commentaires passent par une liste de diffusion hébergée par librelist et archivée publiquement. Vous êtes automatiquement abonné à la liste lorsque vous soumettez un message par mail dans le but avoué de générer des discussions (pour avoir une idée de la fréquence des messages, se référer aux archives).
Certains des messages envoyés, contenus entre ★★★★★ et ★★★★★ seront également publiés sur le site de façon automatisée. Je me réserve le droit de publier ou non les messages et discussions sur cette liste. Veuillez être explicite si vous ne souhaitez pas être repris ici (votre message sera quand même archivé sur librelist).
Normalement, en cliquant sur les liens présents sur le site, vous devriez avoir un modèle de message déjà prérempli vous permettant d’avoir le formatage adéquat comprenant le titre, l’url concernée et la possibilité de publier automatiquement sur le site.
Lors de votre première soumission, un message de confirmation vous sera envoyé et il sera nécessaire de renvoyer votre message initial (ce qui vous permettra d’avoir une relecture à froid ;-)) avant publication.
Ce processus est expérimental et s’améliorera avec le temps, il est pour l’instant manuel de mon côté. Vous avez un exemple de rendu des commentaires au sujet de cette page ci-dessous.
Je réfléchis à ce que je veux faire de la page de media depuis le début de la refonte et je n’arrive pas à me décider, à terme j’aimerais pouvoir les intégrer dans les articles tout en conservant une page séparée pour avoir une liste.
Je vais encore attendre un peu pour laisser mariner ces pistes, il ne faut pas que cette refonte devienne oppressante au point de vouloir à tout prix changer. Apprendre à chérir ses idées, à leur laisser le temps de s’exprimer.
24ème étape de cette refonte, il est temps de faire un bilan :
Ce n’est pas terminé pour autant, un site personnel est un bonsai dont il faut s’occuper symbiotiquement au quotidien. On se retrouve à la prochaine taille ;-).
La liste de discussions pour les commentaires me semble intéressant. Je ne sais pas comment tu envisages leur publication sur la page en question ou pas. Si tu crées une page individuelle pour chaque message ou pas. Un id spécifique pour chaque article, mais il doit y avoir une possibilité.
Dans la gestion des bug reports d’Opera nous recevons toutes les modifications par message des bugs auxquels nous sommes abonnés. Rien de surprenant. Mais nous pouvons faire un simple « Reply » pour commenter sur le bug, plutôt que d’avoir à se connecter sur le site, passer à travers un formulaire.
Cette fonctionnalité serait très intéressante sur les blogs. L’enjeu, les personnes qui font du top reply et définir une syntaxe pour les commentaires de commentaires. Peut-être juste markdown.
Un commentaire d’un commentaire.
La liste de discussions pour les commentaires me semble intéressant. Je ne sais pas comment tu envisages leur publication sur la page en question ou pas. Si tu crées une page individuelle pour chaque message ou pas. Un id spécifique pour chaque article, mais il doit y avoir une possibilité.
Je ne pense pas faire une page par commentaire, peut-être une page par discussion par contre à terme mais ça dépend de la façon dont ça évolue :)
Dans la gestion des bug reports d’Opera nous recevons toutes les modifications par message des bugs auxquels nous sommes abonnés. Rien de surprenant. Mais nous pouvons faire un simple « Reply » pour commenter sur le bug, plutôt que d’avoir à se connecter sur le site, passer à travers un formulaire.
En fait, vu que c’est une liste de diffusion à laquelle chaque participant est automatiquement abonné, il est possible de répondre : soit entre les étoiles pour que ça apparaisse sur le site, soit directement comme je le fais ici et ça reste sur la liste. Il faudra que j’explique tout ça un peu mieux en fonction des retours.
Cette fonctionnalité serait très intéressante sur les blogs. L’enjeu, les personnes qui font du top reply et définir une syntaxe pour les commentaires de commentaires. Peut-être juste markdown.
Tout à fait, et pour gérer les signatures également !
Concernant plus spécifiquement la refonte, là encore, j’apprécie le partage de la réflexion, le pourquoi du comment, ce qui amène au résultat. Pour moi, le processus de création est un grand mystère. Du coup cet exercice imposé est très instructif et inspirant pour moi - peut-être parce que ma méthode me semble très différente ?
Bref, je n’ai pas vraiment de retour très constructif à faire, si ce n’est des encouragements à continuer.
À bientôt,
C’est un commentaire en forme d’essai.
Korantin dans un commentaire pour un autre billet fait une allusion à la liste de diffusion.
Korantin Auguste a écrit :
PS : L’utilisation d’une liste de diffusion c’est sympa, mais pour écrire juste un petit message comme ça, ce n’est pas ultra-pratique (surtout avec le « your first mail was dropped ».
Je ne pense pas que ce soit un enjeu et plutôt une feature. Les personnes ont souvent tendance à envoyer un commentaire très réflexifs et peu pensé. Donc le coût du premier envoi peut avoir un effet positif sur la valeur de la participation.
L’enjeu est pour moi légèrement différent. J’ai répondu au commentaire de Korantin en faisant un reply directement depuis le mail.
D’autre part pour ce message même un enjeu similaire.
C’est peut-être juste une question d’apprentissage mais le manuel n’existe pas vraiment pour l’instant ou n’est pas réellement accessible.