Adobe Muse

by cdwise 11. October 2011 09:03

Last week at AdobeMAX I took advantage of the session on Muse to see just how this new WYSIWYG editor from Adobe does.  The idea is that you can create a good website w/o learning any code. Since I see a lot of posts from people who are shocked and surprised to learn that if you use Expression Web or Dreamweaver you really do need to learn at least some basic html & CSS code. So whenever I hear of an editor that claims to be able to do that if I have the opportunity I like to check it out.

My first though when the Muse session opened was – GoLive lives, in the cloud. Yep, Muse is one of the cloud based applications that Adobe is releasing using Air for the desktop portion.  Like GoLive Muse is aimed at the print person who wants to repurpose their content, layout and whatever else they have for the web but also wants to add media and other interactivity. So let’s see how well Adobe accomplishes that goal. NOTE: I’m using Beta 3 for this review. Expanded images are available if you double click the thumbnails.

new-siteFirst thing we see in creating a new website is a very print looking dialog box. Defaults include margin, padding, minimum height and columns with gutters.

Maybe because Muse comes in large part from the InDesign team, a program that I am hopeless when it comes to using, I found the interface to be non-intuitive. During the workshop it seemed things were much easier than when I tried to create a site of my own.

My first thought was to set up body element styles and some global settings such as what font to use on the site so I didn’t have to repeat it over and over again.

style-optionsUnfortunately I could not find that option either using the page properties shown in the image above or the Style Options. Other than paragraphs, headings and the odd choice of marquee there does not appear any way to set global styles.

So I gave up at least for current purposes and went with what Muse wanted to do. I selected what appeared to be the body element and gave it a background color. Then with show header/footer selected inserted content into those two areas to the best of my ability to determine what those locations were. Everything in Muse seems to be “rectangle” or “box” driven so my content was inserted per the instructions into the appropriate boxes. I was even able to wrap text around one image so that my finished page looks like:

finishedMake sure that you look at the larger image and you can view the resulting site live at:  My Muse Test Site  Here is the code generated for what I intended to be in the masthead section:

<div class="clearfix grpelem" id="n3"><!-- group -->
<div class="grpelem" id="n4"><!-- image -->
  <img id="n4_img" src="image/muse-test1.jpg" alt="" width="227" height="130"/>
<div class="clearfix grpelem" id="n6"><!-- content -->
  <p id="n8">My Muse Testing Site</p>

Recreating this section using normal html5 I would have:

<div id="masthead">
<img alt="Muse" height="130" src="image/muse-test1.jpg" width="227"><h1>
My Muse Testing Site</h1>

The difference in the CSS is even more dramatic. There are 13 style definitions applied to the “My Muse Testing Site” by Muse starting with a css reset which was inaccessible by any method I could discover while working within Muse. Using my normal page layout methods there are 4 style definitions applied to the same text: body, container, masthead & h1.  Compare the code in my version of the Muse site done right demo that I created. Note there are a few differences between the two in function and font sizes since unlike Adobe Muse I prefer scalable units of measurements.  I also did not create a mobile version but I may do so at some point just to see what differences would be necessary, I suspect the changes would be to to less than 6 style definitions.

When it comes to file size the Muse page (including mobile styles and javascript used for rollovers) comes in at 131k while my version comes in at 17k. Both use images for the menu background but I optimized the one image I used for css based rollovers in my version and use no javascript to accomplish it. As a result I do have to add ids to the menu elements to get the "active page” indicator on the menu which needs to be put into a style block on the page instead of the external stylesheet but that eliminates the need for javascript which I consider to be a good trade-off, at least on small sites.

The other images used on the site are exactly the same. The other differences besides a very bad case of divitis is that my version uses semantic mark-up. In other words lists are marked up as either ordered or unorderd and headings are actually headings.

I was really hoping that Muse would do better than it is proving to do since I would like a good WYSIWYG editor to recommend to the folks who don’t want to learn code but unfortunately Muse will not be it. The reliance on absolute positioning and over use of divs combined with the difficulty of creating semantic mark-up on the content rules it out.  The good news is since Muse is a beta product there may still be time to fix the worst of its mark-up before it is released.



Comments are closed

Outstanding Hosting