Concepteur web freelance, développeur Flash et Flex, expert HTML/CSS

J'aime bien 37 signals, et j'aime assez souvent leur prises de position assez radicales sur la manière de travailler un site web. Dans cet article en l'occurrence, ils expliquent qu'ils se passent totalement de maquette Photoshop lorsqu'ils designent une interface, et passent directement du crayon et de la feuille de papier au prototype HTML/CSS.

En fait je suis assez d'accord avec eux, même si leur billet peut laisser croire que le prototype HTML/CSS peut remplacer totalement l'étape Photoshop/Illustrator/... (entourez votre logiciel préféré). Ce sont à mon avis deux étapes différentes, et qui ont deux buts bien différents.

Effectivement aujourd'hui, la maquette Photoshop est bien mal utilisée. Elle sert malheureusement de référence et d'étape de validation pour des chose qu'elle ne peut pourtant pas ou mal montrer :

• Le zoning, la taille et le placement des blocs, qui sont souvent fastidieux à modifier sur Photoshop, on perd beaucoup de temps à chaque itération (et le designer s'énerve...)
• Quid de l'interaction ? Comment voir le comportement d'un lien au survol ? L'apparition d'un bloc AJAX ? Ce sont pourtant des éléments clés d'un design interactif.
• A la différence d'un travail print, le design interactif doit également prendre en compte les comportements. Par exemple le comportement d'une page lorsqu'on agrandit le texte FAIT parti de la démarche design, et Photoshop ne le montre pas non plus.
• Enfin la déclinaison de toutes les maquettes d'un site est également une étape extrêmement fastidieuse et peu valorisante. Voir 50 images jpeg avec le même site et le contenu central qui change n'a absolument aucun intérêt. Cette déclinaison pourra se faire bien plus rapidement en HTML ensuite.

Pour tout ça, un prototype HTML/CSS est un document de travail extrêmement souple pour affiner des problématique de zoning, de placement et de taille de blocs, bien plus que Photoshop. Déplacer un bloc en HTML/CSS prend environ 5 secondes, et le résultat est montrable immédiatement. Modifier un texte idem, etc...

En revanche, une maquette Photoshop pourra clairement permettre de travailler la charte graphique globale. Mais il ne sert à rien d'y consacrer trop de temps au calage au pixel près ou à au positionnement des blocs entre eux, c'est simplement long, fastidieux et inutile. Bref, amis Photoshopeurs, arrêtez de passer des heures sur des détails sans importances et concentrez-vous sur votre coeur de métier : la création graphique.

Maintenant, se passer de Photoshop conduit à mon avis à un excès inverse, c'est à dire que le code CSS se met à conduire l'ensemble de la charte graphique. Dans cette démarche, on aboutit souvent à une "pauvreté" graphique et on se surprend à faire des choix graphiques non plus en fonction d'un concept créatif mais d'un simplicité à produire tel effet en CSS rapidement. C'est sûrement quelque chose qui peut convenir à 37 Signals, qui ont des designs très "dépouillés", mais sûrement pas applicables à tous.

Bref pour résumer :

• Un prototype HTML/CSS pour valider les placements, les tailles, l'interaction et d'une manière générale ce qu'on peut appeler "l'expérience utilisateur".
• Une maquette Photoshop pour la charte graphique, les illustrations, le travail sur les couleurs, etc...

Et à chaque outil sa fonction :)

Yahoo nous propose sur cette page 13 règles pour optimiser et accélérer l'affichage de son site.

En résumé et en français :

1. Minimiser le nombre de requêtes HTTP
2. Utiliser un réseau de diffusion de contenu ("Content Delivery Network")
3. Configurer un en-tête d'expiration pour tous les composants images, scripts et styles
4. Utiliser la compression Gzip
5. Placer les styles CSS dans la partie head de la page
6. Placer les scripts en bas de page
7. Eviter les expressions javascript dans les feuilles de styles
8. Utiliser des fichiers externes pour les scripts et les styles CSS
9. Réduire le nombre de résolutions DNS
10. Compresser le code Javascript (avec des outils comme JSMin)
11. Eviter les redirections
12. Retirer les scripts en double (visiblement ça arrive souvent quand on travaille en équipe...)
13. Configurer correctement les "entity tags" si besoin

Chaque règle est très bien expliquée et documentée, et Yahoo nous fournit même une extension pour Firebug permettant d'analyser la page en cours vis-à-vis de chacune de ces règles.

Utiliser la console de Firebug sur tous les navigateurs c'est possible grâce à Firebug Lite, la version allegée de Firebug. Ça se présente sous la forme d'un fichier javascript à inclure, puis la console s'affiche en appuyant sur F12 (Ctrl+F12 sous Mac, sinon ça lance Dashboard...)