This is arguably the biggest update to Muse since the product’s initial release. The big new features this time around include Parallax Scrolling, In-Browser Editing, and something near and dear to my heart: a Layers panel. As always, there are a bunch of smaller updates and enhancements, too.
Parallax Scrolling
Parallax Scrolling helps you create animated effects that involve two (or more) “layers of content” that move in the browser at different speeds. It is a web design technique that enables you to set the speed of each element. Using this technology, you can apply these animated effects to individual objects on your page to create visually compelling designs. Check out a great example of a site using built with Muse using parallax scrolling.
It seems like just yesterday when new features were added to Muse, but surprisingly it has been a few months. Unlike last quarter’s update, which featured major new features, this quarter is more about refining existing features to help you better work with Muse. In my opinion, the two most important changes to Muse this time around are the addition of a spell-checker and the ability to base master pages off of each other.
There are also other minor enhancements and additions you can read about below.
Right on schedule Adobe has released another update to Adobe Muse and this time the focus is on creating mobile friendly sites. While the last update had bits and pieces for a variety of users, this time the update is mainly focused on adding the ability to create tablet and smartphone optimized websites from Adobe Muse. We have updated Muse Essential Training again to help you stay on top of the latest features and enhancements that have been added. For a more detailed look at what has been added, please read the following list of new features, changes, fixes.
Mobile Friendly Features
• Swipe within widgets: This provides gesture support within widgets; that is, swipe to move through a slideshow when Horizontal transition is selected.
• Menus: This includes menu and submenu selection via touch (bug fixes)
• Touch Support: Widgets and links work on tablet and phone devices; tapping on the link shows the Mousedown state. On Android devices, it shows the Mousedown state while your finger is on the item, and shows rollover when your finger leaves it. iOS devices show the rollover once your finger has stopped touching it, which is native behavior.
• Hyperlinks: Automatic redirects to device-specific layouts. When you browse a Muse site on a smartphone or tablet, the code generated by Muse will automatically load the appropriate layout for the device. You can also explicitly link to a page designed for a different device (i.e., a link for “Show Mobile Site”).
• Pinning Tablet/Smartphone Layouts: Due to lack of support on some tablet and smartphone browsers, pinning is disabled in Muse for tablet and smartphone layouts.
• Sticky Footer option: When selected this option maintains the minimum height for the page as the browser window height. There the page footer “sticks” to the bottom of the page until/unless the page is taller than the browser window. It is available in a separate Site Plan and in turn unique layouts for Master and Page Properties dialogs. Default behavior is off for existing .muse files from prior Muse versions and on for all new sites created in Muse.
• Site Plan: Now includes the ability to create a separate Site Plan and in turn a unique layout for Desktop, Tablet, and Phone layouts. There may or may not be a one-to-one relationship for pages between these layouts.
• Add Layout: This option offers support for copying Site Plan and Master/Page backgrounds when creating second and third site layouts for a tablet and/or smartphone.
• Viewport Scaling: Sites generated from Muse will rely on Viewport Scaling to ensure that a webpage will “fill” the width of the current screen of tablet or smartphone devices, both in landscape and portrait orientation.
• Device Preview: Muse Preview now has the ability to reflect the dimensions of a target device (smartphone or tablet). Multiple device types are included in a Preview Device dropdown. Note that Preview displays the height and width of the device, but does not attempt to simulate device-specific features or nuances for the browser on a given device.
Forms
• CAPTCHA — The Forms widget now includes a CAPTCHA field option to prevent automated form submissions (spam). Form widgets in general and the CAPTCHA option require server-side support and thus require hosting on Adobe Business Catalyst.
Hyperlink UI
• Search/filter: Hyperlink dropdown menu (consistent with Font dropdown menu) allows search and partial filtering.
• Device specific: Hyperlinks dropdown has been revised to differentiate between pages in Desktop, Tablet, or Phone layouts.
• Link support for mobile: Phone numbers (e.g., tel:2065551212) and email addresses (e.g., mailto:dani@adobe.com) result in touch-enabled links to a smartphone dialer or mail client.
Go To Page
• Go to Page (Command + J): Quickly go to any page on your Adobe Muse site. Press Command+J, then type in the page name you want to go to.
• 14-01 Creating a Mobile site (new)
• 14-02 Adding a tablet site (new)
• 14-03 Adding a mobile phone site (new)
• 14-04 Previewing mobile sites (new)
• 14-05 Linking between alternate layouts (new)
A few months ago, Adobe released Adobe Muse to the public. One benefit of Muse being available by subscription only is the ability for Adobe to provide new features whenever they happen to be ready. The first batch of updates were recently released and include a combination of must-have new features and improved usability. The lynda.com Muse Essential Training course has also been updated with a number of movies that cover these new features in depth. The following is an overview of what has changed.
Ruler Guides
Muse now has the ability to create Ruler Guides, which help to align your designs. You can drag guides from the horizontal or vertical ruler onto your page, and lock, hide, move, and delete them just as you would in InDesign and other Adobe applications. For a closer look at the Muse Ruler Guides, watch the movie Using Ruler Guides, from the sixth chapter of Muse Essential Training.
Align panel
In the first version of Muse, you were only allowed to align by using the built-in Smart Guides. While Smart Guides are useful, Muse now features an Align panel that lets you align and distribute objects between one another, and to web pages themselves. For a closer look at the Muse Align panel, watch the movie Using the Align panel from the sixth chapter of Muse Essential Training.
New Font menu
The Font menu has also been rebuilt to be easier to use. Now you can search for a particular font among Web Fonts, Web Safe Fonts, and System Fonts. It even features a Recently Used Fonts section at the top of the menu. To learn more about the Font menu, check out the movie Formatting your text, from chapter seven of Muse Essential Training.
Form fields
Arguably the most important update to Muse is the ability to create and edit basic text fields as forms. These fields help you create a basic contact form that will work well if you are publishing with the website host Adobe Business Catalyst. If you use a third-party host, Muse will write the correct HTML for the forms when you export or upload. However, you will need to edit the code for the forms to work properly. Muse is still missing more complicated forms like check boxes and radio buttons, which hopefully will arrive in a future update. To learn more about text forms, watch Understanding text form fields in the eleventh chapter of Muse Essential Training.
FTP upload
The easiest way to publish a website is by using Adobe Business Catalyst as your host, but you may prefer to use your own third-party host. Until now you were required to export your website from Muse and then use your own FTP client to upload the site to your own host. With the latest Muse update, it just got easier since there is now an FTP client built directly into Muse. Simply enter your host information and upload your website inside Muse whenever changes are made.
Downloadable assets
If you have ever wanted to add a PDF, ZIP, or other file on your website for people to download, you may recall it was difficult to do with the earlier version of Muse. The updated version now allows you to add any type of file you want as a downloadable asset. When you add a file for someone to download, it is added to the Asset panel as a link. From there, you can select any graphic or text and create a link to that asset for download. When you publish your website, the file will be automatically uploaded to your host along with the code and images.
Usability and UI improvements
Sometimes the little changes can make all of the difference. Here is a list of some of the tweaks to the Muse interface that will help you work more smoothly:
• Duplicate while Transforming: The X, Y, W, H, and angle edit boxes support duplicating and transforming a selection if you hold down the Option key (or Alt key on a PC) as you enter a value and press Enter. This functionality is similar in other Adobe apps like InDesign and Illustrator.
• Shift+Enter: Similar to Duplicate while Transforming functionality, if you enter a value in an edit box you can do a Shift+Enter to apply the value and keep focus in the edit box. One benefit of this function is the ability to adjust your text and try several text-size values without having to click in the edit box, select all, and then type another value.
• Drag-and-drop styles/swatches/colors: With the Muse update you can drag the following:
-Paragraph styles onto text frames to apply (the bug where it only applied to the first paragraph has been fixed)
-Character styles onto text frames to apply
-Graphic styles into page items or a page to apply
-Swatches onto a page item, page, or browser area of a page to apply background fill
-Color onto a page item, page, or browser area of a page to apply background fill (by dragging the color preview area just above the RGB edit boxes)
-Color to the Swatches palette to create a swatch of it
• Rotate Cursor feedback: Added feedback to the Rotation Tracker so you see the angle next to the cursor as you rotate.
• Rotation display values: Changed rotation display values to be between -180 and 180 to match other Adobe applications (previously it was 0 to 360).
• Groups and widgets: Indicated with dotted line containment rectangles.
• When a page item cannot be resized in a specific direction an X is shown instead of a missing handle.
• Additional controls—Transform, Text, and Align: Added to the Control strip.
• If you have a pointer, you can access Text controls in the Control strip when any item on the canvas is selected.
• Object names report multiples in the Control Strip: For example, if one text frame is selected, the menu reports Text Frame. If multiple text frames are selected, the menu reports Text Frames.
• Control Strip: Reports states for pages and objects, and will show a dropdown list of states applied to that object.
• Preferences: Allows you to turn off the Hint label/tooltip.
• An FAQ link to help users understand the implications of publishing, and alleviate their fears about what publishing means, has been added.
Code generation improvements
One of the advantages of using Muse is that you generally do not have to worry about working with HTML, CSS, or JavaScript, because code is automatically generated when you publish or export your layout. Even though you may not think about code, the Muse team spends a lot of time tweaking and improving code generation. Since these small tweaks will collectively improve the speed, performance, and optimization of your site, it is recommended that a site be re-exported/published after updating to the latest version of Muse. This update includes the following code-based improvements:
• Updates to state-based groups, or, what happens when Muse generates a separate HTML structure for each state of a Muse page item. State-based groups can cause problems with Google Analytics as well as click-event problems. For cases where you are not rasterizing the entire page item and its contents, Muse will create a much simpler HTML structure and change the styling via CSS. Note that Muse rasterizes the entire page item and its contents in the following cases: Text frames that use System Fonts, rotated page items, and images with a Bevel or Inner Glow effect applied.
• Shadows/glows use the CSS box-shadow property.
• Gradients are created with CSS.
• A Sitemap.XML file improves SEO.
• JavaScript runtime is improved (15 percent less code).
• Shift+Return creates a line break (<br>) instead of a hard return.
• Internet Explorer 7 and 8 (IE7 and IE8) don’t support transparency in shadows, so Muse shadows use a tinted color matted against the page fill color for the IE7 and IE8 CSS.
InDesign is best known for its print abilities, but over the years it has added a variety of interactive features. While InDesign CS4 was limited to mostly buttons and basic links, CS5 added animation and SWF interactivity. Now with the release of InDesign CS6 and the Adobe Digital Publishing Suite, InDesign is fully able to publish interactivity directly to tablets including the iPad. To get a better idea of what InDesign can do, lets take a look at four tutorials that really showcase the breadth and depth of what creating interactive digital documents with InDesign is all about.
1. Exploring trends in digital design Chapter one of Mike Rankin‘s InDesign CS6: Interactive Documentscourse begins by sharing some of the design trends that showcase the wide variety of ways in which we can share our messages via digital technology. These examples include interactive PDFs, digital books, responsive web sites and even digital magazines. In the movie below, Mike explains how a talented designer created an interactive keyboard shortcut guide primarily using InDesign CS5.
2. Interactive PDFs When you hear PDF, you might think print. While PDFs may be a primary resource in the world of print, there really is a lot of that you can accomplish with interactive digital PDFs as well. In the past it was mandatory for you to do serious modifications in Acrobat Pro in order to get the interactive results you wanted. Finally, with the release of InDesign CS6, most of the PDF creation process can be done completely inside the InDesign software. In chapters four through six of InDesign CS6: Interactive Documents, Mike walks you step-by-step though PDF projects including presentations, catalogs, and PDF forms. In this video from chapter six of the course, Mike shows you how to make an interactive PDF document with checkboxes that can be turned on or off.
3. Animation Moving beyond static layouts is easy when you use InDesign’s animation tools. In chapter seven of InDesign CS6: Interactive Documents, Mike walks you through the steps necessary to create your very own interactive portfolio or presentation with animation and page transitions. The movie below specifically covers the steps necessary to control the timing of animations in a bulled list.
4. Adobe Digital Publishing Suite One of the biggest developments of the last few years has been the release of Apple’s iPad. Soon after the tablet’s release Adobe put together a series of plug-ins called the Adobe Digital Publishing Suite which provide the ability for designers to transform their InDesign layouts into interactive applications for the iPad and other tablets. The final few chapters of the InDesign CS6: Interactive Documents course cover the basic steps needed to create your first interactive magazine for tablets. In this movie from chapter eight of the course, Mike shows you specifically how to use the Web Content Overlay option to add a Google Map to your webpage.
As the new content manager for Design, I would like to say hello to all of our members!
I began my relationship with lynda.com many years ago as a member. With an appreciation for learning as much as possible, my lynda.com membership helped me gain the skills that I needed to succeed in my career as a designer. Over time I became an Adobe Certified Instructor, and eventually an author at lynda.com. If you are interested in learning more about me, please check out my lynda.com courses, or you can follow me @jamesfritz on Twitter where I post design-related tips, news, and inspiration.
Here at lynda.com my job is to help envision future course development for the design segment, and work with authors to produce the best content that we can for you, the members. While we have lots of great things planned for 2012, I would love to hear what you would like to learn next.
In the comments below, please let me know if there are any techniques, technologies, or concepts related to design that you would like to see at lynda.com.
Thank you and I look forward to hearing your suggestions.
Interested in more?
• Courses by James Fritz on lynda.com
• All Design courses on lynda.com
