Working with Adobe Muse

Adobe Muse aims to let designers easily create websites without the need to learn or use code. To put it through its paces we decided to produce a responsive website cataloguing the exterior changes to VW Campers from 1950-1967.

Both Dave and Becky are huge camper van fans and own a pair of 60s split screens. A real world test helped us analyse its benefits and problems and made for an enjoyable project.

The UI

Text and images can be manipulated onscreen in real time and Muse will automatically generate all the code once your site has been exported or uploaded.

The UI looks and behaves very similar to other Adobe desktop publishing programmes such as In Design. With familiar palettes for text, transforming objects and even layers it’s easy to hit the ground running without the need to learn a new interface. All linked files are grouped in an assets palette, similar to In Design and are automatically updated if edited.

Many standard file types are supported including SVG support and files can even be copied and pasted directly from another programme onto the canvas. Muse also recognises layers and layer groups created in Photoshop and allows these to be set as roll over states for buttons etc – a nifty time saving feature.

Master pages can be set up to avoid the need for duplicating common elements. However, any objects placed on the master page are locked and can only be edited by returning to the master page which proves to be rather time consuming. It’s far easier to simply copy an object and paste to place on another page.

Fully Responsive

Muse is now fully responsive and has a powerful range of settings such as pinning that allow the behaviour of elements to be managed or even locked into position to ensure they always behave as intended. For example setting a text box to ‘responsive width’ allows it to automatically adjust to the width of a page. A small degree of trial and error is often called for as some settings provide better results than others, resulting in unexpected results at various browser widths.

Breakpoints are another major new addition. Simply dragging a scrubber bar (located at the side of the canvas) simulates browser width and gives an instant visual cue for elements clashing at various page widths. Breakpoints can then be added that allow the design to be re-ordered once the browser hits this width. Elements can be hidden or made visible at any breakpoint, for example horizontal nav’s can be changed to burger menus and images can be removed to save space on screen.

Typography and Widgets

Typography is also very familiar in Adobe Muse. Standard web fonts (with fallbacks to standard serif/sans-serif versions for older browsers), Adobe Edge Web fonts and Typekit fonts are all supported.  The real bonus is that if you decide to use a font from your own system, Muse will automatically export the text into an image so you don’t have to worry about the user having access to your obscure font library. However it’s worth noting that overuse can have knock-on effects for SEO and accessibility.

Want to add slide shows, menus or forms to your site without having to generate the code? Muse has 2 options. It’s built in widgets library allows you to take standard items and modify them to suit your design. You can also download third party widgets created by other designers from the Adobe website and from other sites such as Musefree.com and Museresources.com. For a range of varying costs you can add some extremely clever and original functionality to your basic site.

Generated Code

However, problems arise once muse generates your sites code. As with all programs that automate code generation there’s often a lot to be desired in how they deliver and optimise that code. It’s often ugly, bloated and relies on generic class names that are only marginally better than the old Dreamweaver staples of style_1, style_2 etc.

While few within the intended audience will interrogate the code, the bloat that exists doesn’t help to keep a website lightweight and fast loading as possible.

The test website can be found here: Camper Timeline