New Adobe Muse features for Q4 2012

Published by | Tuesday, December 11th, 2012

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

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 verification

•  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

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

•  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.

Updates to Muse Essential Training:

Introduction

• 00-04 What is New in the December 2012 Update

Chapter 9

• 09-01 Creating a hyperlink (update)

Chapter 11

• 11-09 Exploring the Muse Widget Gallery (new)

Chapter 12

• 12-04 Working with Twitter (update)

Chapter 14

• 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)

Interested in more?

• View the entire Adobe Muse Essential Training course on lynda.com
• Courses by James Fritz on lynda.com
• All Adobe Muse courses on lynda.com

Suggested courses to watch next:

Photoshop for Web Design
• Designing a Porfolio Website with Muse
• Fireworks CS6 Essential Training
• Dreamweaver CS6 New Features

Share this:Share on Facebook3Tweet about this on Twitter6Share on Google+0Pin on Pinterest0Share on LinkedIn0

lynda.com - start learning today

Tags: ,


28 Responses to “New Adobe Muse features for Q4 2012”

  1. A says:

    Hello…. :)
    I don’t see this update on the lynda website today?! And I can’t see this update on my version of Muse? Has Adobe released this update to Muse to the public yet? Thank you :)

  2. James Fritz says:

    Hi A,

    This course was updated in early December so you will have to either search or browse to find the course. Here is a direct link. http://www.lynda.com/Muse-tutorials/Muse-Essential-Training/89048-2.html?utm_medium=viral&utm_source=blog&utm_campaign=Photoshop-CS6+Design&utm_content=new-adobe-muse-features-december-2012

    Your copy of Muse will automatically update to the latest version, so there is a chance that you may have already done this last month and don’t even realize it.

    If you have any more questions, please let me know.

    Sincerely,

    James Fritz

    • Tim Slade says:

      Hi James,

      Tim Slade here. Just curious…do you have any knowledge of possible blogging features coming to Muse? I am working on a site and obviously this would be a nice feature.

      THANKS!

      Tim

  3. James Fritz says:

    Adobe doesn’t comment on new features that are not released, but I am know that they realize that blogging is an important part of web design. They have stated that it is on their radar, but have not commented when it would be implemented.

  4. ceekym says:

    Hey James,

    As an InDesign user, I really love the way Muse works. However, I must admit that I am having a challenge understanding how to get the form fields to work when I upload a site using the ftp option… HELP!

  5. Hi Ceekym,

    Form fields will not work when you upload them via the FTP option since they are only configured to work with Adobe Business Catalyst. You can tweak the code to make them work, but that is a more technical solution that is beyond the scope of this course. If you are going to be using your own host, I recommend checking out jotform.com (or a similar service) to create an manage forms for your muse site.

    Good luck!

  6. Armen says:

    Hi James.

    Thank you for great course.
    I’m going to rebuild my website from scratch and really love the Muse.
    But there are few issues that i have to solve before to dive in big project.
    – Will i be able to upload files to my header from sites like pinterest and other places, to verify our website ?
    - can i create feedback form directly from Muse ?
    - Is there maximum limit for pictures and videos to showcase our product?

    Please advise.

    Thanks.

    • James Fritz says:

      @Arnen

      I am happy to hear that you are loving muse. Let me do my best to answer your question.

      I haven’t personally verified a muse website for pinterest, but it would be possible if you export your site from Muse as HTML and tweak the code as needed. I don’t believe that there is a way to directly integrate this type of content inside Muse. I will look into this and see what I can come up with.

      You can create forms inside Muse and one of the fields has a place for comments. You can tweak the labels to change them to feedback if you wish. Keep in mind that the Muse form widgets will only work if you are using Business Catalyst for hosting. If you are exporting the site and uploading to your own host, you will have to use a 3rd party form provider like jotform.com

      I don’t believe that there is a maximum amount of content that you could put on a Muse site, but if you try and put too many images on one page, it may take a long time to load. If you have that much content, I would recommend making more pages to spread it out.

      Thanks again for writing in and watching the course. Stay tuned for updates to the course as Muse updates overtime.

      Sincerely,

      James Fritz

  7. Steve Harris says:

    @Armen

    Pinterest verification can be done a couple of different ways. Your best bet for verifying by using the Meta-Tag method would be to place the tag that Pinterest provides in the “HTML for ” area of Muse. You can find this in the Page Properties > Metadata of any page on your website (I would suggest you place it in the home page).

    The only issue with this method is Muse may not place this tag directly following the tag, which Pinterest recommends for successful verification.

    The other way I would suggest to verify is by using “Upload HTML Verification File”. This can be done easily by using FTP software to connect to your web host – either Business Catalyst or a third party.

    Simply download the HTML file Pinterest provides, upload it directly to your FTP server (place it in the root directory) and click “Verify”. Pinterest will check your site for the file, and automatically verify. This would all be done outside of Muse, without changing your website design or meta properties.

    Hope this helps!

    Cheers,
    Steve Harris

    • Armen says:

      Guys you are awesome.

      I really appreciate your help.
      Steve, you told me exactly what i was looking for. These both options are offered by pinterest(and not only).

      James, thanks for quick reply.

      Regards,

      Armen.

  8. Ivica says:

    Hi James,
    Is it possible to make a two or three language site in muse (for example same design but on English, Italian and France language)

  9. @Ivica,

    There is no built-in solution with Muse to create a multilingual site, but that doesn’t mean you can’t do that. I would recommend building the site out once in one language and then duplicated all of the pages for each language. Next, replace the text/images as needed for the new language. Finally, create some links on the home page that direct to to the proper page.

    I hope that helps!

    James Fritz

  10. Watergal says:

    Hi Steve,

    Just wondering, within a Lightbox slideshow, am I able to include a rotator for graphics using one of the Lightboxes?

    Thank you and regards,
    watergal

  11. Steve Harris says:

    Hi Watergal,

    Absolutely, you can achieve this functionality with Muse.

    I just did a quick test, and the easiest method for me to do it was to drag & drop a “Lightbox Display” widget out onto the site, and cut / paste a basic slideshow widget into it. Basically I combined the two widgets – a slideshow inside a lightbox. This way you can launch the lightbox gallery from a single thumbnail, and once the lightbox appears you can manipulate the thumbnail gallery “embedded” inside. Just make sure that you’ve clicked into the lightbox container before pasting the slideshow, or it will not appear inside of it.

    It’s tough to explain in a couple of sentences, however let me know if this helps. If not please feel free to send me an email and I can build a better demonstration!

    Cheers,
    Steve Harris

    • Watergal says:

      Hi Steve,

      Truly appreciate the quick reply, i’ll try it out soon.

      I’ve encountered another problem, I’m trying to create an effect whereby text when be revealed from a box as you scroll down (using the ‘pin’ feature on the box). Unfortunately, I couldn’t get it to work, for some reason, there isn’t much space for me to scroll down, thus revealing just a little bit of the text.

      Need your kind advice.

      Thank you and regards
      watergal

      • Steve Harris says:

        Hi Watergal,

        Sounds like you need to extend the vertical length of your page within Muse – that would give you the room to scroll down and reveal the hidden text. You can extend the page 3 ways – dragging the bottom guide down lower, dragging an element on your page down towards the footer of the page (and “pushing” it lower), or by setting the height of the page in the “Properties”.

        Does that help?

        Cheers!
        SH

  12. Armen says:

    Hi Steve.

    I wonder if there is a way to create scroll down text window in Muse? I don’t want to cover my entire page with text, instead I’d prefer to have scrolling text and images around it.

    Thanks,

    Armen.

  13. Steve Harris says:

    Hi Armen,

    The best way to do this is by using an iFrame – an iframe is essentially a window into another website, and you can style the frame to have scrollbars, titlebars, etc.

    Check out an iFrame generator online – for example:
    http://7thspace.com/webmaster_tools/iframe_generator.html

    You simply enter in the site you’re going to view in the small scrolling window, set the size of the frame and make sure that scrollbars are set to “Yes”.

    I would just make a simple page with your scrolling text in Muse, and then upload that to separate folder on your muse site. Your iFrame would then link to “http://www.yoursite.com/folder/yourtext.html”

    Once you generate the iFrame code, embed it in Muse using the “Embed HTML” menu. I’ve tested this already, and it seems to work quite well.

    Let me know if this helps!

    Cheers,
    Steve Harris

  14. Steve Harris says:

    Hi Armen,

    To create a new folder on your FTP, I would suggest using ftp software like Filezilla. You could also just place your text on another page within your Muse site – just make sure the page is not accessible through the main navigation (it will be hidden, you don’t want visitors finding it). You would then point your iframe to that hidden page once you’ve published up the website.

    Here’s a sample that uses an iframe – this iframe points to this blog post on Lynda.com
    http://armentest.businesscatalyst.com/index.html

    Does that help?

    Cheers,
    SH

  15. MuseBoy says:

    Hi,

    I was not able to figure out how to allow multiple slideshow images using a single thumbnail. You suggested to use a lightbox display and then copy paste a slideshow widget into it, however I cannot get to paste the slideshow widget into the lightbox.

    I selected the container for the lightbox display and then pasted the slideshow widget inside, but it didn’t work. It comes over it, rather than inside.

    Can you help please?

  16. Steve Harris says:

    Hi MuseBoy,

    It can be difficult to select the right area to paste the slideshow in – I suggest you use the Layers panel in Muse, and select the “Target” area within the lightbox display composition widget.

    Be sure you’re using the lightbox display composition widget, NOT the lightbox slideshow widget. Composition widgets are built for you to combine different types of content, however the slideshow widgets don’t work like that.

    Here’s a quick example, just using the default images / thumbnails in Muse. Just click the grey box on the page, which launches the lightbox with a slideshow inside.

    http://museboy-test.businesscatalyst.com/index.html

    Also, here’s a link to download my muse working file:
    https://www.dropbox.com/s/a6qvpselwjwsc21/museboy.zip

    Cheers,
    Steve Harris

  17. MuseBoy says:

    Thank you so much. I was mistakenly using the lightbox slideshow widget.

    That worked like a charm.

    And it is really appreciated that you took out time to due a quick example and upload. Very nice of you.

  18. MuseBoy says:

    Hi Steve,

    I had another query for you.

    I was looking to export to HTML via Muse and I noticed that I can export to a single directory only. I hate having trailing links like mysite.com/abc.html.

    Therefore, I wanted to create a folder “abc” to put my abc.html in (as index.html of course), and then be able to access mysite.com/abc

    However I cannot seem to figure out how to change the file structure while exporting. I google’d but to no avail.

    And if this feature is currently not available, can you help me on how to change this manually?

    Thanks!

  19. Steve Harris says:

    Hi MuseBoy,

    Unfortunately you can’t change the file structure when you’re exporting – you would have to manually do this. You would need to move your html files first, and then directly link the navigation menus in Muse to the new locations (by typing the new link in the hyperlink box). You would also need to sift through the HTML code and ensure that any links to css / stylesheets was also updated with the new locations. It might be a big job…

    Can I ask why you don’t like having trailing links that have an html extension? There really isn’t any downside to having the site all in one folder (unless the site is thousands of pages).

    If you just want to send someone a link and have it look “clean”, often I’ll just use redirects – so manually create the folder on your FTP, and place an index.html file in it with a snippet of code that redirects automatically to the alternative page.

    Good luck!

    SH

  20. MuseBoy says:

    Hi,

    I just wanted to have a cleaner look as you put it. No other specific reason for that.

    I thought of the alternative of re-directing too, but that seemed a bit of work for 20-25 pages. I was looking for a simpler option. but I guess I will work with this only :)

    Thanks!

  21. Ang says:

    Hi MuseBoy,

    For an image lightbox I know it is possible to use a different image in the thumbnail than in the hero, like if you wanted to zoom in on a section of the image but it gets pixelated with just enlarging in the thumbnail, but I don’t remember how to do it. I am wondering if you know how to do that and if so would please share the steps?

    Thank you!

Leave a Reply