Ce billet de Craig Grannell et daté du 18 août 2011 a été traduit de l'américain par Mark Bean et Michaël Bechler 

En tant qu'éditeur de Webagoo, nous sommes confrontés de manière quotidienne aux problèmes de webdesign, d'intégration, de compatibilité, et ce, d'autant plus que nous avons axé Webagoo sur la problématique du "gain de temps" donné à nos utilisateurs, qu'ils soient techniciens du web ou utilisateurs finaux. Nous avons trouvé extrêmement intéressant de commencer cette semaine consacrée aux graphistes/webdesigners par cet article. L'avenir nous dira si Adobe ou un autre sera de taille a repenser les outils dédiés aux webdesigners, qui ont du évoluer vers un métier que certains détestent, celui de "codeur". N'hésitez pas à nous faire part de vos observations, vos suggestions, voire vos rêves inavoués concernant cet épineux sujet. Bonne lecture

P.S. Un grand merci à Mark patron de MarkBeanFormation, sans qui cette traduction aurait eu beaucoup moins de pertinence ;-) (Si vous avez besoin de traduction ou de formation, contactez-le de ma part, il distribue l'excellent outil Dyned)

M.B. 

Des concepteurs et développeurs ont parlé avec Craig Grannell des outils qu'ils utilisent pour créer des sites web; ils demandent un plus en rapport avec les pratiques d'aujourd'hui. Il semblerait que l'outil parfait n'existerait tout simplement pas encore, réalité surlignée par la campagne « Project Meteor ».

En théorie, tout ce dont vous avez besoin pour créer des sites web c'est un ordinateur portable et une connexion internet: pas besoin d'investir dans des logiciels couteux. En pratique, la facilité d'utilisation et le gain de temps caractéristiques des outils de design web les plus courant rendent ces derniers indispensables pour tout web designer face à un délai. Mais les utilisateurs sont-ils satisfaits de ce qui est disponible sur le marché ? Nous avons sondés d'éminents web designers et le consensus a été que, même si des logiciels courants comme Photoshop, Fireworks et Illustrator peuvent être utile, voir vital pour leur travail, ceux-ci sont ressentis comme étant loin de la perfection. En fait, il semblerait qu'actuellement, pour les web designers avec lesquels nous avons échangé, l'applicatif de web design parfait n'existe tout simplement pas.

Fais avec

« Ces temps-ci j'utilise Adobe Fireworks pour créer, » dit Nathan Pitman, DG de NineFour.

Il fut un temps où il aimait l'applicatif comme un frère numérique; maintenant il le vit plus comme un collègue gênant avec lequel il faut s'accommoder, tout en espérant l'arrivée de quelqu'un de meilleur pour le remplacer. « Une série de nouvelles versions avec quasiment aucune attention accordée aux vrais besoins des créateurs professionnels du web m'a laissé dans une position où je 'fais avec', dit-il avec tristesse.

Le mécontentement de Pitman concernant Fireworks vient en partie de l'incapacité du produit de rester à jour des tendances actuelles. Il dit que Fireworks est « né dans une époque de tables et de spacers GIF, et qu'une bien trop grande quantité de son workflow, de son interface et de son toolset sont ancrés dans cette ère. » Fireworks n'est guère seul. Concepteur d'interface utilisateurs Dan Rose travaille principalement avec Photoshop « pour sa souplesse », mais est conscient du fait que c'est « un éditeur de photo à la base » ; et il n'est pas un grand fan de la locomotive d'Adobe – il l'utilise tout juste « en attendant l'arrivée de mieux ».

Paul Cripps, designer et développeur, collègue de Pitman, a en grippe bon nombre d'aspects de Photoshop. Il laisse entendre que « pour des web-based layouts, la pixelisation et le rendu que Photoshop rajoute lui donnent envie de s'arracher les cheveux » ; remarquez, il n'est pas un grand fan de Fireworks non plus, précisant que malgré ses capacités de prototypage, ses couches et ses états, et sa structure supportant un graphisme et vectoriel et bitmap, le logiciel est fortement pauvre en matière de solutions typographiques, ne sait pas gérer des layouts fluides et a une quantité alarmante de code bloat. Il rajoute, « Je m'aventurerais à dire que je n'utilise qu'un quart de ses fonctionnalités. » 

Retour en arrière, pas en avant

D'autres designers font echo à Pitman concernant les outils de design d'Adobe et le fait qu'ils sont ancrés dans une époque révolue. Tom Muller, directeur de helloMuller Ltd, est à fond dans la typo, aspect dont de nombreux web designers prennent finalement conscience. Les polices web permettent maintenant d'inclure plus que la toute petite poignée de polices standards dans les sites, mais les applications de design existantes font de la typo un vrai champ de mines. « Il y a toujours cet incontournable obstacle dans le développement  – ça a de la gueule dans Photoshop, mais est-ce que ça sera correctement interprété en code » se plaint Muller. « Avec @font-face, Typekit, Fontdeck, Google Fonts et tutti quanti, nous avons plus de souplesse en matière de typo, mais il y a une barrière au stade du graphic design : bien que je puisse charger un Google Font et l'utiliser dans Photoshop, ça reste toujours différent du rendu dans le navigateur ».

Développeur Elliot Lewis, qui dirige No Two The Same, est encore plus sévère dans son évaluation : précisément, il ne pense pas que Fireworks et Photoshop font du sur-place, mais d'une certaine manière sont en fait en train de faire marche arrière. « Quand j'ai commencé à créer des sites web il y a une dizaine d'années, j'utilisais Photoshop – l'outil de par excellence des graphic designers – et un éditeur de texte. On découpait des couches et on utilisait JavaScript pour les états. « Maintenant », dit-il, « j'utilise Illustrator pour le layout, Photoshop pour éditer les images et pour les effets "spot", et Coda pour coder les mark-up manuellement. Mais avec les sprites CSS et les autres aspects modernes de web design, le process de design n'est plus interprété facilement en code ».

Problèmes de workflow

Lewis est d'accord, le problème principal lié aux outils existants, c'est le workflow: « Le design est devenu un visuel approximatif. Il y a une étape intermédiaire, la préparation des graphismes pour qu'ils soient prêts pour le web. Coins arrondis, ombres portées et gradients doivent être recréés en code et diffèrent en apparence entre l'outil de design et le navigateur ». Et le problème s'étend au-delà des graphic designers, aux développeurs. Morgan Adams de Adams Immersive estime que le modèle Photoshop-to-code est acceptable « si le designer et programmeur ne font qu'un », mais si ce n'est pas le cas, « un designer qui utilise Photoshop peut manquer de conseils essentiels sur la façon dont le design devient code, et quels sont les facteurs qui rendent un design fiable et souple quel que soit le navigateur ».

Darren Miller, directeur de DM Logic, est d'accord avec cette évaluation. Il reçoit régulièrement des fichiers Photoshop, Illustrator et Fireworks pour les transformer en sites, et ce n'est plus un processus qui se déroule sans anicroches : « Je ne peux pas regarder les choix de style qui ont été fait par un designer et les convertir directement en CSS. Je dois convertir vers l'équivalent le plus proche ; ceci engendre du temps perdu dans des discussions en amont du travail ou dans la justification auprès du designer de variations ultérieures ». 

Directeur Général de Tempered Vision Ltd, David Dixon trouve lui-aussi que les apps existantes lui font perdre son temps: « Une partie de mon travail est bien trop souvent portée sur 'la correction' de problèmes de design, là où les dimensions des pixels ne sont pas respectées ou là où l'anti-aliasing d'un objet pointe le bout de son nez repoussant. Pour cette raison, un design sous Photoshop devient moins un document de travail, et plus une collection d'objets devant être déplacés dans des fichiers séparés avant d'être exportés ».

Echapper au carcan d'une pensée rigide

Andy Budd, directeur général de Clearleft, est convaincu que les outils existants, au-delà de paralyser le workflow, limitent aussi le potentiel du design en ligne souple: « Ils fonctionnent basés sur ​​l'hypothèse d'une taille de trame fixe et d'un layout au pixel près. Mais les sites web peuvent être consommés sur tout support allant d'un écran de téléphone mobile jusqu'à un affichage sur écran énorme. La nature rigide des outils entraine une réflexion beaucoup plus rigide ». Les meilleurs designers, dit-il, créeront plusieurs documents pour tester à quoi ressembleront les designs sur une variété de tailles d'écran, mais même ça c'est un "hack"et "oblige les développeurs à faire de bien grosses hypothèses lorsqu'ils traduisent des designs de largeur fixe vers le monde fluide du web".

Dans le passé, il ya eu des arguments pour qu'Adobe fusionne ses outils, en faisant passer les aspects web de Fireworks dans Photoshop, mais Dan Ruffle, graphiste senior chez Metakinetic, n'est pas convaincu: « On pourrait illustrer, retoucher, animer, coder et livrer sur le web avec une seule app, mais elle serait gigantesque et coûteuse; elle essayerait d'être tout pour tout le monde et ne réussirait pas à faire une seule chose vraiment bien ».

Au lieu de cela, la plupart des designers réclame à tutête quelque chose d'entièrement nouveau – qu'Adobe reconnaisse les besoins des développeurs web et reprenne entièrement Fireworks, ou qu'un développeur indépendant aux dents longues relève le défi et fonce. Ce courant n'est pas nouveau. En 2009, le designer Jon Hicks a déclaré à la fois aimer et haïr Fireworks, et a médité les alternatives; Pitman, aussi, a expliqué comment il avait perdu toute foi dans l'app, et Jason Santa Maria a étudié la possibilité d'un produit qui offrirait « à la fois rendus précis et aperçus de ce à quoi ressembleraient les éléments de page, mais avec certains des outils WYSIWYG dont disposent les apps de design assisté par ordinateur ».

Recherché: événement générateur d'extinction

La dernière aventure de cet espace est Project Meteor, une émanation de Creative Assembly, un meet-up de designers basé à Bracknell dans le Berkshire (GB). « Le projet a vu le jour en raison de problématiques communes rencontrés par notre groupe de designers et de développeurs », explique Dixon. « Nous utilisions chacun une application de base - souvent Adobe - , mais indépendamment de notre choix d'application, nous partagions tous un problème commun: une incapacité à créer des designs applicables pour le web sans avoir à lutter contre le workflow contre-nature de l'app ».

Reprenant les arguments de Jeffrey Zeldman dans An InDesign for HTML and CSS?, où il dit qu'un équivalent d'Illustrator et PageMaker pour CSS, HTML5 et JavaScript est « impossible », en raison du fait qu'HTML5 « ne sait pas ou se moque de ce à quoi un contenu peut ressembler » , Project Meteor ne préconise ni de rentrer des outils de graphic design dans Dreamweaver par force, ni de proposer un moyen de débiter du code prêt à l'emploi pour le web. Au lieu de cela, Project Meteor exige un environnement de layout flexible qui correspond de manière précise à ce que l'on verra plus tard dans le navigateur. « Et comme les problématiques que nous avons rencontrées étaient courantes – pas seulement parmi nous, mais aussi pour beaucoup d'autres web designers et développeurs reconnus – nous avons pensé qu'il était temps que quelqu'un commence à s'exprimer , en espérant donner quelque visibilité aux problèmes rencontrés quotidiennement par la plupart des web designers », poursuit Dixon.

À court terme, Lewis espère que Project Meteor va susciter de la discussion et « mesurer si nous sommes une petite partie de la communauté Web qui se plaint, ou s'il y a une véritable demande pour une app de web design correcte », tandis que Miller espère que le projet va « convaincre les éditeurs de logiciels qu'investir dans ce type de produit serait rentable ».

Concevoir la web app parfaite

En parlant aux créateurs de Project Meteor et à différents acteurs ailleurs dans l'industrie, il est intéressant de voir combien les listes de souhaits se recoupent. Les déclarations de Budd se font l'écho de déclarations susmentionnées lorsqu'il argumente que nous « ne voulons pas d'un autre outil WYSIWYG qui génère du HTML / CSS de production », mais dit qu'un développeur pourrait néanmoins apprendre à partir d'apps comme Dreamweaver : « Cela vous permet de définir des cellules de tableau en largeur fixe ou flexible – ne serait-ce pas merveilleux si un outil de design vous permettait de faire la même chose avec des colonnes, des images et des éléments d'interface utilisateur ? Un designer pourrait définir le comportement désiré d'éléments avant de commencer et voir comment le layout change en fonction des différents paramètres d'écran. »

Budd ajoute qu'il serait utile que l'outil inclut des éléments d'interface utilisateur pré-définis qui accepteraient des entrées utilisateur et pourraient être liés à des écrans dans le fichier de design, ce qui « vous permettrait de générer un prototype à partir de votre composition ».

Adams développe les pensées antérieures de Budd concernant la nature transversale du Web design moderne recoupant plusieurs dispositifs et affirme qu'une app 'parfaite' aiderait également dans ce domaine: « Chaque plate-forme, chaque navigateur et chaque version se comportent différemment et ne se ressemblent pas. Idéalement, nous serions en mesure de voir et de tester chaque navigateur en temps réel, directement au sein d'une application de design ». Il aimerait voir un système où, en opérant un changement, on verrait instantanément comment cela impacte le design dans un iPad, un lecteur d'écran, ou un PC d'entreprise derrière un pare-feu bloquant JavaScript. Rose veut aussi voir certains éléments, éléments que nous « avons persuadé Photoshop de faire », devenir des valeurs par défaut, y compris : « des Pixel nets, des éléments qui se travaillent en snap et qui s'alignent, et une fonction CSS sprites ».

Une base WebKit

Pour la plupart, cependant, un moyen de travailler sur un design qui montre plus précisément à quoi ressemblera le produit final serait le nec plus ultra. "Tout ce que je veux, c'est un outil simple et léger, qui imite à la perfection les navigateurs modernes", dit Cripps. 
« La typo devrait avoir un rendu et réagir comme elle le fera sur une page web, les objets devraient envelopper en conséquence, et il devrait y avoir la possibilité de construire des layouts fluides."

Designer d'expérience utilisateur, Aral Balkan est d'accord: «L'app de web design parfaite doit être issue du web. Elle épouserait la philosophie 'faire le design dans le navigateur' et l'étendrait avec des outils visuels que les designers peuvent utiliser. En 2011, y aurait-il jamais peut-on imaginer une raison de créer un dégradé bitmap dans Photoshop, pour en faire un dégradé CSS plus tard? Quand je crée un dégradé visuellement, il devrait me générer le dégradé CSS dans les coulisses. Je devrais pouvoir dessiner avec HTML, CSS, Canvas et SVG. Je devrais être en mesure d'animer avec des animations CSS et jQuery. Tout ceci pendant que j'utilise des outils visuels performants semblables à ceux que j'ai dans Photoshop ».

Cette philosophie, pense Miller, suggère une app qui est "une trame WebKit entourée par une interface native d'outils de design". Toute chose rajoutée à la trame, dit-il, serait rendue en HTML et CSS ou en tant qu'image bitmap insérée. « Je ne voudrais pas voir du mark-up exposé aux utilisateurs, car il contiendrait du code supplémentaire dont l'app aurait besoin », dit-il, « bien que la possibilité de pouvoir inspecter un objet et d'utiliser son code comme point de départ pourrait représenter un gain de temps énorme ».

Budd revient à Adobe, objet d'une certaine colère tout au long de cet article, et note que peu de personnes estiment que ses apps manquent de fonctionnalité – elles manquent simplement de pertinence pour le web design moderne : « Fondamentalement, je pense que ce dont nous avons besoin, c'est un outil de design qui prend les fonctions créatives de Photoshop et

Fireworks, les marrie avec les fonctions interactives de divers outils de prototypage, et affiche le résultat de manière souple, comme sur le web ».