Responsive web design is an approach to creating websites that can be viewed across a wide range of devices, from desktop monitors to mobile screens. Adobe Muse allows you to create responsive websites for any screen size, without any coding. Responsive layout provides users a consistent browsing experience with your website.

In the previous versions of Adobe Muse you were using alternate layouts to create a site. With the introduction of responsive layout, you only need to maintain a single .muse file for all the devices.

With mobile-only and mobile-friendly sites becoming more and more popular, using responsive layout saves cost, time, and efforts. Further, you also have the flexibility to modify your page design for specific breakpoints. Mobile sites will be the order of the day in the future. Responsive, mobile-friendly sites are ranked better in searches, and these sites provide better SEO ranking in mobile and desktop searches.

As technology and devices continue to evolve, responsive layout may become the order of the day. Read on to know how to create and design a responsive site, or migrate from alternate layout to responsive layout in Adobe Muse.

Understanding breakpoints

Breakpoints in a responsive layout let you define different layouts for different browser widths. Breakpoints represent a browser width in pixels, and are represented by minimum, maximum, or min-max values. The view of your design at every breakpoint is what your users see at the corresponding browser width. Breakpoints allow you to visualize your design in different browser widths, and test how the objects in a page respond to the change in browser widths.

Notice the Breakpoint bar just below the ruler, which displays all the breakpoints on a page.

Breakpoint bar
A. Breakpoint bar B. Active breakpoint C. Scrubber 

You can see the associated browser width and page size values by hovering your mouse over the breakpoint bar.

When you click on a breakpoint, the active breakpoint is highlighted by a color. The rest of the breakpoints are grayed out. You can view and change the breakpoint color from Breakpoint Properties (Right-click breakpoint > Breakpoint Properties).

Breakpoint properties