Highlighted

Problems with vector images in mobile menu

Community Beginner ,
Jul 24, 2017

Copy link to clipboard

Copied

I'm having trouble with vector graphics in Muse on a mobile version of a website. I'm hoping someone here can help. Here's the situation:

I have a site with 2 breakpoints: one at 961+ as a fixed width for desktop viewing, and one at 960 or less with fluid width for mobile viewing. My mobile version uses a menu button at the top right that opens a graphic menu with clickable icons as links. The menu button opens a lightbox that has the icons within it and centers to the page automatically. When I was using raster images they worked fine but looked terrible on mobile screens with high resolution (Galaxy S8, iPhone 6+). This is because the text at the bottom "click to close" was being rendered in full resolution while the mobile icons were stuck at 72dpi. So I tried switching the icons to vector images (SVG) but then Muse would freeze anytime I would try to export, even just to preview.

Now I've made all the icons into .AI files linked within my CC Library. The icons look great on mobile, but they don't load right away. When I click on the MENU button I see the lightbox I've created but the icons are not present. If I scroll up and down a little bit the icons appear and everything looks great. But my client isn't going to be happy with this behavior.

The website is currently here

Am I doing something wrong? Is there a better way to do this? Should I be using vector images or is there a way I can get the raster images within the mobile menu to be as sharp as the rest of the text?

Thanks in advance

Try the following:

Your menu is a composition, set up as a light box.

Since compositions and its lightboxes aren’t responsive in the actual version of Muse, it is unnecessary to set up the icons to scale „responsive width and height". When you set the icon not to scale, all works fine.

This seems not to be the „fundamental" cause, because your composition works fine, if pasted onto a newly created site/page without any other elements, but nevertheless: It works!

Views

211

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

Problems with vector images in mobile menu

Community Beginner ,
Jul 24, 2017

Copy link to clipboard

Copied

I'm having trouble with vector graphics in Muse on a mobile version of a website. I'm hoping someone here can help. Here's the situation:

I have a site with 2 breakpoints: one at 961+ as a fixed width for desktop viewing, and one at 960 or less with fluid width for mobile viewing. My mobile version uses a menu button at the top right that opens a graphic menu with clickable icons as links. The menu button opens a lightbox that has the icons within it and centers to the page automatically. When I was using raster images they worked fine but looked terrible on mobile screens with high resolution (Galaxy S8, iPhone 6+). This is because the text at the bottom "click to close" was being rendered in full resolution while the mobile icons were stuck at 72dpi. So I tried switching the icons to vector images (SVG) but then Muse would freeze anytime I would try to export, even just to preview.

Now I've made all the icons into .AI files linked within my CC Library. The icons look great on mobile, but they don't load right away. When I click on the MENU button I see the lightbox I've created but the icons are not present. If I scroll up and down a little bit the icons appear and everything looks great. But my client isn't going to be happy with this behavior.

The website is currently here

Am I doing something wrong? Is there a better way to do this? Should I be using vector images or is there a way I can get the raster images within the mobile menu to be as sharp as the rest of the text?

Thanks in advance

Try the following:

Your menu is a composition, set up as a light box.

Since compositions and its lightboxes aren’t responsive in the actual version of Muse, it is unnecessary to set up the icons to scale „responsive width and height". When you set the icon not to scale, all works fine.

This seems not to be the „fundamental" cause, because your composition works fine, if pasted onto a newly created site/page without any other elements, but nevertheless: It works!

Views

212

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
Jul 24, 2017 0
Community Beginner ,
Jul 24, 2017

Copy link to clipboard

Copied

One thing I forgot to mention: you can only see the mobile menu if your browser width is 960 or less. It's best viewed on a mobile device.

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...
Jul 24, 2017 0
LEGEND ,
Jul 24, 2017

Copy link to clipboard

Copied

Could you please delete all pages except the homepage and all elements except the mobile menu with its icons. Then upload this reduced .muse file to Dropbox or a similar file sharing service and provide the download link here. The we can have a look.

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...
Jul 24, 2017 1
Community Beginner ,
Jul 24, 2017

Copy link to clipboard

Copied

I'll do this when I get a chance. One question: should I keep it with the 2 break points or just the one?

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...
Jul 24, 2017 0
Adobe Community Professional ,
Jul 24, 2017

Copy link to clipboard

Copied

Two breakpoints at 961 and 960 makes no sense because between those two, what should happen to your design?

Breakpoints are for the purpose to keep layout inside the canvas without distracting each other.

It`s interesting to use only one breakpoint, so keep us in touch.

Uwe

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...
Jul 24, 2017 0
Community Beginner ,
Jul 24, 2017

Copy link to clipboard

Copied

There is nothing between 960 and 961. If the browser is 961 or larger it displays the desktop version. If it's 960 or less (minimum of 320) then it shows the mobile.

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...
Jul 24, 2017 0
Adobe Community Professional ,
Jul 24, 2017

Copy link to clipboard

Copied

That`s what I tried to say with a rhetoric question: there´s no need for two breakpoints with a distance of 1 px.

Keep on and try your very best …

Uwe

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...
Jul 24, 2017 0
Community Beginner ,
Jul 24, 2017

Copy link to clipboard

Copied

Are you trying to solve my problem in the original topic? If not, then there's no reason to continue posting here. I understand I don't have two breakpoints, I'm only using one. I said two breakpoints to differentiate between the mobile version and the desktop version. I'm only looking to solve the vector image problem in Muse, I'd rather not talk about terminology. Thanks.

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...
Jul 24, 2017 0
Adobe Community Professional ,
Jul 24, 2017

Copy link to clipboard

Copied

greyorangestudios  schrieb

I'll do this when I get a chance. One question: should I keep it with the 2 break points or just the one?

That was my answer to your question.

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...
Jul 24, 2017 0
LEGEND ,
Jul 24, 2017

Copy link to clipboard

Copied

Give us the .muse file, and we'll see …

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...
Jul 24, 2017 0
LEGEND ,
Jul 25, 2017

Copy link to clipboard

Copied

Try the following:

Your menu is a composition, set up as a light box.

Since compositions and its lightboxes aren’t responsive in the actual version of Muse, it is unnecessary to set up the icons to scale „responsive width and height". When you set the icon not to scale, all works fine.

This seems not to be the „fundamental" cause, because your composition works fine, if pasted onto a newly created site/page without any other elements, but nevertheless: It works!

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...
Jul 25, 2017 1
Community Beginner ,
Jul 25, 2017

Copy link to clipboard

Copied

That solved it, thank you!

It was an oversight on my part. I didn't realize Muse was placing the .AI files from my CC library as responsive height and width. Changing them to fixed height and width fixed it right away. I'll remember to always check elements for responsive properties when facing problems in the future.

Though I'm still confused about the vector problem, why my Muse would freeze when exporting a page using SVG images. Maybe I'll try to replicate it and see if it was the responsive properties causing the issue.

Thanks again!

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...
Jul 25, 2017 0