Jean-Sébastien Mansart .com - Tag - design

Les évènements de novembre où je serai

Jean-Sébastien Mansart — Mon, 27 Oct 2008 13:27:00 +0100

Parce qu'il n'y a pas que le web et surtout parce que le web ne se pratique pas que sur internet, je serai présent à deux évènements diamétralement opposés et pourtant, pas si éloigné que ça dans un sens...

Le week-end du 1er novembre, je serai avec Widiwici aux 2 alpes pour le mondial du snowboard. Au programme, distribution de tracts et faire connaitre le réseau social sportif, fête et test de matériel (ça va être sport, j'ai jamais fait de snow, mais on est pas des petits joueurs !).

Je serai aussi présent du 13 au 15 novembre à Paris Web 2008, avec Marlène. Deux jours de conférences et une journée d'atelier.

J'ai bien fait de réserver directement le pass atelier, ils se sont tous vendu en 24h !
Je vais surement participer à l'atelier que mon ami Frédéric de Villamil animera avec David Larlet sur les RDFa vs les Microformats. (oui, ça fait peur)

Si vous vous trouvez à l'un de ces deux évènements, signalez vous dans les commentaires ou contactez moi ! On pourra aller se boire une petite bière.

Article original écrit par Jean-Sébastien Mansart et publié sur Jean-Sébastien Mansart .com | Lien direct vers l'article | Si vous lisez cet article dans son intégralité sur un autre site que Jean-Sébastien Mansart .com c'est qu'il a été reproduit illégalement et sans autorisation. Merci de le sig naler à son auteur original en cliquant ici | © jsmansart.com.

Nouveau thème : je vous fais faire le tour du proprio ?

Jean-Sébastien Mansart — Wed, 26 Mar 2008 13:54:00 +0100

Après un mois de dur labeur et de fouettage de la graphiste, le nouveau thème de ce blog est enfin en ligne.
Plus qu'un simple changement de couleurs, c'est avant tout un changement ergonomique de la navigation.

Petit tour d'horizon des nouveautés apportées.

Premièrement, d'un point de vue global, la charte graphique reste dans les mêmes tons. L'accent à surtout été mis sur la navigation qui était le point faible (c'est pas peu dire) de l'ancienne version, l'ergonomie et l'accessibilité.
Lorsqu'un visiteur arrivait sur un billet, il n'avait d'autre choix que de retourner à l'accueil où cliquer sur la barre de navigation qui exécutait un javascript douteux...

Maintenant, on retrouve une barre de navigation sur la droite, assez commune, avec un bel emplacement pour l'abonnement au flux RSS, la liste des derniers billets, les catégories et les tags.

Une "micro" navigation horizontale permet d'accéder à des informations plus personnelles : une page pour me contacter, un lien d'échappement vers l'à propos et un lien vers mon CV en format PDF.

Toujours dans la navigation, tout en bas du blog se trouve un "bigfooter" ou "pied de page" qui regroupe les derniers commentaires publiés, les derniers articles et un encart sur ma vie trépidante (c'est pas tout le monde qui peut se targuer d'être l'inventeur d'un sport).

Pour le contenu, tout à été fait pour le mettre en avant.

Sur la page d'accueil, les billets sont coupés, le lien "lire la suite..." à été revu et mis en valeur.
Un lien affiche le nombre de commentaires, et lorsqu'il n'y en a pas, au lieu d'afficher un triste et désespéré "0 commentaires", s'affiche un "commentez !" nettement plus incitatif.
Les liens dans le corps du texte étaient avant pratiquement invisibles, ils étaient noyés dans le texte. On a donc changé la couleur pour une couleur beaucoup plus voyante avec un fort contraste afin de mieux les identifier.
Enfin, à la fin de chaque billet se trouve une section "vous allez aimer !" qui affiche les 5 billets qui sont (plus ou moins) en rapport avec le billet en cours.

Ce thème à naturellement été testé avec les principaux navigateurs du marché : IE6, IE7, Firefox et Safari.
Mis à part sous IE6 qui est un véritable calvaire pour les développeurs, tout a fonctionné à merveille sur les autres navigateurs.

Faites moi part de vos critiques et/ou rapport de bugs (si vous en trouvez)

Refonte complète du blog

Jean-Sébastien Mansart — Fri, 07 Mar 2008 13:31:00 +0100

Ça faisait un petit moment que ça me turlupinait, mon blog avait un thème "sympa", mais pas top. Après avoir rencontré Patricia Gallot, l'auteur de "Internet, donne moi ce que je veux", je me suis mis en tête de refondre complètement mon blog, en commençant par la navigation.

La première étape était de trouver un ou plusieurs modèle de navigation propice à un blog.

Un coup de chance, j'avais le livre de Patricia sous la main, et après avoir parcouru les 60 modèles de navigation, j'en ai retenu 3 :

le menu sur la droite
le big footer (le gros pied de page)
le menu horizontal

Il ne restait plus qu'a placer les différents éléments dedans.
Dans le menu de droite seraient présents (dans le désordre) :

la recherche
le lien vers le flux RSS
la liste des tags
les derniers billets
la liste des catégories

Dans le big footer :

le fameux "a propos"
les derniers commentaires
et pour se faire plaisir, une fois encore les derniers billets

Dans le menu horizontal :

Contact
CV
A propos

Et pour finir le tout, un petit colophon histoire de rappeler les mentions légales et quelques liens rapides d'échappements.

Deuxième étape : faire une maquette à partir des éléments définis plus haut.

J'admets, cette partie là, je l'ai délégué. Étant en collocation avec une graphiste web, je n'ai pas eu à chercher longtemps à qui j'allais confier cette tache... On en a profiter pour revoir l'ergonomie du blog, en créant des liens d'échappements là où il en fallait (comme un lien pour aller directement aux commentaires), retirer quelques éléments qui n'apportaient rien (le lien permalink).
Mettre des parties plus en évidences : comme l'abonnement au flux RSS, le "lire la suite..." sur la page d'accueil, les liens dans le corps du texte, etc...

Je voulais aussi garder l'esprit et la charte graphique de l'actuel. Le bandeau à été remanié, le titre du blog amélioré...

Troisième étape : optimiser le code HTML pour le référencement.

Dotclear est part défaut très bien conçut pour le référencement. Cependant, on peut noter quelques améliorations à apporter.

La balise <title> est le titre de la page.
Une balise <h1> définit le titre du document.
Une balise <h2> définit les sous titres

Lorsque l'on est sur la page d'accueil, le title doit donc être le nom du blog, la balise <h1> contiendra elle aussi le titre du blog et on placera les titres des billets dans des balises <h2>.

Par contre, lorsque l'on est sur un billet. Le title de la page devient donc le titre du billet. Celui-ci est aussi englobé dans une balise h1, mais quid du titre du blog ?

Certains disent qu'on peut le laisser en <h1>, d'autres au contraire affirment qu'il ne doit y avoir qu'une seule balise <h1> par page.
Si on part sur la seconde hypothèse, dans quelle balise met-on le titre ?
Une balise <h2> ?
Une balise <p> ?
Une balise <span> ?

Les mêmes questions se posent pour la navigation : les bloc ont des titres, on met quoi ? des <hx> ou une toute autre balise ?

Pour le coup, je suis un peu dépassé, et même tous les grands du HTML se battent sur ce genre de sujet...

Tout cela demande énormément de travail et de recherche, la maquette est terminée, il reste encore l'intégration à faire, les tests sous différents navigateurs et système d'exploitation, et pour finir : le polissage.

A votre avis : quelles balises utiliser pour le titre du blog et la navigation ?

Lancement

Jean-Sébastien Mansart — Tue, 29 May 2007 12:31:00 +0200

Je profite de mon temps de pause déjeuner pour lancer mon blog "pro", pour faire comme les grands et enfin devenir influent (d'ailleurs, ne le suis-je pas déjà ?).

On remarquera un super nom de domaine qui claque, un thème pour dotclear 2 qui utilise du jQuery, il y a encore quelques finitions à faire, mais le gros est posé, il ne reste plus que le contenu.

D'ailleurs, de quoi je vais parler ?
Principalement des technos web que j'utilise au quotidien :

D'autre sujets tournant - forcément - autour du web :

Design
Accessibilité
Marketing
etc...

Je me réserve un peu de champs libre tout de même, il ne faut pas s'enfermer.