Pensez CSS et (X)HTML dés l’élaboration de votre maquette

Si il ne devait rester qu’une différence entre un Webdesigner et un graphiste, ce serait celle là : le Webdesigner pense Web, le Graphiste pense graphisme.

Dit comme ça, nous avons une belle lapalissade, mais croyez moi, c’est vrai.

Ce n’est d’ailleurs pas pour rien que la plupart des graphistes que je connais et qui « font du web » réalisent des sites presque exclusivement en Flash, le seul outil permettant avec un peu d’autoformation de rendre sur un écran la qualité de leur travail, et surtout limitant les contraintes liées au support.

Pour ma part, depuis quelques temps, j’essaie d’analyser ma pratique professionnelle pour optimiser mes méthodes de travail et augmenter ma productivité.

Je me suis rendu compte que j’inclus le rendu final CSS/(X)HTML quand je travaille sur une maquette graphique sous Photoshop ou Illustrator.

J’ai en tête les limitations, les différences de rendu des navigateurs, les techniques que je maitrise déjà donc aisément applicables et celles que je devrais tester pour voir si ma maquette est réaliste et « rentable ».

Précision, je sais bien que tout est réalisable, mais pas forcément dans une logique d’optimisation pour le medium internet.

Un simple décalage de quelques pixels d’un objet dans la maquette peut faire gagner du poids à la page finale, mais également du temps de production, certains effets sont couteux en développement et en test et si ce n’est pas le client qui paie la note, c’est moi.

Au final, en intégrant dés le départ ce processus de construction, je gagne un temps considérable lors de l’intégration html, j’ai déjà mon layout en tête, les blocs d’information sont clairement identifiés, je sais déjà comment je vais lier le tout, le code est presque fait à l’avance.

Et vous, vous fonctionnez comment ? Pensez-vous le faire ? Le faites-vous vraiment ?

PS : je suis en train de préparer un article de « bonnes pratiques » de production, cette partie sera surement reprise.

Cordialement,
Aymeric Jacquet

Tags : , , ,