Learn how to create responsive sites in Adobe Muse. Use blank layouts or predefined starter templates to create responsive sites.

You can begin to create responsive websites in Adobe Muse in one of the following ways:

  • Using starter files: Adobe Muse offers customizable, responsive starter templates to help you get started quickly. Customize the starter templates and publish your responsive site with a few clicks. For detailed information, see Using responsive starter templates.
  • Using a blank layout: Adobe Muse provides a blank canvas without restrictive templates or grids to design a responsive site. Use a single Adobe Muse file to create different layouts for different browser widths. To create a new responsive Adobe Muse website, see Create a new responsive site.
  • Converting existing websites to responsive websites: Adobe Muse allows you to migrate your existing Adobe Muse sites to responsive layouts. Change the layout of your existing Adobe Muse websites to fluid width, and tweak the layout of objects to suit different browser widths. For more information, see Migrating existing Adobe Muse websites to responsive layout.

When you open a page in responsive layout, Adobe Muse displays Responsive Tour - a short slideshow on breakpoints, resizing objects, and formatting text for responsive layout. You can either continue with the Responsive Tour, or view the slideshow later by clicking Help > Responsive Tour.

To watch a video tutorial on getting started with responsive design in Adobe Muse, see the video tutorial on responsive layout.

Using responsive starter templates

Adobe Muse offers templates for different types of websites, such as, a personal site, or a site that showcases photography exhibits.

To access the starter templates, see the section on Starter Designs on the Adobe Muse page. Choose a template from the section, and click Download to download the starter files.

When you open the starter files, a master page and a set of individual pages with predefined templates open in the Adobe Muse Plan view. You can choose either Desktop (1160 pixels width), Tablet (768 pixels width), or Phone (380 pixels width) from the top panel. You can also modify the starter templates based on your requirement, and preview the pages using the scrubber.

If you do not want to download the template, you can click Preview from the Starter Design section. The sample site opens in your browser.

Create a new responsive site

To create a site with responsive layout, select the Fluid Width option from the New Site dialog box. The objects in the page automatically respond and scale according to the size of the browser. The Fluid Width option also allows you to design a responsive site on a blank layout, without any restrictive templates or a predefined layout.

  1. Click File > New Site.

    newsitefluid
    Choose Fluid Width for responsive layout

  2. Click Fluid Width. When you select the Fluid Width option, the objects on your page are fluid across breakpoints. That is, the objects respond to the browser width based on their responsive behavior.

  3. Click Advanced Settings and set the width, height, and margins for your site. You can choose to start from a browser width that is convenient for designing your site. After you lay out objects, you can add more breakpoints for additional browser widths.

    Then, select your resolution and language settings. Click OK.

    advancedsettingsfluid
    Advanced Settings while creating a fluid site

    After creating a new responsive site, proceed on to lay out images, text, and other objects for your browser width.

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