I've seen thru numerous advice sources that you shouldn't necessarily set your breakpoints for the devices, rather set the breakpoint when your design naturally starts to break. My trouble is that my design breaks down every few px. The main design feature thats giving me issues is a grouping of various colored boxes with an animated icon widget inside along with text. As soon as I move the scrubber, the boxes becomes unaligned, and the text and widget then distort. I saw that some of muse's widgets aren't responsive yet. I could deal with the text and widget, but having the boxes break down is driving me nuts. Any help would be appreciated!
The first photo is at 768px, the second is at 718px.
The difficulty, which you are facing, is to align differently scaling boxes.
Additionally you have elements of different size and overlapping elements (text on image, text on rectangles, images on rectangles).
You are using
To find a way, that all elements despite their scaling differences move synchronously is not easy, sometimes impossible, sometimes achievable by using some tricky precautions. This is not a Muse problem, but an unavoidable difficulty of responsive design.
Look at this tiny screencast, which illustrates parts of the problem:
Nevertheless, please do the following:
Place the elements, shown in your screenshot (and please: only these, and no others!!) into a newly created .muse file with only one breakpoint and share it with us using Dropbox, Creative Cloud or a similar filesharing service and post the download link here. Then we’ll have a closer look.
You may follow these instructions: https://forums.adobe.com/docs/DOC-8652
Your layout can not be reproduced using a fluid layout and fluid breakpoints. I suggest you use a fixed layout and fixed breakpoints. I made two breakpoints. I think further you can do it yourself. I recommend that you use such breakpoints for your project: 1400 (basic site setup), 1200, 1024, 768, 480 - all breakpoints is fixed .
You layout shows us, that you are not THAT experienced in using Muse, aren’t you ?
We should ask ourself, if it is really necessary to build a responsive site, if we are not experienced with the „laws“ of responsiveness and the way Muse handles these „laws“. Mostly, responsiveness is only a means, to demonstrate this nice effect of dynamically adapting elements when the browser window is resized. Is this really worth the effort? Eye candy instead of a clearly structured, smoothly working site? The web site creator has to decide this by her/himself – and has to bear the consequences.
If you build a fixed width site with fixed width pages and fixed width elements, it should be no problem at all, to create a site in exactly the way, your actual document is showing us. You will meet no real difficulties with this, and your site will look fine.
But if you build a responsive site, you definitely have to obey the "incontrovertible rules of responsiveness".
Think more in terms of an exact grid, than in terms of a pinboard, which you are deliberately filling with elements:
But back to your issues:
Please have a look at my previous posting and understand, what "different scaling behaviour" is meaning in terms of responsive layout:
One simple example:
You have a text frame, which grows vertically when you reduce your browser window, The element below will be pushed down.
If next to the text frame is an image, it will scale down proportionally, when the browser window is reduced. The elements below will not be pushed down, they will move upwards.
What to do, if you want all these elements to react synchronously? Not that easy, isn’t it?
Which element should push down which other element, if there is more than one „candidate“ to cause this behaviour, or if there are elements which are overlapping each other?
Look at your page:
You see questions and questions and questions! And, believe me, there are many more of these, only concerning this little part of your layout. How should Muse decide, which elements is supposed to interfere with wich others, and which don’t interfere or are forbidden to interact?
There is a way to help Muse doing its job:
One more word: You are using a 3rd party widget „Animated Icons“ which resists every responsive layout, not only, because this widget can’t react responsively and can’t be placed exactly into your “imaginary grid“ (It will always overlap the single „tiles“ of your layout. Therefore: Renounce these eye candies and use Muse’s built in effects.
Here you see your layout in a working version (not really perfect, because done within some minutes):
You may download the respective .muse file directly from this sample site.
In the .muse document, please look
Now have fun!
Excellent post Günter. But you, as always, delve into a particular solution to a particular problem. I think within the whole site to make it fluid - it will be very difficult, if at all possible, work. Therefore, I always suggest using just fixed breakpoints and a fixed layout.
You are right, Pavel.
If (a) one isn‘t really experienced in using Muse, and (b) wants to build a site, as one would usually do in print layout, it would be really better, to use fixed width layouts.
I never understood this responsive hype. Really think, most „designers“ find it simply cool, watching elements adapt and resize according the browser window. Wow!
But what does this contribute to the „essence“, to the „meaning“ of one‘s site? Only a little more than nothing.
It is like an action movie with a poor plot …
It is like an action movie with a poor plot …
It's not possible to say better