Responsive design is supported in the Adobe Muse February 2016 release and later. If you have created websites in versions prior to the February 2016 release, you can convert your sites to responsive design.

Why should I migrate to responsive layout?

If you have an existing Adobe Muse project using alternate layout, you can migrate your project to responsive layout. However, if you want to continue working with alternate layouts, you can do that as well.  

Responsive sites are usually synonymous with lots of coding, and complex templates. For the first time, Adobe Muse offers you the ability to create responsive sites without any coding, and without any grids or templates. Further, you can use a single file to create fully responsive sites that look well laid out in any device, having any screen size. Separate layouts are now a thing of the past!

Updating your text and images is also very convenient with Adobe Muse responsive design. You need not spend hours to update each layout with the same change. Additionally, In-Browser Editing, an application that lets you edit site content through browsers, also supports responsive layout.

Adobe Muse also offers several flexibilities when you design your site. You can choose to show or hide specific objects in specific breakpoints. For example, you can choose to show touch friendly menu options when your site is viewed through mobile devices. You can also pin objects to a location, or reposition objects in specific breakpoints.

Read on to know how to migrate your existing Adobe Muse sites to responsive layout. Migrate your site to responsive design, and make your websites future-friendly.

How to migrate alternate layouts to responsive layout?

Before you migrate your website to responsive layout, you may want to see an overview of responsive web design in Adobe Muse.

To begin migrating your site to responsive layout:

  1. Open your existing website.

  2. Open each page in your website, and click Page > Page Properties.

    Click page properties
  3. On the Layout tab, change Fixed Width to Fluid Width. You can also set your Min, Max Page Width, Margins, and Padding from this window.

    Click OK.

    Change Fixed Width to Fluid Width
    Change Fixed Width to Fluid Width in the Page Properties window.

  4. To ensure any new pages that you add are also fluid, click File > Site Properties. Modify Fixed Width to Fluid Width in this window.

  5. Choose the maximum page width, minimum width, and minimum height for your layout.

  6. Click OK.

  7. Go to the master page and individual pages to open your pages in Fluid Width.

    To effectively use responsive design, disable scroll effects. If you want to retain scroll effects for specific pages, continue with Fixed Width for these pages.

    When you open the pages in Fluid Width, by default the objects in the page have Fixed Width settings. The objects are also pinned to left.

  8. Make the objects fluid so that the objects resize in proportion to the browser width. Right-click each of the objects that need to be fluid, and select the Responsive option.

    Remove pinning if you want the objects to be fluid. To remove pinning, right-click the object and select Pin to Page > Fluid.

  9. Use the scrubber and view your page layout in different browser widths.

    You will notice that some widgets are not fluid. Wherever these widgets break the design, add breakpoints at those page widths. You can then either resize the widget for that breakpoint, or hide the widget for that breakpoint.

    By default, the breakpoint bar is not visible when you are working with a website created in previous versions. To show breakpoints, click View > Show Breakpoints.

    Show breakpoints through View menu
    Click View > Show Breakpoints.

    Note:

    When you plan your layout in responsive design, lay out your pages for the largest page width first. Then, view the pages at different browser widths by using the scrubber. If your design breaks, add breakpoints at those widths. Then adjust your layout at these breakpoints.

    As a rule of thumb, add breakpoints based on the layout of your site and not based on the screen size of the user's devices.

  10. Adjust the size and position of objects, and format text so that they appear well laid out in all the browser widths. For information on laying out objects in responsive layout, see Lay out objects in responsive web design.

    Note:

    When you lay out objects, check the distance between the objects and the distance between the object and the edge of the browser. You may need to adjust the object placement, or add more breakpoints to address the design problems that occur between breakpoints.

  11. Check the alignment and readability of your text at all breakpoints. If you want to realign the text box, or format the text for specific page widths, see Formatting text in responsive layouts.

  12. Preview the changes by dragging the scrubber to specific breakpoints, or preview the changes in a web browser.

  13. Delete any alternate layouts of your website you may have created for other devices. Responsive web design allows you to migrate and maintain your site for all the devices, in a single canvas.

Your responsive website is now ready to be published!

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy