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.
9 réponses à “Pensez CSS et (X)HTML dés l’élaboration de votre maquette”
De mon côté, ma démarche a récemment évolué avec le choix de sous-traiter intégralement l’intégration CSS des projets sur lesquels je travaille. Je m’explique : auparavant sur des petits projets je faisais tout conception + design + css + intégration cms ou pas etc… j’intégrais donc mes propres limites en css lors de la conception et du design du site. Aujourd’hui je sous-traite à un pro du css qui me garantit un résultat 100% nickel -avec n’importe quel design-, et une livraison rapide des templates, et ça même sur des petites projets car les coûts sont devenus faibles… Bref, j’ai moins les mains dans le code mais je me concentre sur le client et son contenu ! vaste programme, n’est-ce pas ;) ?
bonjour Nicolas,
C’est un positionnement que je comprends parfaitement, j’applique le même pour tout ce qui est développement "lourd", ce n’est pas ma spécialité, je ne suis pas concurrentiel, alors je fais bosser mes réseaux.
Est-ce que tu as la possibilité de nous préciser le gain financier, pour toi, que représente la sous-traitance de l’intégration HTML? Un rapport temps gagné/marge bénéficiaire par exemple. Si ce n’est pas top secret bien sur.
Bonjour Aymeric,
Non ce n’est pas du tout top secret pour moi, même si je sais que beaucoup dans le secteur n’aiment pas parler de ce genre de choses ;) L’intégration CSS/xHtml à partir d’un psd est un service proposé à partir grosso modo de moins de 200 € la page… A partir du moment ou j’ai acheté la conversion de mon template, je décline en 1/2 journée un site. Auparavant, il me fallait plus d’une journée pour réaliser moi-même le travail, en ayant en plus la pression d’un résultat nickel. Donc, formation, exercices, test… Partie passionnante au demeurant ! Mais, il faut bien l’avouer de moins en moins rentable. Les clients ne sont plus prêts à payer des fortunes pour des chartes graphiques et du développement. (Je ne parle pas des grands comptes, je parle de la PME ou de l’institution, je parle de site à moins de 2 500 euros : 80% du marché ?). Il faut donc bien trouver des solutions. Après pour ce qui est des marges, je renvoie chacun à son prix à la journée, c’est facile de calculer son bénéfice… Au final, ça permet concrètement de réinvestir plus l’argent dans le design par exemple, augmenter la qualité perçue par le client, c’est un de mes (modestes) objectifs ! Je suis webmaster indépendant positionné la plupart du temps en chef de projet, mon job c’est de bien comprendre tout le potentiel de chacun des éléments qui composent la chaîne de conception/production/maintenance d’un site et d’obtenir un rapport qualité/prix/rentabilité excellent pour mon client par rapport à une grosse agence web. Et surtout, je crois que ce qui fait la différence c’est la relation avec le client : la CONFIANCE ! Plus on clarifiera nos pratiques, plus on créera la confiance et plus vite on se débarrassera de l’image de bidouilleur mis en concurrence n’importe comment, avec n’importe qui. Il reste du travail !
A ce que je vois, nous avons la même philosophie professionnelle. Mes respects. On ne le dira pas assez : confiance, confiance, confiance…
Bonsoir Aymeric,
L’approche que tu décris est efficace et je dois avouer que j’adopte la même :)
En revanche, cela bride certainement la créativité non ?
Car en ayant en tête dès le départ les difficultés d’intégration et de compatibilité on se limite certainement.
Hello Aymeric. Je procède maintenant comme toi, car je me suis rendu compte que la différence de rendu entre le logiciel de retouche d’images et le navigateur Internet est trop importante (pas ou très peu d’anti-aliasing du texte dans un navigateur par exemple). Et comme tu l’as très bien dit, il y a certains effets (comme les ombres portées, la transparence, …) qui sont très difficiles à implémenter en HTML+CSS. Donc maintenant, je réfléchis moi aussi lorsque je conçois un design à ce que cela va donner par la suite.
Même démarche que toi Aymeric, je le faisais d’ailleurs sans réellement en avoir conscience.
J’en ai pris conscience il y a peu après avoir bossé sur une maquette graphique réalisée par un graphiste sans réelles connaissances liées au dév web, l’adaptation ne fut pas une sinécure…
L’approche de Nicolas n’est pas inintéressante, surtout au vue des tarifs pratiqués, néanmoins cela n’enlève t-il pas une grande partie de ce qui fait le charme du job ?
Perso, j’adore voir la maquette prendre vie (si j’ose dire), même si parfois j’y laisse quelques cheveux. ;)
@Aurélien : quel que soit le travail de créativité, il s’accompagne toujours de contraintes plus ou moins fortes. Bien sur qu’il faut "brider" un peu la créativité quand il est question de Web pour s’adapter aux nécessités du medium. Brider est un bien grand mot, il faut juste intégrer les contraintes à son processus de créativité.
Un peintre qui commence une toile va consciemment ou inconsciemment intégrer un certain nombre de contraintes à son processus créatif : quel est le format sera le mieux, quel support (toile tendue, panneau de bois…), quelle "peinture", quelle technique, etc.
@Stéphane : quand je fais une maquette "image" à présenter au client, tout ce qui est texte "contenu" qui sera rendu en html et non en image, je le laisse sans anti-aliasing, pour qu’il n’ait pas de surprises. Et surtout, cela limite les problèmes de variations de tailles de texte entre le logiciel image et le rendu html.
@Nilo : c’est un des problèmes de l’intégration html de maquettes que d’autres ont réalisé sans prendre en compte les contraintes du medium. On peut les réaliser, mais au souvent au prix d’une perte de qualité de rendu et surtout très souvent, cela donne des pages abominablement lourdes.
Pour ce qui est de sous-traiter l’intégration html, je pense que pour générer des layouts généraux de mise en page, c’est intéressant, par contre se pose le problème de l’optimisation de tout ce qui est mise en forme des contenus : classes de positionnement d’images, mise en forme en fonction de la hiérarchie des titres, des textes, les textes "plus" (gras, italique, blocs de citation) qui doivent être harmonisés avec la charte graphique. Cela demande, pour moi, plus de travail que la construction du layout général.
Très amusante pour moi la lecture du billet et des commentaires car n’étant pas vraiment de la partie et ayant débarqué dans la « création » de site (il faudrait mettre dix paires de guillemets pour moi, je ne crois pas être à proprement parler une créatrice) progressivement : de la personnalisation à l’intégration puis à la conception.
En effet, c’est en manipulant des thèmes Dotclear pour les personnaliser que je me suis peu à peu rôdée à tout ça et qu’il m’arrive aujourd’hui seulement de concevoir des sites dont je ne connais pas encore l’outil de fabrication. Par conséquent, j’ai d’abord et pendant longtemps travaillé directement en html/css sur un serveur local avec une structure html globalement contrainte. C’est tout récemment que je me suis mise à un maquettage sur Illustrator sans trop me soucier de la structure des pages. Je crois donc avoir le souci inverse de celui que vous manifestez tous : il faut que je cesse de penser en termes de « comment » avant le « quoi » ;-)