David Asch - February 9 2016
This may be a 'dot release' but it's the most significant update since the major CC upgrade of 2014. This isn't just big, it's HUGE!
It's been a long time coming but the wait is over! Yes, Adobe Muse now features responsive design and its implemetation is fantastic. Read on to find out more about it, as well as the other great new features and updates in this release.
Yes. It's finally here! Fluid designs can now be created in Adobe Muse! This is an enormous feature and has been implemented in a perfect and intuitive way.
In the most basic responsive setup, text now flows properly inside its frame as the browser width expands and contracts. Images can be set to scale down as the the page size changes, too.
As the page narrows to tablet and mobile phone widths, design elements can start to overlap and images and text become too small. To counter this, Muse uses breakpoints that can be used to define how the page elements behave. For example: if a piece of headline text splits and drops to a new line, it can disrupt the design. Setting a breakpoint lets you to tell Muse to reduce the text size instead, allowing the headline to remain on one line. Similarly, page items can be set to be hidden or displayed at different breakpoints; to replace a desktop navigation bar with a more mobile-friendly accordion menu. All this can be previewed and tested in real time in the Design View using the Simulated Width control (the large vertical grey marker on the right hand side of the canvas).
As the feature is in its infancy, there are some things that do not yet work responsively. Currently, the only widgets that can be set to behave correctly are Menus, Accordions, Tabbed panels and State Buttons. Scroll Effects and In-Browser editing are also not supported in this release. These will all be available in future versions.
It's also worth noting that responsive design has not replaced the individual site method. If you would rather stick with designing sites for desktop, tablet and phone, you can. It's even possible to combine the two, for example, you could have a responsive desktop site and a fixed-width phone version. Muse will determine the device and load the relevant content.
Another sought after feature that's finally been added is CC library support. This uses the power of Creative Cloud syncing to give you access to all your shared online assets. This includes images from Photoshop, vector designs from Illustrator, which import as scalable SVG files, colour schemes and much more!
Up to now, the change of state has been a simple on/off effect, as you would see with a standard hyperlink. This release sees the ability to add a configurable fading transition between any or all of the states. You can control the delay before the states change, the duration and the animation easing type.
Another minor annoyance was not having the ability to add shadows to web-safe and web fonts in the same way as you can add them to rectangles and image frames. Previously, text shadows could only be added when using system fonts, as they were converted to images when published.
Now, when you add a shadow to a text frame with a transparent background, it will be applied to the text itself and will be rendered on the page using CSS*, which is more flexible and much quicker when the page is loaded.
*Note: CSS text shadows are not supported by Internet Explorer 9 and older. In unsupported browsers the text will draw without a shadow unless the text is converted to an image due to the use of a system font.
SVGs can now be cropped and styled in the same way as regular placed images. You can also relink placed SVGs with raster images and vice-versa.
If you're a widget producer, there are some additions to the way code is controlled and also some great enhancements to the UI features.
That’s the major features in this release covered. Check back regularly for more news!
Until the next time, take care and happy Musing!