Les WebDesigners devraient coder leur propre HTML/CSS
Publié le 7 July 2008, par Babozor dans la catégorie Développement, Gestion de projet, Graphisme, Organisation, méthodo..., Outils
Voilà un article fort intéressant, trouvé sur le blog de 37signals (éditeurs entre autre de BaseCamp, un merveilleux gestionnaire de projet simple et efficace) qui parle de design et d’intégration HTML/CSS… [la traduction est approchante…]
Le web est un monde de contraintes, la nature même de l’HTML ou du CSS nous donne la possibilité et nous encourage même à développer différents styles. Pouvoir comprendre et être capable de se plier à ces contraintes fait qu’un design semble naturel. Les designers qui travaillent directement au lieu de passer par un environnement simulé comme Photoshop sont plus à même de réaliser ce design naturel.
Si vous réalisez un jeu en flash ou une campagne media pour une nouvelle montre, vous pouvez vous permettre de dénigrer cet avantage. C’est le cas quand le côté graphique prend le pas, que vous partez d’une feuille blanche, où le ciel est votre seule limite. Vous voulez de pimpant, du brillant. Faire un design naturel n’est clairement pas dans vos prioriéts.
Mis à part cette niche, designer pour le web c’est principalement faire que cela marche plus que du blingbling. Les decisions de design qui comptent ont une prise directe sur les contraintes du média. Quels éléments de formulaire utiliser. Quelle taille de caractère utiliser. Comment faire une interface fluide. Ces décisions sont souvent peu prises en compte.
J’ai travaillé avec beaucoup de WebDesigners, qui faisaient l’abstraction de cette étape et juste rendaient leurs création pour être découpés et implémentées par des “HTML monkeys”.
Cela ne se passait jamais vraiment bien. Ce qui attirait l’attention était tout ce qui avait été designé via Photoshop: les images, les courbes, etc… le reste semblait transparent.
C’est pourquoi tous les WebDesigners chez 37signals travaillent directement leur HTML et CSS. Nous ne regardons même pas les designers qui ne mettent pas les mains dans le code.
Si vous êtes un webdesigner travaillant dans le web et que vous ne faites pas vous même votre implémentation, je vous recommande fortement de vous mettre au niveau.
L’article original est disponible ici… les commentaires sont aussi très intéressant à lire.
Je ne peux être que 100% d’accord avec l’article, et vous vous en pensez quoi?
le 7 July 2008 à 12h18
Euh, c’est être webdesigner que de ne jamais mettre les mains dans le code, et s’en tenir à Photoshop?
Je conçois bien sûr la différence entre webdesigner et développeur, mais un webdesigner qui ne connaît pas au minimum xhtml/css n’en est tout simplement pas un; c’est alors un graphiste.
Quand à l’utilité de photoshop dans le processus de création d’un site, elle me semble indispensable, du moment que le créateur prenne en compte au moment de réaliser la maquette sous toshop les impératifs et contraintes du design web (fluidité, lourdeur des images, etc).
le 7 July 2008 à 12h22
Et en parlant de lourdeur, la page de l’article-source chez 37signals est incroyablement pénible à scroller (sous firefox3 mac)…
le 7 July 2008 à 12h35
Est-ce-que réaliser une maquette complète d’un site à l’aide de Photoshop est vraiment indispensable à la création d’un site?
Le graphiste va prendre du temps à réaliser et peaufiner cette maquette pour ensuite la découper et reprendre du temps à la repenser façon xhtml/css.
S’il a la compétence pour, autant réaliser cette maquette directement les mains dans le code et ainsi gagner un temps précieux.
le 7 July 2008 à 13h02
Je suis du même avis que Clay. Ne pas confondre graphiste et webdesigner.
le 7 July 2008 à 13h33
Rien de plus pénible que de bosser avec un graphiste qui n’a pas de notions des contraintes web… Même s’il n’intègre pas ses maquettes lui-même, des connaissances en HTML et CSS (ainsi que de leur limites, et des problèmes de compatibilité inter-navigateurs) lui seront précieux.
De plus, même si je pense que Photoshop (ou équivalent) est toujours un passage obligatoire pour la création d’un design un tant soi peu recherché, lorsqu’il s’agit d’une application web (et non d’un site de contenu), alors Photoshop devient un outils superflu, puisqu’il nous fait passer du temps sur des aspects cosmétiques plutôt que fonctionnels.
le 7 July 2008 à 13h43
@Yann : J’entends souvent ce genre de réaction, mais je ne suis pas d’accord. On ne peux pas commencer par le code quand on s’impose une charte graphique digne de ce nom.
On peut par contre établir les premiers prototype en HTML/CSS (plutôt qu’avec un Visio ou Keynote), et là c’est du gain de temps : le client est pas content de la disposition de tel ou tel élément ? On Maj le CSS, on upload et hop en 10sec on peux avoir le retour. Avec un proto “bitmap” c’est beaucoup plus long.
Mais cela n’empêche pas qu’une phase de chartage graphique est, selon moi, indispensable.
Pour en revenir au sujet initial, je suis pas sûr qu’un bon DA doivent forcement être un bon intégrateur et vice versa, c’est deux métiers avec des approches et des contraintes différentes. Mais bien sûr le DA doit avoir en tête les possibilités du format web (et pour cela, aucun besoin d’être un dieu du code).
le 7 July 2008 à 13h49
Pour moi ton avis est trop extrême. Il y’a une très grande différence de compétences entre un webdesigner et un intégrateur XHTML/CSS. Pour moi ce sont deux métier liés mais aux compétences différentes.
Un webdesigner doit avoir un bon feeling du graphisme, des notions d’ergonomie, et savoir grosso-modo comment marche le XHTML/CSS pour ne pas réaliser des chartes graphiques impossibles à gérer ensuite.
Un intégrateur XHTML/CSS est un expert et connait les différences entre les navigateurs, connait le CSS par coeur et qui sait transcrire une image en code. L’intégrateur n’a pas besoin d’être un ergonome. Il peut être daltonien aussi.
Pour moi ce sont deux métiers différents avec un certain recoupement. Il existe des gens doués qui peuvent faire les deux, mais en général, chacun son métier, chacun sa spécialité, et le résultat n’en sera que meilleur.
le 7 July 2008 à 14h45
La question est intéressante. Pour ma part, je crois que le webdesigner se doit de connaitre le xhtml/css pour 2 raisons principales :
1 - Gain de productivité, s’il ne connait pas les limites et contraintes, l’implémentation derrière est longue et bien souvent le résultat est dégradé par rapport à la maquette photoshop originelle.
2 - Innovation et montée en qualification, en effet, en connaissant les contraintes, le webdesigner va apprendre à les contourner et faire appelle à sa créativité pour utiliser la technique au service de son design. Bien sûr cela prend plus de temps, mais c’est un réel + sur du moyen terme, maquette mieux intégrée et plus en adéquation avec le mécanisme d’utilisation finale du site.
le 7 July 2008 à 15h34
Ne confondez pas compétence et métier. Pourquoi un métier ne réunirai pas création graphique et intégration ?
le 7 July 2008 à 15h51
Le vieil adage: c’est en forgeant qu’on devient forgeron prend son sens dans n’importe quel métier et je dirais encore plus en matière de graphisme. Il faut dessiner, dessiner, dessiner sans arrêt afin d’obtenir un niveau correct et à partir de là dessiner et encore dessiner pour le garder. Il y a donc peu de temps à consacrer à programmer. Et je pense qu’un développeur a la même problèmatique. Un gars qui va faire les 2 ne sera ni bon en programmation (parce qu’il ne connait que les grandes lignes) ni en graphisme (parce qu’il ne pratique pas assez souvent), autant dire: c’est un looser.
Bon après il est clair qu’un graphiste qui n’en a rien à carrer de la programmation ben il faut qu’il fasse autre chose que webdesigner. Je pense que chacun son métier mais qu’un bon programmeur doit être capable d’expliquer ses problématiques à un graphiste qui doit les prendre en compte.
le 7 July 2008 à 16h03
La façon de classer le métier de Webdesigner de 37signlas est étrange, penser qu’un Webdesigner ne fait que du graphisme c’est peu banal.
Photoshop me sert autant que Notepad++, avec le premier je fais des jolies trucs, avec le second je les transposent pour être lu par un navigateur (XHTML/CSS) et avec ma tête j’applique les règles de base de l’ergonomie/usabilité.
Tout ça se mélange pèle mêle dès le début du projet, je couche idées et croquis sur le papier avant de passer de temps en temps à du zoning pour voir si tout fonctionne.
Le metier de Webdesigner c’est vraiment plus que du Photoshop !
Je dirais même qu’au niveau code ça ne doit pas s’arrêter au couple XHTML/CSS mais inclure les languages Javascript et PHP et si ce n’est pas être un codeur fou au moins avoir les bases pour s’en sortir quand par exemple on veut modifier un peu de Wordpress ou ajouter quelques fonctionnalités sympa à son site.
le 7 July 2008 à 16h19
Mu, je trouve que tu es un peu trop radical.
Je bosse sur Photoshop depuis 6 ans, sur le css depuis 3 ans.
Je ne suis pas graphiste mais j’ai tout de même un bon niveau Photoshop et je ne me sens pas looser du tout !
Après c’est une question de gout, mais histoire d’en avoir je suis beaucoup de blog traitant du graphisme et de galerie Web pour me tenir au courant des dernières tendances et je vais à des expos (graphistes, peintres, photographes, etc).
Le CSS… oui, je peux dire que je le connais par coeur, c’est un minimum après plusieurs années de pratique.
En même temps, je suis vraiment passionné par mon métier et qui plus est freelance ce qui m’oblige à avoir beaucoup de casquette, j’ai jamais bossé autrement mais j’imagine que c’est dans une agence qu’on rencontre un graphiste - un ergonome - un intégrateur - un développeur, pas ailleurs.
Ps : je fais une différence entre le Webdesigner qui doit connaitre le XHTML/CSS et quelques notions de javascript - PHP et le codeur comme Olivier.
le 7 July 2008 à 16h58
Manu>Radical moi? Oui c’est même ma marque de fabrique ^_^
Tu dis: “Je ne suis pas graphiste mais j’ai tout de même un bon niveau Photoshop et je ne me sens pas looser du tout !
Après c’est une question de gout, mais histoire d’en avoir je suis beaucoup de blog traitant du graphisme et de galerie Web pour me tenir au courant des dernières tendances et je vais à des expos (graphistes, peintres, photographes, etc).”
Sans préjuger de ton niveau en matière de graphisme (je ne connais pas) mais là comme ça en te lisant je dirais que tu es un peu comme moi: très interessé par le graphisme/dessin/photo, t’en fait un peu en amateur éclairé et tu as même un plutôt bon niveau par rapport au pékin moyen mais tu es loin mais alors très loin du niveau de ce qu’on appelle un graphiste. Parce que moi aussi je touche Photoshop depuis 10 ans, je te retouche une photo en moins de 2, je fais attention au cadrage, l’exposition et tout et tout quand je déclenche mais c’est pas pour autant que je ferais un bouquin de photo demain.
De même j’ai commencé à programmer depuis 20 ans sur mon Amstrad et même si je ne suis pas informaticien, je suis capable d’aller mettre les mains dans le camboui pour te faire un formulaire en VB sous Excel, trafiquer un peu de PHP ou de javascript, de l’HTML et du CSS mais ce n’est pas rapide. J’ai toujours besoin de référence parce que justement je ne pratique pas assez pour connaître par coeur.
Bien sûr l’HTML et le CSS sont des languages simples et en quelques mois et en pratiquant souvent tu arriveras à faire des trucs géniaux mais je ne suis pas sûr que tu arrives à te tirer de toutes les situations si tu ne passes pas ton temps dessus. De même qu’en graphisme si tu ne passes pas ton temps à jouer avec ta tablette tu ne progresseras plus.
le 7 July 2008 à 17h05
Toutes ces compétences mêlées plus ou moins se rejoignent aussi en fonction de la structure où travaille la personne.
Un freelance webdesigner devra avoir pas mal de compétences dans différents domaines, même s’il va recourir à des co-contractants extérieurs et aussi pourquoi pas utiliser des CMS open source.
Alors qu’un salarié pourra se spécialiser dans un domaine particulier, pour ne faire que de l’intégration par exemple (chose qui me paraît personnellement assez limitée, ne serait-ce qu’à long terme).
le 7 July 2008 à 17h11
“Ne confondez pas compétence et métier. Pourquoi un métier ne réunirai pas création graphique et intégration ?”
Exact.
C’est à mon sens toute la beauté et l’intérêt du métier de webdesigner; pouvoir marier le côté artistique, ergonomique et technique.
le 7 July 2008 à 18h38
En fait vous n’êtes pas d’accord mais votre discussions est à la limite du hors sujet. Pourquoi ? Parce qu’il faut replacer l’article de 37Signals dans le contexte de leur boîte : Getting Real.
Avez vous le le bouquin ?
À ce niveau la philosophie du truc c’est d’avoir une équipe la plus réduite possible donc le coup de c’est pas le même boulot ne marche pas, puisque c’est la même personne qui va entre autre designer et intégrer l’appli web.
Ça colle très bien à l’idée générale de Getting Real.
De plus se passer de photoshop (ou The Gimp que vous ne citez pas assez souvent :-p) c’est aller plus vite et être plus efficace : regardez les appli web de 37Signals : pas de fioritures, même pas de coin arrondis ! Du simple et de l’efficace.
De plus ça permet de voir les vrais écrans web directement, et de travailler et de se mettre d’accord ensemble directement dessus aussi.
Mais j’explique pas tout ça très bien, lisez ce bouquin, ça vaut vraiment le coup :-).
http://gettingreal.37signals.com/
le 7 July 2008 à 19h43
Merci pour le lien du bouquin, je vais y jetter un oeil.
Mu> effectivement tout dépend d’où on place le curseur en terme de “je touche ma bille à Photoshop”.
Et effectivement pour le graphisme appliqué au Web je suis bien mais c’est pas du http://www.shinybinary.com/
le 8 July 2008 à 09h14
Manu>tout à fait d’accord avec l’idée du curseur!
Très beau site, je suis pas forcément fan du style mais je ne peux qu’admirer la maîtrise.
Clay>ne connaissant pas les métiers du web je dis peut être des conneries mais dans mon esprit un webdesigner ne doit pas être un graphiste qui ne connait rien à la programmation, il doit s’y connaître suffisamment pour pas que le programmeur passe son temps à réparer ses conneries et de même le programmateur doit entièrement faire le site et donc maîtriser le PHP, le javascript, l’HTML, le CSS etc et pas juste intégrer le design. Je ne dis pas qu’il est impossible d’être bon dans les 2 en même temps mais comme toute connaissance on ne peut être un maître qu’en y passant son temps.
le 8 July 2008 à 10h38
Je suis d’accord avec toi, Mu.
le 11 July 2008 à 06h55
Tiens ? Rémi a pas répondu c’est bizarre ca
J’approuve aussi à 100%. Et même quand l’interface est faite sous toshop, si le designer qui l’a pondu connaît bien les contraintes du css, l’intégration est tellement plus facile.
On devrait forcer les web designer à se mettre au css je pense