September 27, 2012

Have you looked at Muse output lately?

There is a lot of misinformation going around about Adobe Muse. Much of this misinformation is rooted in evaluations of early Public Beta versions of the software which were released many months before the initial release of Adobe Muse 1.0. Adobe released Adobe Muse 2.0 in August, 2012 and the code is quite different from those early pre-1.0 Public Betas.

You Design, We Code

The promise of Adobe Muse is that it allows Designers to design without worrying about the code. Adobe keeps this promise with frequent releases of Adobe Muse with new features for Designers and significant code improvements.

Muse is a tool that targets traditional Designers so that they do not have to know about code. Therefore, we put a lot of emphasis on creating features that are familiar to Designers such as master pages, paragraph and object styles, ruler guides and other graphic design paradigms. However, as engineers and developers ourselves, we care a great deal about the quality of code that Muse generates. From the very beginning, our mantra has been “Please the Designer, Honor the Developer.” To that end, we continue to make significant improvements to the code that Muse generates. All you need to do to obtain those improvements is to re-publish your site with the latest version of Muse.

How do we evaluate code improvements?

We are committed to improving the HTML/CSS/JavaScript code that Muse generates and we evaluate it based on the following criteria:

  1. Cross-browser compatibility
  2. Load performance of the site
  3. Accessibility and Usability

We also work to ensure all of our code follows good SEO practices and guidelines whenever possible.

Frequent Releases

Adobe Muse is offered via subscription, which allows Adobe to release updates as soon as they are ready. Adobe Muse 2.0 was released in August, 2012, three months after the initial Adobe Muse 1.0 release and it is packed with a number of new features for Designers as well as significant code generation improvements. Latest Features

Some Benchmark Metrics

We frequently put Muse through a series of automated tests to not only find bugs and improve stability, but also to analyze the output. Let’s look at some of the metrics collected for Adobe Muse after publishing a collection of sites using the various public releases of Adobe Muse.

One measure of output is the total size of the site including images, HTML files, CSS files, Javascript files and all other assets. There are limits on how small a site can be made without sacrificing rendering quality, but the reasoning goes that the smaller the total data, the less time it takes to load in your browser. Similarly, the fewer the number of files, the fewer the number of http requests to load the contents of those files.

Benchmark metrics across Adobe Muse releases
Metric Beta 5 Beta 6 Beta 7 Muse 1.0 Muse 2.0 Avg. Improvement
Total Output Size 7643K 7764K 7947K 6915K 5966K 22% smaller
Total HTML Size 1498K 1549K 1527K 1428K 922K 38% smaller
Total Image Size 4239K 4231K 4224K 4208K 3781K 11% smaller
Total JavaScript Size 222K 224K 226K 226K 193K 13% smaller
Total Number of Images 547 541 433 187 109 80% fewer
Total Number of JavaScript Files 10 10 10 10 8 20% fewer

Note: Averages are from a collection of customer sites published from the listed releases. Results vary based on the design of the site.

This table of metrics shows that there is a concerted and continual effort to improve load times by decreasing the overall size of the site as well as the total number of files generated.

Specific Code Improvements

What specific changes led to these size improvements? That will be the subject of my next post.

11:33 PM Permalink
September 25, 2011

Code Improvements in Muse Beta 3

Today we released the Beta 3 update of Muse. Muse enables graphic designers to create professional HTML websites without writing code. Muse has generated an enthusiastic response from the design community with over 260,000 designers downloading it in the first 40 days. We’ve very excited at the number of people who have been participating in our support community, logging bugs, asking questions and giving feedback.

When we announced this technology last month, people in the web community voiced strong concerns about the quality of the code generated by Muse. The Muse team has taken that feedback to heart.  To that end we are very aware the HTML/CSS/JavaScript code generated in the first beta of Muse had lots of room for improvement.

The Beta 3 update includes improvements in two key areas:

  1. Fixes to over 40 bugs discovered by the Muse user community. For a full list of bugs fixed visit
  2. Some initial improvements in the code Muse generates which help reduce page load times and data usage of websites created with Muse.

These improvements to code are a first step in an ongoing process that will continue through the beta and subsequent releases of Muse. Existing Muse sites can be improved by downloading Beta 3 from and simply re-exporting the site.

The rest of this post will focus on the details of the code improvements in Beta 3.

How do we evaluate improvements to code?

We are committed to improving the HTML/CSS/JavaScript code Muse generates and evaluate it using several criteria including—

  1. Cross-browser compatibility
  2. Load performance of the site
  3. Search Ranking via SEO
  4. Accessibility and Usability

The primary focus of code improvements in Beta 3 are around cross-browser compatibility and reducing page load times and data usage.

Note: All results are based on tests conducted by the Muse engineering team by comparing Beta 2 vs Beta 3. Tests were conducted using three websites:, and

HTML Improvements

1. Removed duplicate HTML in IE conditional comments

Certain designs created with previous beta versions of Muse had duplicate markup in Internet Explorer (IE) conditional-comments. This was clearly an inefficient way of achieving cross-browser compatibility in IE. Designs that use rounded corners, transparency on fills (rgba) and transparent png triggered this behavior resulting in duplicated markup, CSS, text content and in some cases even images.

For Beta 3 we’ve removed the duplicate IE markup and standardized on single markup for modern browsers, relying on HTML5 cross-browser poly-fills for legacy browsers.

Beta 2 Output

HTML snippet from Beta 2 – markup for modern browsers

HTML snippet from Beta 2 – markup for modern browsers

HTML snippet from Beta 2 – duplicate markup for IE8 and below

HTML snippet from Beta 2 – duplicate markup for IE8 and below

HTML snippet from Beta 2 – additional CSS file for Internet Explorer

HTML snippet from Beta 2 – additional CSS file for Internet Explorer

Beta 3 Output

HTML snippet from Beta 3 – single markup for all browsers; IE handled via poly-fill

HTML snippet from Beta 3 – single markup for all browsers; IE handled via poly-fill

HTML snippet from Beta 3 – eliminated CSS for Internet Explorer

HTML snippet from Beta 3 – eliminated CSS for Internet Explorer

What was the impact of this change?

Total size in Kb of HTML and CSS files
Site Beta 2 Beta 3 % Difference 2807 2296 -18% 493 220 -55% 554 220 -60%

From Beta 2 to Beta 3 the savings in files size are 18%—60% depending on the design.

Total number of CSS and image files
Site Beta 2 Beta 3 % Difference 242 242 -0% 124 84 -32% 396 198 -46%

From Beta 2 to Beta 3, the number of CSS and image files are reduced 0%—46% depending on the design.

2. Removed empty divs for clearing floats

Muse uses HTML floats for representing complex layouts, groups and widgets.  The older implementation used an empty div to clear floats so its parent container would stretch to contain the floats.  This clearly resulted in numerous unnecessary empty divs leading to code-bloat. We’ve replaced this in Beta 3 with a more modular approach to float management using the :after pseudo-element.

HTML snippet from Beta 2 – empty “wrap” div used to clear floats

HTML snippet from Beta 2 – empty “wrap” div used to clear floats

HTML snippet from Beta 3 – modular float management using clearfix

HTML snippet from Beta 3 –modular float management using clearfix

3. Reduced extra nested divs

We took some steps to remove extra nested divs not required for layout to simplify the structure and reduce size of the HTML. There are clearly more avenues for savings in the future.

What was the impact of removing empty divs and extra nested divs?

Number of DOM elements on index.html page
Site Beta 2 Beta 3 % Difference 349 247 -29% 977 906 -7% 277 215 -22%

Between Beta 2 and Beta 3 the number of markup elements were reduced 7%—29%.

4. Using anchor tag as blocks

When hyperlinks are applied to block elements, Muse Beta 3 exports <a> tag as block, taking advantage of this feature in HTML5. This change results in better usability of hyperlinks such as allowing users to right click and copy the link address or open the link in a new tab etc.

CSS Improvements

5. Removed redundant CSS

There were many cases in Beta 2 where Muse generated redundant declarations for CSS properties such as border-radius. We’ve also removed many duplicate CSS properties generated for a:hover selector. This change reduces the size of the generated CSS.

6. Shorthand CSS properties

In Beta 3, Muse now exports shorthand CSS properties such as border-radius, border, margin, padding and background when possible, resulting in more compact CSS.

7. Shared CSS

CSS rules that are shared between pages have now been moved to a global style sheet shared across the site. This decreases the size of CSS files for individual pages and allows browsers to cache the site global sheet.

What was the impact of the changes to CSS?

Total size in Kb of CSS files
Site Beta 2 Beta 3 % Difference 1321 947 -28% 244 96 -61% 249 95 -62%

From Beta 2 to Beta 3, the total size of CSS files are reduced 28%—62% depending on the design.

JavaScript Improvements

Many of the JavaScript changes made in Beta 3 enable better progressive rendering of pages and allow for greater download parallelization in the browser, thereby improving page load time.

8. Moved JavaScript from document head to end of body

With Beta 3 we’ve moved most JavaScript not required before the DOM loads from the document head to just above the end of the document body. This includes external JavaScript files and calls. This change speeds up initial rendering of the page because browsers will no longer wait to synchronously parse JavaScript before rendering the page. See move scripts to the bottom for details.

9. Combined external JavaScript files

Many JavaScript files are now combined to reduce number of http requests and size of download. This improves page load performance. See combining external JavaScript for details.

10. Reduced inline JavaScript

Reduced unnecessary JavaScript calls when multiple widgets were used on a page. Now regardless of the number of widgets on a page, showing them is taken care of by just one call to reduce size of generated JavaScript.

11. Widgets appear sooner

Most Muse widgets will now appear before the page DOM fully loads allowing users to interact with widgets such as menus sooner.


12. Exported file names

Exported file names are now always lowercase. This avoids problems due to differences in case-sensitivity of filenames between web servers.

What Next?

We recognize there are numerous opportunities for continued improvement. Beta 3 focused on cross-browser compatibility and page load performance. We’ll continue to work on those areas, in addition to search ranking/SEO and accessibility for future releases. Stay tuned!

Muse Engineering Team

7:00 PM Permalink