How it works
When creating a new site, the option is front and center. Adobe redesigned the New Site dialog box giving you the option to create a fixed-width layout or a fluid width layout.![fig01](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig01.png)
![fig02](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig02.png)
Adding breakpoints
Adding breakpoints in Muse is simple and intuitive. On the right-hand side you will see a scrubber that allows you to resize the width of the page, simulating a browser resizing.![fig03](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig03.png)
![fig04](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig04.png)
![fig05](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig05.png)
![fig06](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig06.png)
Master pages
Master pages have their own breakpoints, which respond independently of the pages they are applied to. This gives you specific control over the master page content, typically a header and footer.![fig07](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig07.png)
Formatting content at breakpoints
When you add a breakpoint, you can reflow the content any way you’d like. Often times you’ll take an approach where you stack content, or resize the content so it’s larger making it easier to view on smaller screens. It’s not uncommon to show less content. As the screen gets smaller the content should get more specific. In the example below, you’ll notice that I went from a three-column layout for the larger breakpoint to a two-column layout for a smaller breakpoint. The images and text become larger, making it easier to view on a smaller screen.![fig08](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig08.png)
![fig09](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig09.png)
Migrating a site to responsive
If you’ve worked with Muse in the past, and have a fixed-width site, it is possible to migrate it to a responsive layout. What’s important is changing your site properties. To do this, select File>Site Properties to open the Site Properties dialog box. Here you can change the layout from Fixed Width to Fluid Width. Next you need to change attributes of the elements that you want to be fluid. You can do this by removing any previously established pins. You should then right-click on the object and select resize. This will give you various responsive options to select from.![fig10](https://www.webdesignerdepot.com/cdn-origin/uploads/2016/03/fig10.png)
Conclusion
There are few things that aren’t ready for “responsive primetime” in Muse. Scroll effects are not supported just yet. Which means if you need to use these types of effects, you’ll be stuck with an adaptive solution for the time being. Also, not all widgets are responsive either, though the folks at Adobe are working on it and I would expect both of these limitations removed with future updates. The new responsive feature set in Adobe Muse CC is a welcome addition to an already powerful visual web design tool. It offers designers the ability to create responsive content visually and in an environment that is intuitive and familiar.Matthew Pizzi
Matthew Pizzi is an Adobe Certified instructor with over 15 years of experience teaching Adobe applications. He has been a speaker at industry events like Adobe MAX and Social Media Week and has authored several books on Adobe’s products. Matthew’s training videos are featured regularly on Adobe.com which demonstrate new and important features of their Creative Cloud offerings. You can visit Train Simple to view his online courses.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…