Adobe Muse CC 2015 Gets Responsive

Adobe Muse CC 2015 Gets Responsive

Muse page shows breakpoint bar with breakpoints added.
The wait is over. Adobe Muse CC lets you create responsive web designs.

If there was one aspect of using Adobe Muse that I completely abhorred it was the Adaptive layouts that forced you to create separate Mobile, Tablet and Desktop versions of a site or page. With all of the devices out there, the odds were really good a mobile or tablet version of a page or site would fall apart on one device or another. The big hole in Muse was that it wasn’t responsive in a world where Responsive Design has taken hold …. Big time. Couple that with the withdrawal of Edge Reflow a couple of years ago and a lot of Muse users couldn’t help but wonder if what Adobe learned from that app would be ever applied to Muse. Over the past several months, when it was announced at Adobe Max in Oct. ,2015, that responsive design would be added to Muse, there was a lot of speculation as to just when that feature would finally be available. The wait is over: Responsive Design has been included in the latest update of Adobe Muse.

In this “How To” I plan to show you how to get started with this new feature of Adobe Muse and how to use the new Responsive Tools added to the application. Let’s get started.

How To Create A Responsive Page in Adobe Muse CC 2015

The Gripper tool in Adobe Muse CC 2015 is highlighted.
many of the tools used in Edge Reflow appear in Adobe Muse CC 2015, including the Gripper.

To start you simply create a new Fluid Width site. In this case I set the width to 1280 pixels. I then clicked the Advanced Settings and set the Min Width to 320 pixels- a common mobile size and added some margins and padding. The resolution setting was changed to HIDPI which takes into account the fact most mobile screens have 2X to 3X more pixels per inch than a desktop screen.

Once I clicked OK, I was taken the the Plan view. From there I double clicked the A-Master to open the Design view and a whole new way of doing things presents itself. That coloured bar you see is the Breakpoint Bar. You add break points where the design literally “breaks”.

How do you know when a design “breaks”? There are two methods:

  • Open the page in a browser and drag the right edge of the browser window inwards. When the content either falls apart or starts bumping into other content …. You need a breakpoint.
  • In Muse, drag the Gripper to the right.

How To Add Breakpoints To An Adobe Muse CC 2015 Page

The Breakpoint icon on the breakpoints bar is highlighted.
Adding breakpoints to a responsive design is reduced to an icon click.

There are two ways to add breakpoints to either a Muse Master Page or to a Muse page. Let’s start with the easiest method. When you drag the Gripper inwards or outwards a small icon with a + sign will appear on the Breakpoint Bar when you release the mouse. This icon indicates a breakpoint can be added at that width. Click the icon and the breakpoint is added.

A word of advice:

Don’t add a multitude of breakpoints. Be stingy with them. Just because a piece of text shifts a couple of pixels is no reason to add a breakpoint. Another key point to keep in mind is not add a breakpoint at the exact spot where the content “breaks”. Pull the gripper back about 10 or 20 pixels from the breakpoint and then add it. This will result in a smoother transition between viewports.

How To Manually Add Breakpoints To The Breakpoint Bar

The Add breakpoint context menu and Add Breakpoint dialog box are shown.
You can manually add breakpoints to the tbreakpoint bar through a Right-Click.

 Another method adding a breakpoint is to ignore the breakpoint icon. You can add a breakpoint by Right Clicking on the Breakpoint Bar. This will open a Context menu and you can click on Add Breakpoint … and the Add Breakpoint dialog box will open. If the Breakpoint Width value could use a change, select the number and enter the change. When finished click OK and the breakpoint is added.

How To Manage Content Between Breakpoints

The Pin To Page and Responsive Scaling options are highlighted on the page.
Pinning and Scaling content ensures the content does exactly what you want it to do.

In the example I am using you will notice there is a logo on the left, a vertical button and an Ugly Button in the Header. The content is an image. This where Pinning and Scaling become important.

The menu and Ugly Button are sitting on the right side of the page. In this case I want them to slide to the left as the viewport gets smaller. To ensure this happens I pinned them to right in the Pin To Page icon by clicking on the Right dot in the icon. The logo got a similar treatment only, this time, I clicked on the Left Dot to pin it to its side of the page. I also didn’t want any of these elements to grow or shrink and, to accomplish this, I selected None in the Resize pop down.

The image needed a different treatment. I pinned it to the center of the page for obvious reasons and set the Resize value to Responsive Width.

There is no Best Practice around pinning and scaling. The best way of seeing which works best for you is to try it out using both the Gripper and by selecting File>Preview Page In Browser and resizing the browser’s viewport.