Ouvrir la navigation secondaire

Ce billet a plus de deux ans. S'il contient des informations techniques elles sont peut être obsolètes.

Précédent Redesign
Suivant MercuryMover

Front-end geekery

Préparez-vous pour une plongée profonde au cœur du webdesign à l'épreuve des balles. L'exercice consiste à synthétiser les points importants des étapes de la réalisation du redesign de mon weblog, ou plutôt de son ré-alignement ;) Prêt pour une immersion en milieu hostile, dans un monde ou les clients HTTP se font la guerre, là ou chaque navigateur implémente les specs à sa façon ? Vous pouvez encore changer de job. Non ? Alors go !

Objectifs

Les objectifs étaient les suivants : améliorer la lecture, la navigation et la recherche au sein du weblog et se faire plaisir aussi. Re-trouver l'information sur le web est dificile. Je me surprenais parfois en train de galérer pour retrouver un de mes post alors que j'étais d'une sobriété absolue. C'en était trop. Le remaniement de l'interface était devenu nécessaire. Direction le magasin de photographie...

Photoshop

Pour moi les étapes de recherche graphique se font directement dans Photoshop (ou Illustrator) mais après c'est chacun ses préférences. Je parle de ça car j'ai vu passer un débat chez les américains dans lequel les gens de 37signals expliquait pourquoi ils laissaient tomber l'étape Photoshop. Et bien moi pas :)

Pour la couleur j'ai gardé la même chose qu'avant comme ça on sait qu'on est à la maison. Pour trouver l'inspiration, en général je garde des bookmarks ou des screenshots des sites qui retiennent mon attention, souvent juste pour une bribe. Ensuite je mixe tout ça avec mes objectifs et je laisse glisser les outils de la palette de Toshop jusqu'à trouver quelque chose qui me donne un taux de satisfaction >= à 70%. Mais je ne suis jamais satisfait :) Je cherche donc un compromis entre design, ergonomie et satisfaction personnelle. Quand j'ai un truc pas trop mal je me lance dans l'intégration. Pour savoir si c'est pas trop mal je compare ma maquette avec l'interface de Cdiscount.

Quand je dois faire un logo je vais souvent chercher l'inspiration sur favup, je trouve que ce showcase à vraiment de la gueule. J'ai utilisé mon ancienne favicon pour la forme du logo et la police advent que je trouve superbe pour la typo.

DotClear

Je suis sous DotClear depuis la veille de mes 25 ans (Mauriz à eu le commentaire #1, il est donc l'heureux gagnant d'une Renault Fuego toutes options :D ).

La version 2 est bien foutue et il y a une grosse communauté derrière, ce qui permet de trouver des tips sympa comme surcharger les variables de trad ou des plug-ins cools comme ceux de Pep tel que feedEntries. En gros tu peux faire du tuning avec ton DotClear toi même, pas la peine de chercher Xzibit, va chercher des pièces tout seul.

Enfin bref, le lecteur voudra bien me pardonner ce court moment de tutoiement intempestif.

Revenons à des choses plus sérieuses comme les templates du logiciel qui laissent une grosse marge de manoeuvre pour la personnalisation de son blog et qui génèrent du code XHTML Stric avec une attention particulière portée à l'accessibilité. Le gain de temps est important pour peu qu'on se soucie des points à prendre en compte pour avoir un niveau correct.

CSS

CSS, sujet épineux s'il en est, certains vont jusqu'à préconiser son remplacement. Il faut bien reconnaître que ça n'est pas toujours facile d'obtenir quelque chose de clean qui donne une impression de professionnalisme dans ne serait-ce que les navigateurs de classe A. Même si on tend franchement vers le mieux, l'implémentation et le support de CSS n'est pas de la même qualité dans tous les navigateurs.

Il faut de la méthode, de la patience et embrasser les concepts de dégradation élégante et d'amélioration progressive. Souvent les gens prônent l'un ou l'autre concept. Je pense que les deux sont complémentaires. Avec CSS c'est plutôt de la dégradation élégante.

Alors qu'est-ce qu'on a comme dégradation élégante ici ? Par exemple :

  • les titres des posts sont en Delicious dans Safari grâce à son bon support de @font-face, ailleurs ça se dégrade dans une des polices web classiques définies
  • les bords de certains éléments de l'interface sont arrondis grâce à des Vendor-specific Properties; dans IE et Opera c'est carré et faire du SVG et du VML pour eux, non merci
  • les puces numéros des listes nomérotées sont colorés grâce à counter-increment et content, c'est Counter Intuitive et ça n'est pas IE proof :)
  • j'utilise rgba pour le background de la recherche majax, mais je déclare un background-color classique avant de façon à laisser le navigateur prendre en compte seulement le premier background si la propriété rgba n'est pas supportée
  • je n'ai pas réglé tous les bugs sous IE6, j'en ai marre de ce nav

Au niveau de la méthode ma technique consiste à tester au fur et à mesure du développement dans une sélection de navigateurs dont Safari, Firefox, Opera et IE 6 et 7. Je trouve que c'est plus simple d'identifier la source d'un bug avec cette méthode plutôt que de finir le dev et de tester après. J'ai souvent 2 machines pour faire des sites web dont une avec un Windows en virtualisé pour les tests.

Pour finir avec CSS et avant de parler JavaScript, voici un petit caviar pour formater les blocs de code de type <code> et/ou <pre>.

JavaScript

Une fois que j'ai terminé l'intégration XHTML+CSS, je rajoute une couche de JavaScript pour améliorer des petites choses. C'est ça le concept d'amélioration progressive. Le fait de l'ajouter en dernier permet d'être quasi-certain de son caractère non-intrusif. J'utilise la librairie JQuery pour laquelle j'ai une préférence mais il y en a d'autres sympa. Utiliser une lib me permet surtout d'avoir une syntaxe plus légère et de ne pas avoir à dealer avec les différences d'implémentation du JS par les navigateurs.

Quelques exemples d'amélioration progressive via JavaScript :

Bon j'ai un petit souci de performance avec le filtre des archives. Le code de Resig va faire un toggle des éléments via la propriété style, mais ça rame sévère dans presque tous les navigateurs quand il commence à y avoir beaucoup d'éléments. Je suis donc passé par une modification du nom de la classe (className) et c'est largement plus rapide sauf pour IE qui va plus vite sur le style, ce que semble confirmer ce benchmark. Au début j'avais ajouté un focus() sur l'input de la page des archives mais je l'ai viré car c'est super saoulant quand le focus casse le fonctionnement du bouton back du navigateur, comme sur la page d'accueil de Google.

That's all folks

Voila. Je pense avoir abordé tout ce qui me semblait important pour ce redesign. Comme vous pouvez le constater le monde du front-end est vaste et tout est lié. Penser également aux performances web est important même si ça ne sert pas toujours à grand chose d'aller trop loin pour des petits sites comme le mien.

Aujourd'hui j'ai usé mon clavier et je n'écrirai pas des articles aussi long tous les jours, ça c'est certain :) Alors j'espère que ça vous sera utile d'une façon ou d'une autre.

#1

Pierre

14.09.08 18:33

Super !

Merci beaucoup pour cet article qui tombe à pic car je me triture les méninges pour offrir à mon blog un nouveau design suite au passage à Dotclear 2. Tes liens me seront certainement utiles, même si j&#39;en suis encore à me demander ce que je vais mettre sur mon blog (je voulais un truc super épuré, mais il y a tellement de choses à mettre dans la page que je ne sais pas si ça va le faire).

Et puis je suis content de voir que nos trads de Javascript non intrusif servent :) (même si tu lis plein d'articles anglophones, héhé).

Au passage, un petit pépin avec tes puces de liste : sous FF3 Windows, je vois un code Unocide s'afficher en violet à la place d'une puce... bizarre !

#2

Marco

14.09.08 20:15

@Pierre: ah ouais je vois le problème sous FF3 Win.
Je pense à un bug même si la technique que j'utilise avec le generated-content (http://www.w3.org/TR/CSS2/generate.html) n'est pas *vraiment* faite pour les listes non-ordonnées, c'est un peu un tour de passe-passe :)
Je vais voir si je trouve une solution.

#3

Olivier aka Mali

16.09.08 10:02

Tu as bien fait d'user ton keyboard marco !
Ce post est une mine d'informations. J'ai déjà enregistré qques liens pour le design qui me semble vraiment intéressant, car comme d'habitude j'ai toujours un peu de mal pour laisser s'exprimer mon côté artistique (s'il existe ^^)

Tu as oublié une seule chose et pas des moindres ! c'est un très bon blog d'un ami qui est plus que calé pour faire le web

#4

loïc m.

19.09.08 10:17

Très bon article, avec plein de petit rappel pour le design d'un site en général.
Une pépite de liens dans tous les sens.
Plein de bons articles à lire.

Noté dans mes bookmarks pour lecture future !

Merci pour cet article complet et instructif.

#5

Jean-Michel

25.09.08 21:17

Marc, pourrais-je te demander comment faire pour intégrer de façon simple (enfin je n'ai pas ton niveau de codeur) le javascript qui permet la recherche instantanée sur un thème Dotclear 2 ?

#6

Marco

25.09.08 23:12

@Jean-Michel: hum pour l'intégrer de façon simple il faudrait que j'en fasse un plug-in pour DotClear. C'est pas pour tout de suite, je n'ai pas le temps en ce moment. Sinon il faut que tu pompes mon javascript et que tu écrives un script qui aille taper dans ta base de données.

#7

Jean-Michel

27.09.08 10:06

@Marco: euh vu ma compétence limité aux feuilles de styles css, j'attendrai la publication d'un plugin made in Marco ;-)