Getting started with responsive design in Adobe Muse

Getting started with responsive design in Adobe Muse

Search
Adobe Muse User Guide
Applies to: Adobe Muse

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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

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.

1

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.
In the New Site dialog box, select Fluid Width.

 

 

 

2

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


Notice the default breakpoint at 960 pixels.
Notice the default breakpoint at 960 pixels.

 

 

 

3

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


Lay out your web page.
Lay out your web page.

 

 

 

4

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.
Use the scrubber to see how your website displays in different browser widths.

 

 

 

5

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.
Add a breakpoint wherever your design breaks.

 

 

 

6

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


Adjust your layout at the breakpoint
Adjust your layout at the breakpoint

 

 

 

7

Continue to preview your site until the minimum width. Add breakpoints and tweak your layout wherever required.


With this design approach, your site looks good in any browser width, viewed from any device. Your design is independent of a specific device size, or screen size.

See also