Highlighted

Resizing objects as a group

Community Beginner ,
Jan 31, 2017

Copy link to clipboard

Copied

Hey guys, I've got a question, that I couldn't find any answer here. So I'm making site with multiple objects based near each one of them. Now when I resize the page the objects go extremly crazy and thanks to fluid width it's basically uncontrolable... My question is, is there any way I could group the objects to stay together until next breakpoint? My only solution to this is to have many breakpoints, but it is not very handy...

Here's what it looks like:

You are facing an issue, which many users run into.

The reason for this problem is quite simple: You are looking at your screen, you see a grid of images and all appears obvious and clear.

Why Muse seems to have a different opinion, when it comes to scaling? Because Muse can’t "see" your page!

An element of a fluid page is dynamically influencing other element below it. It pushes it down – or not.

In this simple fact there are tons of decisions, Muse has to make:

• How is the element scaling? Is it a) fixed, does it scale b) horizontally or c) proportionally or d) horizontally by simultaneously growing in height like textboxes do.

But this is not the whole game at all. The situation can be much more complicated, if there are two or more elements (perhaps with different scaling behaviour and size) in one row. Which one is "responsible" for pushing down the elements below? Quite hard to decide, and Muse has to invest quite a big amount of artificial intelligence to decide this question.

But, thanks god, we may influence Muse’s behaviour in this case by essentially two precautions:

• Try to size you objects thoroughly an align them as perfect as possible (exactly same sizes, same gutters if possible)

• Use transparent "placeholder" elements, which scale the same way as your objects are expected to do, to help Muse to decide, which element should push down which other element. Grouping these elements with the element below in most cases clarifies, what you want Muse to do.

Look at this example site (I reduced your site as much as possible to concentrate on the crucial elements):

http://image-grid.businesscatalyst.com/index.html (You may download the corresponding .muse directly from this site.

Please have a very(!) close look at the construction, and you’ll see that I added rectangles to "guide" Muse in its decision, which element should push down which other one(s). In most cases, these placeholders are referring to the top of the page. They "include" all the elements above the elements, which should move down, and they are grouped with the elements, which are expected to shift downwards.

You see: It is quite hard to explain for a non native English speaker, but analysing the file should clarify my words.

You may see as well, that nevertheless there are very slight offsets especially regarding the square elements, when minimising the browser window. I think (means: I don’t really know), this is due to mathematical rounding differences. But you can easily work around these differences by using breakpoints (the actual .muse file has no breakpoints at all).

Puh, I hope, it was somehow understandable, what I wanted to say!

Views

2.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Resizing objects as a group

Community Beginner ,
Jan 31, 2017

Copy link to clipboard

Copied

Hey guys, I've got a question, that I couldn't find any answer here. So I'm making site with multiple objects based near each one of them. Now when I resize the page the objects go extremly crazy and thanks to fluid width it's basically uncontrolable... My question is, is there any way I could group the objects to stay together until next breakpoint? My only solution to this is to have many breakpoints, but it is not very handy...

Here's what it looks like:

You are facing an issue, which many users run into.

The reason for this problem is quite simple: You are looking at your screen, you see a grid of images and all appears obvious and clear.

Why Muse seems to have a different opinion, when it comes to scaling? Because Muse can’t "see" your page!

An element of a fluid page is dynamically influencing other element below it. It pushes it down – or not.

In this simple fact there are tons of decisions, Muse has to make:

• How is the element scaling? Is it a) fixed, does it scale b) horizontally or c) proportionally or d) horizontally by simultaneously growing in height like textboxes do.

But this is not the whole game at all. The situation can be much more complicated, if there are two or more elements (perhaps with different scaling behaviour and size) in one row. Which one is "responsible" for pushing down the elements below? Quite hard to decide, and Muse has to invest quite a big amount of artificial intelligence to decide this question.

But, thanks god, we may influence Muse’s behaviour in this case by essentially two precautions:

• Try to size you objects thoroughly an align them as perfect as possible (exactly same sizes, same gutters if possible)

• Use transparent "placeholder" elements, which scale the same way as your objects are expected to do, to help Muse to decide, which element should push down which other element. Grouping these elements with the element below in most cases clarifies, what you want Muse to do.

Look at this example site (I reduced your site as much as possible to concentrate on the crucial elements):

http://image-grid.businesscatalyst.com/index.html (You may download the corresponding .muse directly from this site.

Please have a very(!) close look at the construction, and you’ll see that I added rectangles to "guide" Muse in its decision, which element should push down which other one(s). In most cases, these placeholders are referring to the top of the page. They "include" all the elements above the elements, which should move down, and they are grouped with the elements, which are expected to shift downwards.

You see: It is quite hard to explain for a non native English speaker, but analysing the file should clarify my words.

You may see as well, that nevertheless there are very slight offsets especially regarding the square elements, when minimising the browser window. I think (means: I don’t really know), this is due to mathematical rounding differences. But you can easily work around these differences by using breakpoints (the actual .muse file has no breakpoints at all).

Puh, I hope, it was somehow understandable, what I wanted to say!

Views

2.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 31, 2017 0
LEGEND ,
Jan 31, 2017

Copy link to clipboard

Copied

Yes, it is possible to achieve what you want.

Just do the following: Take the .muse file you are presenting in your video, make sure that is has only one page, upload it to Dropbox or a similar filesharing service and post the download link here. Then we'll be able to help.

It is not a big thing to resolve this issue, but working with the original file makes it much easier to clarify the problem.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2017 1
Community Beginner ,
Feb 01, 2017

Copy link to clipboard

Copied

Hey Günter, thanks for help, you have no idea how frustrating it is for me... Please don't be upset because of the number of breakpoints and edit it how you want. Can you also give me instructions how to achieve it, so I can edit it in future, please?


Also I noticed that anchors are acting pretty strange, moving around, there is not possible to pin them in the middle...

Here's the onepage file with assets.

*** deleted ***

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2017 0
LEGEND ,
Feb 01, 2017

Copy link to clipboard

Copied

You are facing an issue, which many users run into.

The reason for this problem is quite simple: You are looking at your screen, you see a grid of images and all appears obvious and clear.

Why Muse seems to have a different opinion, when it comes to scaling? Because Muse can’t "see" your page!

An element of a fluid page is dynamically influencing other element below it. It pushes it down – or not.

In this simple fact there are tons of decisions, Muse has to make:

• How is the element scaling? Is it a) fixed, does it scale b) horizontally or c) proportionally or d) horizontally by simultaneously growing in height like textboxes do.

But this is not the whole game at all. The situation can be much more complicated, if there are two or more elements (perhaps with different scaling behaviour and size) in one row. Which one is "responsible" for pushing down the elements below? Quite hard to decide, and Muse has to invest quite a big amount of artificial intelligence to decide this question.

But, thanks god, we may influence Muse’s behaviour in this case by essentially two precautions:

• Try to size you objects thoroughly an align them as perfect as possible (exactly same sizes, same gutters if possible)

• Use transparent "placeholder" elements, which scale the same way as your objects are expected to do, to help Muse to decide, which element should push down which other element. Grouping these elements with the element below in most cases clarifies, what you want Muse to do.

Look at this example site (I reduced your site as much as possible to concentrate on the crucial elements):

http://image-grid.businesscatalyst.com/index.html (You may download the corresponding .muse directly from this site.

Please have a very(!) close look at the construction, and you’ll see that I added rectangles to "guide" Muse in its decision, which element should push down which other one(s). In most cases, these placeholders are referring to the top of the page. They "include" all the elements above the elements, which should move down, and they are grouped with the elements, which are expected to shift downwards.

You see: It is quite hard to explain for a non native English speaker, but analysing the file should clarify my words.

You may see as well, that nevertheless there are very slight offsets especially regarding the square elements, when minimising the browser window. I think (means: I don’t really know), this is due to mathematical rounding differences. But you can easily work around these differences by using breakpoints (the actual .muse file has no breakpoints at all).

Puh, I hope, it was somehow understandable, what I wanted to say!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2017 4
Community Beginner ,
Feb 01, 2017

Copy link to clipboard

Copied

Günter you are genius! Btw your english is way better than mine, your explanation was very clear and understandable. Thank you very very much sir!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2017 0
LEGEND ,
Feb 01, 2017

Copy link to clipboard

Copied

I see, I forgot your "anchor question".

Anchors are targets to which a browser jumps, when clicked onto a link. Normally, the anchor's name is then added as ".#anchorname" to the URL of your page.

The convention is, if you click onto an anchor link, the browser will scroll your page, until the anchor is placed exactly at the top left corner of the browser window.

This behaviour has two implications:

1. If you have placee an anchor in the middle or to the right of the page, the content of your browser window will scroll not only vertically, but shift horizontally as well, in order to position the anchor to the top left corner of the window. Sometimes this behaviour may be desirable, but if not: Place your anchors always vertically aligned to the left edge of your defined page.

2. If your page is too short, an anchor may not be able, to reach the top left corner of the browser window, because the end of your page is reached before. A browser normally won't display the bottom of a page somewhere in the middle of the window in order to push the anchor to the top left corner.

Hope this helps to solve your issue.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2017 2
Community Beginner ,
Feb 02, 2017

Copy link to clipboard

Copied

OK, will place them to the top left! Thanks again mister, you've been very helpful!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 02, 2017 0
Engaged ,
Jun 10, 2017

Copy link to clipboard

Copied

Super fantastic wonderful advises here. Thank You!

And ok. I want to make articles with text, graph's picture's and illustrations mixes in a non-equal order (read hopeless) I can do that by

Building up the page in boxes /placeholders?.- with text, with illustration, etc and the fill all the gap's with transparent placeholders?

And do I then not have to think at responsive design in my site,- except from doing a hamburger meny?

Is that the way to make articles in Muse?- is there not any "copy and paste"  from other programs?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
LEGEND ,
Jun 10, 2017

Copy link to clipboard

Copied

Yes – or no, it depends. You should tell us more precisely, what you want to achieve.

Using placeholders will let you much more easy build and test your site. You can fill in the needed assets later on.

Of course you can copy and paste. But there are restrictions:

Text styles from other applications will not be copied, because you can’t make sure, that all these styles are supported in the web.

Talking about images, it is possible to copy and paste, but you shouldn’t do this. Because you have no simple access to these assets, if you need to modify them. Saving them to your machine or to Creative Cloud will be the more appropriate way.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Engaged ,
Jun 10, 2017

Copy link to clipboard

Copied

Skjermbilde 2017-06-10 12.15.39.png

This for instance:

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Engaged ,
Jun 10, 2017

Copy link to clipboard

Copied

I think it is a little scary to do all in Muse. I love inDesign and would love to do my writing and design there and then transfer it to Muse. I do see the point with asset in muse and like that.

Another thing is the font. Is all font from Muse uploaded as images? I think they look blurry.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
LEGEND ,
Jun 10, 2017

Copy link to clipboard

Copied

1. You can't transfer InDesign layouts to Muse. Print design and web design are much too different, and thousands of features, available in print design, aren't possible in web design.

2. Text is converted to an image, if you use system fonts. In that case, you can't guarantee, that these fonts are installed on your visitor's machine. Have a close look into Muse's font menu and you'll find an alert, which group of fonts will be converted and which will not.

3. The layout you showed us, is doable in Muse. But you have to make clear and understand, that some element scale differently within a responsive design: Text elements only scale horzontally and grow vertically if needed. Images scale proportionally. Rectangle can scale proportionally or horizontally. In the second case, they try to shrink/grow according to the elements, you have placed "into" it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 1
Engaged ,
Jun 10, 2017

Copy link to clipboard

Copied

So, it is never a good idea to have a text frame and a image/illustration at the same horizontal line?

And yes, I did it directly in muse but some people complains and say that the illustration sometimes cover the text.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0
Engaged ,
Jun 10, 2017

Copy link to clipboard

Copied

I'm working with doing the site responsive right now. Hope it helps 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2017 0