Note:
Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.
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.
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.
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:
-
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.
-
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.
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.
-
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.
-
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.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.