Creating Responsive Websites with Adobe Muse

Today Adobe has announced a huge update to Adobe Muse, and quite frankly it’s one of the biggest and most important updates Muse has gotten since its inception a few years ago. As of today users of Muse can now create full-on responsive websites without writing a single line of code. I know that may sound a little crazy to some of the coders out there, but I can assure you that it is true, and it’s pretty awesome too!

Fixed vs. Fluid

Muse users will notice a change to the application as soon as they start a new project because they will be faced with choosing between a fixed layout and fluid layout website right out of the gate. Choosing fluid width is the best option for a responsive design project because that automatically sets your site up to grow and shrink with changing browser window size. Choosing a fixed layout means you’ll have a static layout that doesn’t automatically adjust its size.

Adobe Muse Fixed vs. Fluid Width

See also: HD Graphics with Adobe Muse and Adobe DPS

A New Ruler in Town

Once you’ve created your site you’ll see that the design mode of Adobe Muse has also been overhauled to put responsive design tools front and center with its new responsive ruler. This multi-colored bar stretches edge-to-edge across the document window giving you full access to your site’s breakpoints at all times.

Adobe Muse Responsive Ruler

In addition to the ruler, there’s also a resizing handle on the right side of your document that allows you to drag your website in and out, which simulates changing browser size.

Adobe Muse Responsive resizing handle

Working with Breakpoints

Breakpoints aren’t a new concept by any means, but if you’re new to responsive design, you might not know exactly what they mean. As you drag your site window in and out using the responsive ruler, you will notice that pieces of your content start to look a little off. Some things will grow, some will shrink, and others will just get misaligned and look out of place. This is where breakpoints come in.

As your site starts to break down, you can fix that by adding a break point. With responsive design there’s really no right or wrong breakpoint to choose. Sure, there are widely accepted breakpoint ideas out there, like 1024 px for tablets or 320 px for phones, but in truth you should allow the content to determine your breakpoints. After all, the content of a website is the most important element, and you want to make sure it’s front and center at all times.

Adding breakpoints in Muse is super easy. As you drag your site inward using the responsive ruler, simply click the breakpoint pin (see figure below) and Muse will automatically create a breakpoint for you.

Adobe Muse Breakpoints muse5

I should also note that breakpoints can be added to Master Pages as well as individual pages in Muse, giving you the ability to customize each individually if you wish. When you create breakpoints on a master page, they will appear on each subsequent page’s responsive ruler to give you an indication of where they exist.

See also: Free Adobe Muse Keyboard Shortcut Cheat Sheet

Pinning 2.0

Pinning objects in Muse has been around for a while now. However, in this update of Muse there’s a whole new side to the pinning equation. Once you’ve set your breakpoints in Muse, you then need to start adjusting your content to fit within your new, smaller window size. Muse has new options in the options bar that make this task very simple as well.

Pinning objects in Adobe Muse

The new pinning options allow users keep objects in a static position even when the browser window changes. In addition to that, you can also change a single object’s resize options. This means that you can set an object to stay at a fixed size, stretch to fill the browser window, or even adjust its width and height as the browser window grows or shrinks.

Adobe Muse pinning options

Migrating Existing Websites

I’m sure all of this sounds great, but you’re probably wondering what becomes of the website you already have, right? Well, don’t worry, all of that work won’t go to waste because Adobe has added the ability to convert an existing Adobe Muse-based website into a fluid width project with a few simple clicks. All you have to do is open the Site Properties dialog box by choosing File > Site Properties and then change your site from fixed to fluid width. This won’t automatically add breakpoints or rearrange your content, mind you, but it will enable your website to be responsive and ease the transition for you.

Adobe Muse Site Properties

Adobe Muse Site Properties

A New Set of Starters

If you’re still feeling intimidated by all of this, that’s ok! Adobe has also developed some new responsive starter files for Adobe Muse as well. Both of these starter files come equipped with pre-installed breakpoints and all of the content reflowed and repositioned accordingly, making it much easier to see exactly how this new workflow is intended to be used.

Adobe Muse starter files muse15

A Whole New World of Possibilities

Adobe Muse continues to be one of the most innovative products in the “no code required” realm of web design. With this new update Adobe has brought Muse up to date with, and surpassed, many of the existing products on the market, and they’ve done so in a way that only Adobe could do it, really. As a Muse user, I’m excited about responsive design becoming part of my workflow, and I think you will be too!

Tags
Posted on: February 9, 2016

Justin Seeley

Justin Seeley is currently a staff author for the design, business, and web segments at lynda.com. He has over 12 years’ experience in the graphic and web design industry, and is a regular speaker at events like Adobe MAX and PePcon. He blogs regularly at justinseeley.com.

5 Comments on Creating Responsive Websites with Adobe Muse

  1. Great article. It’s time to give Muse a second chance. Thanks for writing it.

  2. It appears to be buggy as hell and needs rework. In looking at the forums, it seems this was released a little too soon for public consumption. I think either a new version needs to be released or a hold put on the project. It all sounds good in description but users are very frustrated.

  3. It seems that you need to start your workflow with a narrow screen size then work outwards towards desktop size. For me this should be the other way round. This is because text resizing doesn’t work. Example, if you set text at 140px for a desktop header it stays at 140px even when you create a breakpoint at 320px! Other objects like rectangles, images etc resize automatically, but text stays the same across multiple breakpoints.

  4. Isaac Leshaba

    May 10, 2016 at 3:44 pm

    I would like to know, with those two arrows at each end of the break point bar what is their purpose cause i was playing around and accidentally clicked it and it swung around so now i feel like they serve a greater purpose which might help me in the near future.

  5. It´s frustrating when tutorials only explain the surface of a project but don´t elaborate on the details, such as Site properties vs Page Properties and Master Page breakpoints vs Single page Breakpoints. Some tell you to use Fluid width, but others say to go with Fixed width. And don´t get me started with the Widget Library and the other Library, where all the non-native Widgets get stored. Someone´s selling a Widget called Font Smother, because Muse makes Web Fonts look as pixeled as Mario from Nintendo.

Leave a comment

Your email address will not be published.


*