Adobe’s new Muse: Website Code Generation

Adobe has been given a death notice by Steve Jobs – improve or die with a little help from Cupertino. Adobe appears to be taking that message seriously with a rash of improvements to the Flash Player, the Flex+ Air development system, the new Edge HTML Animator, the more agile yearly update schedule for most of its Creative Series [but big probems linger on the graphics side there], etc. And now Adobe appears to be introducing  its replacement for Dreamweaver – code named Muse, but yet to be branded but due out in 2012.

Here is Muse in its SiteMap planning mode of operation:

And here is why it is important. Start with a look see of a 6 page website developed in Muse.

Overview

Muse is a Web development systems that emphasizes Website planning and Graphics Design while generating all of  the  HTML, CSS, and JavaScript coding. Think of Muse as operating in the DTP mode of Adobe PageMaker or Quark Express for desktop publishing. So Muse allows designing not one but several Master pages that can be assigned [simple drag and drop operation] to any pages users add to a website. As well Muse has a good Overall Plan mode which allows for multiple Master layout designs that are easily edited and then changed.

So think of Muse as CSS-like stylesheets extended to HTML snippets+JavaScript widgets. One  Master page style can have a tab panel and vertical menu and individual paragraph and text stylings and another master page can have horizontal menus with a more classic paragraph/text styling. Both can be used on one website. Most important , Muse both previews and generates all the HTML+CSS+JavaScript code that works in all five major browsers – Chrome, Firefox, IE9, Opera and Safari. Adobe has shown whiffs of Muse in its Contribute and InDesign products and Microsoft Front Page did the same but with proprietary, IE-only extensions.

Standards Used

Adobe is taking advantage of the uniform old, up-to HTML4+DOM2+CSS2+JavaScript 1.6 standards that pervades  desktop Web Development now. It is committed to HTML5 as it generates code with HTML5 headers. But Adobe is also realistic – here are their words:

Today Muse is a great tool for creating websites with high quality visual design and no CMS integration. That will likely change as we add CMS integration and explore enabling creation of websites for mobile and tablets. Just like in the early days of Desktop Publishing when PageMaker could only create a small subset of all the possible typeset publications in the world, Muse today can only create a subset of all the possible websites. However, for a website in that subset, it’s a far more efficient tool than hand coding.

So Adobe is deliberately targeting a large  subset of what can be done currently in a rapidly evolving Web Development space. See Whats Out below for more details. But be advised that though HTML5 container is generated there are only a few HTML5+CSS3 codings to be found in [no canvas, no SVg, no CSS Media Queries, no Web database, etc.

What Works Well?
The Plan and SiteMap approach is simple and currently working pretty well. User can set site wide standards for margins, padding, background color/icons, favicon, hyperlink styling [still short of desirable options here]. Then they can set  several Master Page standards for character and paragraph styling; UI widgets for tabs, accordions and slideshows;  color swatches available; header, footer and gutter sizing but curiously not hyperlink styling. Also there are no hyperling traces among the pages showing how the various Web pages collaborate or interact. However,  Adobe InDesign users will feel comfortable with Muse because of its many InDesign like graphic conventions – most notably in-place editing of elements.

Muse has taken the the edit in-place approach versus the popular property list used in many devlopment IDEs like Adobe’s own Dreamweaver as seen in the screenshot to the left. This means the user can retype the name on a button directly or place an icon on a trigger in a slide show presentation. This approach is often faster than hunting down the property list item in say Dreamweaver or Eclipse.

Also the live in-place  approach allows Muse to narrow the options that fit for an object or element rather than the ID+property list approach which has users guessing what property to choose and then what of many property values that apply.

Muse does have hidden menu options indicated by a small blue arrow at the right top edge of the widget or text block. Clicking on this blue object icon reveals the options that can be changed for the associated object or element. This works reasonably well until users start to deep  deep embedding – like  widgets within  panels within page columns  [see here] in which case Muse currently can get hopelessly lost among the <div> containers.

But on the other hand , there are a host of design features that appear to work well such as character and paragrapgh styles, smart placement guides for text and objects, dynamic resizing of the page bottom as more elements are added. Again, Adobe InDesign users will feel at home.

There are a several additional features that are easy to implement – images in the page background with all the options for tiling, pinning an object/element to a position on the page so it never scrolls,  nad setting Anchor links  – all are trivial in Muse. Even better Muse remembers in a dropdown list all the pages on site and link addresses used on a page – very helpful for repeated link usage.

How Does Muse Render?

One of my major complaints about Dreamweaver has been  how badly it  can do  page previews – DW departs from WYSIWYG ever more.  Muse is on a mixed footing. First, there is the beta question. Will Adobe fix some of the glaring errors as seen in the screen shot on the left. Ignoring these errors [but that is what has been done for many years in the case of  Dreamweaver] – most text blocks and widgets are precisely rendered as designed.

But some menu configurations, added HTML blocks,  plus the some of the Composition widgets[typically a slidebox in a tab or a Presentation widget in an accordion panel on the right page column] presented problems. This is not good.

Consider that for Graphic Designers used to InDesign or  Quark Express rendering precision, WYSIWYG is the name of the game. These developers will not be happy if Muse’s preview and rendering descends to Dreamweaver TIPCE standard [This-Is Pretty-Close-Enough] of rendering. Currently, Microsoft with Expression Suite and Xara with Web Designer Pro  deliver very good rendering results.

So Muse will be on the line to deliver very good rendering fidelity in both its Preview mode and in the 5 major browsers So far  Muse shown improvements iover Dreamweaver’s preview  capability. As for the browsers the results were somewhat mixed. From time to time, Muse web pages would deliver anomalous results as in the screenshot of Google Chrome page. In general, if Muse is to win the allegiance of graphics designers, it will have to deliver impeccable rendering of webpages as designed.

What is Missing?

Remember, Adobe has said that Muse is a subset of all the things that can be done in Web development. So the best approach is to list what is missing to gauge how much of a subset Muse is:
1)forms are nowhere to be found;
2)ditto for databases and connections using AJAX or other client  to server APIs;
3)so no sign of tables or grids for displaying tabular data;
4)as noted Adobe is promising CMS capabilities but I suspect not in version 1.0 due out in early 2012;
5)limited use of HTML5 graphic capabilities like Canvas, SVG, or CSS3 animations;
6)limited use of HTML5 database, metadata, or local storage APIs;
7)limited connection to Adobe tools so far – only Photoshop and Fireworks for photo editing[contrast this with the vibrant Photoshop to HTML plugin industry with Medialabs Site Grinder 3 or Divine Elemente]. So this means such obvious Adobe tools such  as InDesign, Dreamweaver, Flash are just allowed connections through <objects> and <iframes>. Also such new Adobe Labs  software such  as  Adobe Edge for HTML animations, the Adobe Widget Browser tool, and Adobe Wallaby are still on the outside looking in;
8)So far no site templates like Adobe Dreamweaver or Xara Web Designer Pro;
9)surprisingly few 3rdparty widgets like Facebook, PayPal, GoogleMap, etc;
10)no sign of a Muse API  for 3rd party extensions/apps and add-ons.

With a David Letterman-long list of what is missing, it becomes  obvious that Muse is no replacement for Dreamweaver. In fact, as it currently stands, it is not a replacement for Adobe’s group web editing tool Contribute. Yet when one sees the success of  graphic-designer oriented tools like Xara Web Designer Pro and Photoshop Plugins  Site Grinder, there is clearly a market for better Web Design tools.

Whither Goes Muse?

I suspect that Muse will improve in 3 ways before release. First, the rendering fidelity  will be improved dramatically. Second, Muse will provide templates for various website designs and possibly character + paragraph styles. Third, Muse will provide more explicit  and two-way connections to other Adobe software including Dreamweaver and Contribute. However, HTML5,forms+ tables and database connections plus CMS capaibilities will be on the outside awaiting Muse 1.5 or later.

So potential Muse users will have to ask – how does Muse fit? Clearly for prototyping and site design a robust Muse is very attractive. The code then could be turned over to Dreamweaver or NotePad++ or NetBeans for finishing work – and lots of it for IT and data intensive sites. Regeneration or modification of a sites overall look and styling in Muse would present  an impedance mismatch when taken over to finishing tool especially if a Dreamweaver connection is cut+pasty.

However, when Muse adds a CMS capability – that is a new ballgame. Suddenly WordPress, Drupal, or Joomla – whichever is provided with the Muse connection gets a real bolt of energy. Adobe may go with its own proprietary CMS as the BusinesCatalyst connection seems to pave the way for. CMS capability means  Muse becomes a major player particularly if Adobe adds mobile and tablet capabilities to Muse. So Muse presents great potential and is worth watch for Web developers in general and Graphics Designer especially.