August 17, 2011

Adobe Muse promises HTML5 and CSS3 design without coding

Hot on the heels of their new HTML5 motion graphics application, Edge, Adobe has released a public beta version of a new product code named Muse.

"People don't hand-edit PDF or PostScript files for print file or PDF document, and in 5-10 years I don't think very many people will be coding in order to design a website." Adobe's Muse Quality Engineer - Jason Prozora-Plein.


Muse - Icon

At first glance Adobe Muse appears to be the infant child of happy parents, Adobe InDesign and Adobe Dreamweaver. Muse also feels a little like Apple's forgotten iWeb product.

The tool itself is built as a stand alone AIR application that is available as a free download from On Adobe's Muse microsite you can watch an introduction video by the Muse product team and get further details on pricing for Muse once the product is released as 1.0.

Using Adobe Muse

The wizard-like workflow is a nice approach to the Muse interface. Adobe has given designers a clear process to follow in creation of their site: Plan > Design > Preview > Publish.


Muse Sitemap

Adobe starts out by having you create a sitemap in Muse by adding pages and subpages off of your root homepage. With each page you create you can choose which master page to base it off of. Print designers will be very familiar with the concept of designing certain elements on a master page to be included on all subsequent pages based on that master.

Muse Masterpage options


Muse's design tools are 100% focused on the layout of your page elements and the styles applied to your text. There is no "Code-View" in Muse, so all CSS generation is achieved through the different design panels. Font selection, leading, kerning, spacing, text wrap, alignment and other options found in Adobe InDesign appear in the text panels within Muse.

Once you have styled your text to your liking, you can save the style as a stylesheet. Paragraph styles are applied as <div> classes and character styles are applied as <span> tags within the HTML.

Muse Style Options

Swatches, gradients and graphic styles are available for images and objects. Complex CSS tasks such as applying drop shadows or rounded corners, become an afterthought when designing with Muse.

Muse Object Effects

There is also no need to down-save your high-resolution graphics before importing them into Muse. Muse will automatically scale and convert your image to a web-resolution PNG file.


Muse has a built-in WebKit engine (Safari and Chrome are built on WebKit) to preview all of your work within the application. Muse also has the option to preview your work in your default browser application.


By default, Muse is setup to publish your site up to Adobe's hosted servers. If you would like to host your site with Adobe you will need a Business Catalyst account. Luckily, if you do not already have a Business Catalyst account, Adobe has integrated the sign-up and agreement form. As part of the Muse public beta, users are eligible for a free trial Business Catalyst account. If you would rather not create an account and want to take your Muse creation and publish to your own hosted servers, you can do so by selecting "Export to HTML" from the File menu.


There are a lot of additional features in Muse to explore. With Adobe Edge and now Adobe Muse, you can see that Adobe is working hard to give creative professionals a set of tools for designing rich digital content with HTML5 and CSS3 underpinnings. There are those that feel that Adobe may be biting off more than it can chew with this product, or that Adobe is over-simplifying the complexities of coding (To see differing view points head over to NetMagazine). I can only say that while Muse may be controversial, it certainly is an exciting product that is looking to help solve a very relevant pain point. 

When looking at the pricing for Muse, one thing that you will notice is that there will not be a way to purchase the software outright. Adobe will be offering Muse to users only as a subscription service. It will be interesting to see if users that already have subscription licensing plans for Creative Suite will be given Muse at no additional charge, or if the product will only be available through a separate subscription.

Posted at 09:57 am by Ivan Mironchuk

Drupal Association Organization Member

Case study

Adobe Digital Publishing Suite Consulting for McGraw-Hill Education

DPCI provided Adobe Digital Publishing Suite consulting services to McGraw-Hill Education to help develop an interactive iPad application that showcases digital solutions to collegiate students and educators.

> more

All case studies

Press Release

Award Program Showcases Outstanding Examples of Digital Experience Delivery; Winners to be Unveiled at Acquia Engage 2017 more
Alltop, all the top stories