How many breakpoints required for Adobe Muse Created Responsive Website?

Since the release of Responsive Adobe Muse in Feb 2016 a lot of Muse users has asked about the ideal breakpoint sizes that they should have  to ensure their site loads perfectly on all commonly used devices.

Everyday a new device is launched in the market that has different browser width. So if we start creating a list of all the devices and their Bowser width then we will be able to cover all the numbers starting from 320 px to 2200 px. So are we going to create breakpoint for each device? Answer is NO.

First Of all we need to understand that when do we require to create a Breakpoint while designing the site in Muse. As per Dani Beaumont :

You create a Breakpoint when your design breaks.

To understand this statement you need to first understand few options in Muse That are responsible for creating responsiveness in a web page.

Resize Options:  This options lets you define the behavior of the elements when when your default designed in loaded in a different screen size. F

Responsive Positioning Options: With the help of these options you can set an element to re-position it self from Left, right or center edges of the page.

Scrubber Bar: This Bar at the right side of the design page let you reduce the size of the page in design mode to check how the elements will behave depending on the Responsive resize and positioning options.

So now create the biggest breakpoint you are targeting for your website and place your site content in it. Once done designing your page using responsive tools provided in Muse CC 2015.1 go ahead and move the scrubber to the left. As soon as you see the design of the page is not working as expected then create a breakpoint. Now reposition and resize the elements in this new breakpoint and follow the same steps untill you get the perfect flow of the page.

Feel free to ask any question on this and I will try to respond.

Leave a Reply