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 :

• coloration syntaxique du code avec google-code-prettify; j'ai vu ça la première fois sur tomayko.com
• formatage à la volée des liens vers les fichiers mp3 (via WordPress Audio Player) ou mp4 (via JW FLV Media Player)
• menu déroulant en Ajax avec des suggestions sur l'input de recherche; QuickSilver style ;)
• filtre pour chercher dans les titres des articles sur la page des archives, vu la première fois sur orderedlist.com et implémenté en JQuery par John Resig, d'après un portage en JavaScript de l'algorithme de recherche de QuickSilver

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.