Getting started with responsive design in Adobe Muse

Read this article to get started with responsive design in Adobe Muse. Learn how to create responsive sites for any device.

Opomba:

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

While you create a responsive site, it may not be helpful to add breakpoints based on a specific device, OS, or a product brand. Defining breakpoints based on these factors can prove to be high maintenance. Instead, the layout and the content of your website should determine how and where you add breakpoints.

Read on to know the recommended design approach to create a responsive site using Adobe Muse.

Create a site. Choose Fluid width from the New Site dialog box.

To avoid white space and other design issues, set your page dimensions. Click Advance Settings to set the Min, Max page width, and the Min height for your site.

In the New Site dialog box, select Fluid Width.

Open a Master page or an individual page. Notice the default breakpoint at 960 pixels.

Notice the default breakpoint at 960 pixels.

Begin laying out your page elements such as text, images, slideshows, and widgets at this breakpoint.

Lay out your web page.

Use the scrubber to simulate various browser widths. See how your site displays in different browser widths.

Use the scrubber to see how your website displays in different browser widths.

Wherever your design breaks, add a breakpoint. For example, in the previous image, notice the text box going out of width when you drag the scrubber. Add a breakpoint at that width where the design breaks.

Add a breakpoint wherever your design breaks.

Adjust your layout at the new breakpoint such that your site looks well laid out.