,

Responsive design in Adobe Muse

header-muse

Muse now lets you build fully responsive websites without writing a single line of code. This is a major step forwards for Muse, and it could be a major decider for a lot of people who’ve been unsure about the program in the past. Previous versions expected us to build multiple versions of a project, for mobile, tablet and desktop. Lots of extra work, and counter to the way things are usually done: using CSS Media Queries to change the page styles based on device or browser width. That older approach has been replaced by a much more up to date and intuitive way of doing things. 

Breakpoints

These are arbitrary values that determine at which widths the page design should change. You can have a single or multiple breakpoints. Breakpoints can be created by simply double-clicking on a ruler at the top of the document. Within each breakpoint, it’s now possible to control various aspects of the page:

Text formatting

Muse has the ability to switch between two text formatting modes: edits apply across all breakpoints, or only to the currently selected breakpoint. This means that font sizes, colours etc. can be easily specified for different screen sizes. The idea is great, but the implementation may confuse – a toggle-style button in the tools panel that switches between the two modes.

Column grid layouts

Multiple columns or side by side elements can be reconfigured across breakpoints. So, it’s now easy to go from say, three vertical text containers on mobile, to a three-column horizontal layout on the desktop version. Vertical layouts can easily be changed to horizontal.

Content visibility

This is great – you can easily choose which individual elements you want to show or hide on any breakpoint. This makes it easy for example, to design a specific menu for mobiles, while displaying a completely different menu for desktop.

Content scaling/positioning

Content can now be told to scale automatically with the browser width (great for larger images or horizontally arranged elements). Elements can also be pinned horizontally to the page or browser, providing more granular control over positioning across a wide range of screen widths.

‘Free form’ responsive design

Adobe seemed to have coined a phrase here – and one that should grab the attention graphic designers who want to build webpages without the constraints of frameworks, grid systems and the like. Although Muse offers a visual column grid, it’s not locked into one, and designers are free to pick up and place elements as they see fit. Of course, savvy designers will want to consider object placement carefully, and not simply scatter elements around the place. However, Muse makes it easy to move and replace elements, and page layouts can be changed with minimum effort. Creating working prototypes for client approval should be a breeze.

Summary

There’s more to the new version of Muse than I’ve listed here, as I’ve concentrated solely on the new responsive capabilities.

It may not be suitable for every scenario, but Muse is a working solution for micro-sites, landing pages, and smaller web projects. Given the new responsive features and the flexibility the program provides from a design perspective, it’s hard to see why Muse should not be used to build websites professionally.

So, will web developers now put down their code editors, CSS pre-processors and frameworks, and start dragging and dropping? That may be unlikely. However Muse is not designed for Web Developers. It’s aimed fairly and squarely at graphic designers, and even more specifically at graphic designers who use the big three Adobe apps – InDesign, Photoshop and Illustrator.