Adobe entretient une relation intéressante avec les concepteurs de sites Web. Photoshop et Fireworks vous ont couvert du point de vue de l'image statique, mais les outils permettant de créer des sites Web en direct et fonctionnant sont une autre histoire. Flash n’est plus l’affiche des technologies Web modernes (bien au contraire), GoLive a suivi le chemin des dinosaures et Dreamweaver, bien qu’il soit encore largement utilisé, est considéré par beaucoup comme un gâchis bouffi.
Adobe s’intéresse particulièrement au domaine de la conception Web pour les non-développeurs. Ils se sont donné pour mission d'intégrer le monde de la création de sites Web professionnels au vaste marché des concepteurs qui ne peuvent pas écrire de code. Jusqu'ici, ils ont en grande partie échoué à atteindre cet objectif (Projet Rome, ça vous tente?). Leur dernière tentative, Adobe Muse, a finalement quitté la version bêta et est disponible dans le cadre du nouveau service Creative Cloud d’Adobe (50 USD par mois) ou en tant que produit autonome (15 USD par mois). Muse vaut-il votre temps et votre argent? Cela vous permettra-t-il vraiment de créer des sites Web de niveau professionnel sans codage? Continuez à lire pour le découvrir.
Un long moment à venir
J'ai beaucoup écrit sur le chemin parcouru par Adobe pour libérer Muse. En 2010, j'ai expliqué pourquoi le projet Rome était loin de tout ce qui était utilisable par les designers sérieux. La plupart des idées de ce projet ont été intégrées à la version bêta de Muse, qui a lancé un discours qui disait pourquoi Adobe ne comprend pas les concepteurs Web.
Compte tenu de mon histoire sur le sujet, cet article mérite-t-il même d'être lu? Est-ce que je ne vais pas, comme on pouvait s'y attendre, frapper Adobe et Muse et vous dire d'utiliser Flux ou du code à la main?
Oui et non. Est-ce que je pense que Adobe a trouvé la solution que l'industrie attendait? Pas à distance. Cependant, Muse a beaucoup de mérite. Il y a beaucoup de choses que j'aime vraiment à ce sujet en plus de ce que je pense pouvoir améliorer. Je dirai ceci: Adobe est plus proche que jamais. Pour voir pourquoi, lisez la suite.
Un début faible
J'ai téléchargé mon essai de Muse de trente jours, je l'ai lancé, j'ai choisi de créer un nouveau site et je me suis retrouvé à regarder cette fenêtre.
J'étais déjà déçu. Dès la première étape, Adobe me force à adopter un état d'esprit statique. Les concepteurs d’imprimés trouveront peut-être cela familier, mais ils négligeront de manière flagrante l’état actuel de la conception Web, qui se déplace rapidement dans le sens des largeurs de fluide et des points de rupture fondés sur les requêtes de supports (conception Web réactive).
Voici un autre problème que j'ai eu avec ce dialogue: il n'y a pas d'unités. La largeur de page par défaut qui apparaît est 960. 960 quoi? Des pixels? Pouces? Unités de sangle? Les vétérans expérimentés du Web vont supposer qu'il s'agit d'une valeur basée sur les pixels, mais cette application n'est pas conçue pour les vétérans expérimentés du Web, elle est conçue pour les débutants qui ont besoin de plus d'informations que celles proposées ici.
J'étais également confus quant aux options de marge et de remplissage proposées. Étais-je en train de définir des valeurs globales pour les marges et le remplissage? Pourquoi voudrais-je faire cela? Lorsque je code à la main, je réinitialise généralement ces valeurs à zéro, est-ce ce que je devrais faire ici? Il s'avère cependant que ces valeurs sont pour votre conteneur principal. Encore une fois, un peu plus d'informations iraient un long chemin.
Ce n'est pas tout mauvais cependant. J'aime vraiment que vous puissiez créer des colonnes dès le départ. En réalité, cela équivaut à gifler certains guides sur la page, mais c'est une bonne chose. J'aime que la mise en place d'une grille ne signifie pas que je suis obligé de la respecter en toutes circonstances.
Rencontrez Muse
L’interface Muse est suffisamment familière pour que vous sachiez vous déplacer si vous utilisez d’autres produits Adobe. Il y a un panneau d'outils positionnables sur la droite, une bande de boutons et d'options en haut et votre toile principale au centre.
L'application a été construite dans AIR, ce qui m'énerve en tant qu'utilisateur Mac. Le résultat est quelque chose qui semble presque natif mais se sent assez différent d'une application Mac dédiée. Cela conduit à plusieurs bizarreries frustrantes. Par exemple, le panneau principal ressemble beaucoup à quelque chose que vous verriez dans Photoshop.
Par conséquent, vous vous attendez à ce qu'il fonctionne de la même manière. Malheureusement, ce panneau ne peut pas être ancré sur le côté de l'écran comme vous en avez l'habitude, ce qui signifie qu'il est toujours gênant. Vous pouvez le réduire à une bande d'icônes, mais comme il est réduit à gauche, la position par défaut du côté droit devient un point faible.
Peu importe, vous pouvez simplement le déplacer vers la droite et le garder réduit pour économiser de la place. Comme dans Photoshop, cliquer sur une icône ne développe que la partie du panneau, oh, attendez, non. Au lieu de cela, il agrandit le panneau entier, ce qui va totalement à l'encontre de l'objectif de la bande de boutons.
En vous déplaçant ci-dessous, vous pouvez voir certaines des options et des boutons situés en haut de l'interface. Il existe trois modes d’affichage principaux: le plan vous montre toutes les pages d’un contour, le design est le lieu où vous construisez votre bâtiment et la prévisualisation est un aperçu de la prévisualisation Web en direct de votre site (appuyez sur Commande-Maj-E pour afficher navigateur).
Près du centre de ce panneau supérieur, vous trouverez ce que serait normalement votre barre d'outils flottante contenant les éléments suivants: Outil de sélection, Outil de rognage, Outil de texte, Outil de zoom, Outil de main et Outil Rectangle. C'est également à cet endroit que vous appliquez différents styles, ajoutez des liens, etc.
Construire une page Web
À partir de là, le flux de travail est assez intuitif. Si vous voulez placer du texte, vous saisissez l'outil texte. Si vous voulez dessiner une boîte, utilisez l'outil Rectangle. C'est si facile. En tant que codeur, cela me fait peur que je ne puisse pas définir manuellement les paramètres des éléments que j'ajoute, mais je suppose que cela simplifie les choses. Par exemple, si je souhaite définir un paragraphe de 300 pixels de large, il me suffit de le regarder dans les yeux ou d’utiliser ma grille. Et oubliez le modèle de boîte, il vous suffit de placer les objets où vous le souhaitez.
Muse s'intègre très bien à Photoshop et à Fireworks.Vous pouvez placer un fichier à partir de l'une de ces applications, revenir en arrière et apporter des modifications. Les modifications seront mises à jour automatiquement dans Muse.
Une des choses que je trouvais un peu maladroite était de travailler avec la toile. Je n'arrivais pas à comprendre comment sélectionner simplement le fond. En fin de compte, il suffit de cliquer dessus, mais il n'y a vraiment aucun retour visuel pour vous dire que vous avez bien compris.
À partir de là, vous pouvez appliquer un remplissage ou une image d’arrière-plan avec toutes les options que vous attendez. Si vous travaillez avec un objet, vous pouvez appliquer des dégradés et des ombres, définir des états de survol, contourner les angles, ajouter des liens vers d'autres pages, etc.
Le flux de travail de Muse: le bon et le mauvais
Adobe a beaucoup de choses sur Muse. Il est très facile de se lancer et de courir. J'ai compris à peu près tout ce dont j'avais besoin sans aucune instruction extérieure. Je pense que les non-développeurs l'apprécieront vraiment pour quelque chose de plus puissant que le WYSIWYG typique sans être aussi accablant que quelque chose comme Dreamweaver.
À tout le moins, il s'agit d'un excellent moyen de créer des maquettes de sites Web. Sa fourchette de prix le place dans une zone quelque peu concurrentielle avec des services de wireframing en ligne offrant beaucoup moins.
Maintenant, du point de vue du codeur, je changerais beaucoup de choses. Je sais que l'application n'est pas conçue pour les codeurs et qu'elle devrait peut-être rester ainsi, mais cela ne signifie pas qu'elle ne devrait pas partager les constructions utilisées pour créer des pages Web. La métaphore est cassée. Adobe doit cesser de créer des applications de mise en page avec des fonctionnalités Web pour créer un système frontal visuel pour le processus de codage.
Travailler avec des objets devrait être beaucoup plus étroitement lié au travail avec CSS que ce n'est ici. Je devrais pouvoir définir ma couleur avec RGBa, définir les marges et le remplissage d'un bouton, définir la largeur d'un paragraphe sur 30% de la fenêtre du navigateur et créer une famille de polices, mais je ne peux rien y faire. Adobe a choisi la familiarité et la prétention plutôt que les concepts de conception Web et je pense qu'ils sont du mauvais côté de cette barrière.
Le code
Après avoir appris à connaître l’interface, j’ai sorti une page très simple pour pouvoir voir à quoi ressemblait le processus et, plus important encore, jeter un coup d’œil sur le résultat. Voici ce que j'ai trouvé (cliquez sur l'image pour voir la démo en direct):
Lorsque vous consultez la démo, cliquez sur Afficher le code source pour pouvoir consulter le code généré. La conception de la page est restée simple pour une raison: je pouvais voir si le code résultant était également simple. Une page comme celle-ci utiliserait une quantité minimale de codage manuel et devrait être assez facile à trier si vous pouvez écrire du code ou non.
La bonne nouvelle est que Muse exporte du HTML et du CSS. Heureusement, la seule idée de Flash est morte avec Project Rome. De manière prévisible, le code résultant est extrêmement lourd. En utilisant le menu de navigation par défaut, chaque lien utilise un élément de la liste et non un, mais deux divs.
Dans la plupart des cas, les noms des classes sont simples, mais les noms d’identité sont inutiles et vagues (exemple:? U154-4?). Mais dans l’ensemble, c’est loin du pire résultat WYSIWYG que j’ai vu. Je peux encore facilement le lire et voir la structure. Il est certainement bourré de poils, mais c'est juste assez pour faire tourner les yeux d'un codeur au lieu d'une abomination qui le poussera à gronder votre existence même.
Alors ça vaut le coup?
Dans le titre de cet article, j'ai promis de vous dire si Muse valait 15 dollars par mois. Il est difficile de répondre à cette question simplement parce que je me demande à qui le produit est destiné. Si vous envisagez de construire des sites pour gagner votre vie, ce n'est pas la voie à suivre. Si vous voulez simplement gérer votre propre petit site, le fait d’avoir des frais mensuels pour posséder le logiciel n’est pas vraiment une perspective excitante.
Bottom Line: Muse vaut de l'argent? à court terme. Au cours des premiers mois, vous aurez un excellent logiciel avec très peu de dépenses. Cependant, en utilisant le modèle d'abonnement, après deux ans, vous aurez payé environ 360 $ pour Muse. À mon avis, cela repousse la limite supérieure de ce que le logiciel vaut vraiment à ce stade. Cela peut changer à mesure que les mises à jour arrivent, mais s'il n'y a pas d'amélioration significative, cela ne semble tout simplement pas en valoir la peine à long terme lorsque RapidWeaver est à 80 USD et Flux à moins de 150 USD (les deux options uniquement Mac, malheureusement).
Comment Adobe pourrait-il l'améliorer?
Il est intéressant que je dise que RapidWeaver pourrait être une meilleure solution. Grâce à sa structure rigide pilotée par des modèles, RapidWeaver est loin de tout ce que vous utiliseriez pour créer un site à partir de rien. Cependant, Rapidweaver dispose d’un riche marché de plug-in tiers capable de le pousser au-delà de la rigidité par défaut. Avec Blocks and Stacks, Rapidweaver devient un impressionnant constructeur de sites au format libre.
Cela me donne une idée de la façon dont Muse pourrait être amélioré avec très peu d'effort. Adobe devrait prendre une page du livre RapidWeaver et ouvrir un marché où les utilisateurs peuvent fournir des plugins. De cette façon, les utilisateurs décident de ce qui manque et de la manière dont ils devraient être intégrés. Si je veux utiliser Muse pour créer des pages Web réactives, je téléchargerais simplement un plug-in qui ajouterait la fonctionnalité manquante. Certes, je préférerais que Adobe comprenne simplement le secteur de la conception Web et crée un outil qui corresponde mieux au marché, mais au lieu de cette option, je prendrais un marché du type plugin similaire à RapidWeaver.
Qu'est-ce que tu penses?
Maintenant que vous avez vu ma version de Muse, j'aimerais entendre la vôtre. Pensez-vous que Adobe a enfin cerné l’idée de la conception Web sans code ou continue-t-il à utiliser des solutions qui ne font pas avancer le secteur?
Plus important encore, comment Adobe peut-il recentrer ses efforts et créer un produit que vous pourrez débourser avec plaisir à 15 $ par mois?