Highlighted

What is the best way to make this site better

Community Beginner ,
Sep 04, 2017

Copy link to clipboard

Copied

I have made this site a year ago: Metmateman Grafisch Ontwerp

But I want to make it technical a better site. To place the latest work on it, it is a hell of a job. There must be an easier way.

How do I rebuild this site? Do I have to prepare the backgrounds and pictures in Photoshop and place a png/jpg in Muse? Now is everything placed in Muse, with a lot of anchors and breakpoints (to many).

Please give me some tips to make it more professional.

Thank you

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

Lately Muse has updated and you would need less breakpoints for your existing website.

Using slideshow is, of course another way as these are responsive as well.

You could easily combine those two suggestions as slideshows are much more easy to "create", even if there´s only one

picture included.

1) You could push down your content by the height of one background tile with this tiny little double arrow on the left hand side:

Bildschirmfoto 2017-09-05 um 07.46.54.png

2) Then you just copy the top tile with its content, by click-holding with alt key and move it, still holding the alt key to the top place (where you have recently "made" some space before), make your color settings to the copied background, replace the old image of the slideshow with the latest image you like and you´re pretty much done. All anchors are shifted with the moving from 1).

If you also copied the anchor, which may take some care about choosing really everything from the top tile, you also have a new anchor as well, rename it.

Decide, wether to delete the oldest tile with its content or keep it.

That´s just one way, if you don`t want to spend too much time in a complete new design.

Need more advices? Let us know.

Best Regards,

Uwe

Views

667

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

What is the best way to make this site better

Community Beginner ,
Sep 04, 2017

Copy link to clipboard

Copied

I have made this site a year ago: Metmateman Grafisch Ontwerp

But I want to make it technical a better site. To place the latest work on it, it is a hell of a job. There must be an easier way.

How do I rebuild this site? Do I have to prepare the backgrounds and pictures in Photoshop and place a png/jpg in Muse? Now is everything placed in Muse, with a lot of anchors and breakpoints (to many).

Please give me some tips to make it more professional.

Thank you

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

Lately Muse has updated and you would need less breakpoints for your existing website.

Using slideshow is, of course another way as these are responsive as well.

You could easily combine those two suggestions as slideshows are much more easy to "create", even if there´s only one

picture included.

1) You could push down your content by the height of one background tile with this tiny little double arrow on the left hand side:

Bildschirmfoto 2017-09-05 um 07.46.54.png

2) Then you just copy the top tile with its content, by click-holding with alt key and move it, still holding the alt key to the top place (where you have recently "made" some space before), make your color settings to the copied background, replace the old image of the slideshow with the latest image you like and you´re pretty much done. All anchors are shifted with the moving from 1).

If you also copied the anchor, which may take some care about choosing really everything from the top tile, you also have a new anchor as well, rename it.

Decide, wether to delete the oldest tile with its content or keep it.

That´s just one way, if you don`t want to spend too much time in a complete new design.

Need more advices? Let us know.

Best Regards,

Uwe

Views

668

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
Sep 04, 2017 0
Adobe Community Professional ,
Sep 04, 2017

Copy link to clipboard

Copied

The easiest way is probably to prepare the pictures in Photoshop and make the backgrounds in Muse. You can also consider using a slideshow for your work. With a slideshow it is easy to place your new work in the existing slideshow.

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...
Sep 04, 2017 0
Community Beginner ,
Sep 04, 2017

Copy link to clipboard

Copied

Hello Marja,

Thank you for your reply. I do not understand why a slideshow is easier to work with.

If I want to update the site with the latest work, I want it at the top of site. Than I have to move all items downward, and correct all items in de breakpoints.

The photo's are prepared in Photoshop and placed in Muse on a white box.

Hope to hear from you.

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...
Sep 04, 2017 0
Adobe Community Professional ,
Sep 04, 2017

Copy link to clipboard

Copied

Lately Muse has updated and you would need less breakpoints for your existing website.

Using slideshow is, of course another way as these are responsive as well.

You could easily combine those two suggestions as slideshows are much more easy to "create", even if there´s only one

picture included.

1) You could push down your content by the height of one background tile with this tiny little double arrow on the left hand side:

Bildschirmfoto 2017-09-05 um 07.46.54.png

2) Then you just copy the top tile with its content, by click-holding with alt key and move it, still holding the alt key to the top place (where you have recently "made" some space before), make your color settings to the copied background, replace the old image of the slideshow with the latest image you like and you´re pretty much done. All anchors are shifted with the moving from 1).

If you also copied the anchor, which may take some care about choosing really everything from the top tile, you also have a new anchor as well, rename it.

Decide, wether to delete the oldest tile with its content or keep it.

That´s just one way, if you don`t want to spend too much time in a complete new design.

Need more advices? Let us know.

Best Regards,

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...
Sep 04, 2017 0
Community Beginner ,
Sep 06, 2017

Copy link to clipboard

Copied

Hello Uwe,

Thank you very much for your comment, it is really helpful! I am going to build a new site with less breakpoints and slideshows.

What do you advice to put breakpoints at 320, 760 and 960 (or 1200) pixels?

Thank you,

Regine

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...
Sep 06, 2017 0
Adobe Community Professional ,
Sep 06, 2017

Copy link to clipboard

Copied

That´s a very good question and as of this reading I would try to use as less breakpoints as possible. In your case it should work with the widest dimension of (to say a number) 1900 ( I use an old MBP 17" ), 1200 - 960 - 768 - with a minimum width of 320.

Please no breakpoint at 320 .

As slideshows are responsive now, that should work out pretty well.

But, be aware, breakpoints are not to be set in stone, use breakpoints when your design doesn`t fit any longer, not because someone tells you you need it at 1200/960/768/…, promise?

It is best practice to start at the widest width until everything fits perfect and then start to use the scrubber (not earlier – that´s hard to follow, I know) and watch your design.

I recommend for testing out breakpoints to use element by element (tile by tile) on a separate site and test it on BC as a free version.

Best Regards,

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...
Sep 06, 2017 0
Community Beginner ,
Sep 06, 2017

Copy link to clipboard

Copied

Hello Uwe,

I have learned a lot today, also what a scrubber is 😉

One thing I don't understand, why is it not nessary to place a breakpoint at 320? The elements and text size must be a lot smaller than 760. Is there another way to reach that?

Kind regards,

Regine

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...
Sep 06, 2017 0
Adobe Community Professional ,
Sep 06, 2017

Copy link to clipboard

Copied

Well, it simply "stops" at 320. A breakpoint tells the browser: "Now you must show another version of the website."

You setup your website at, let`s say 768 and it should also fit (responsive elements) into 320 by resizing or whatever.

In some cases elements were just small enough to fit into 320 and show also well at 768, that´s all.

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...
Sep 06, 2017 0
Community Beginner ,
Sep 07, 2017

Copy link to clipboard

Copied

Hello Uwe,

Sorry to disturb you, but maybe you want to take a look at the new site. I thought it was a good idea to set the slideshows stuck in the middle, but now I am not sure anymore. I have made breakpoints (1600 1200 960 768) but now I want to make the smallest size. Maybe you will take a look and give me some tips?

Thank you!

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...
Sep 07, 2017 0
Community Beginner ,
Sep 07, 2017

Copy link to clipboard

Copied

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...
Sep 07, 2017 0
Adobe Community Professional ,
Sep 07, 2017

Copy link to clipboard

Copied

Is it the same address as in your original post? Metmateman Grafisch Ontwerp​ ?

Doesn`t look too bad, right? In my region this is one of the highest praise you can hope to get.

Didn´t look too deep (dinner with my daughter is waiting) but like it so far.

Some details like I wouldn`t set the hamburger to responsive in width and height. One size fits all, I guess.

Pinning for mobiles, especially for the ones with the "i" in their name do not like it.

That´s just quick and dirty – let me get deeper some later the day.

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...
Sep 07, 2017 0
Community Beginner ,
Sep 07, 2017

Copy link to clipboard

Copied

http://metmatemannl01.businesscatalyst.com/index.html

This is the BC link, is not ready enough for publishing online.

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...
Sep 07, 2017 0
Adobe Community Professional ,
Sep 07, 2017

Copy link to clipboard

Copied

I keep with what I mentioned earlier: I wouldn`t set everything possible to resize in width and height, in your case the logo at the left and the hamburger. There´s no reason and enough space to keep the size. You may change it from breakpoint to breakpoint but …

The same I would recommend to the logo on each slide.

Maybe it is best to keep the header and show the logo all the time, instead of letting it disapear?

On a crertain breakpoint it looks like this:

Bildschirmfoto 2017-09-08 um 00.00.04.png

I think this is not intended? The alignment/pinning/not pinning is strange especially because of this also:

and the plus on the right hand side.

It should work also with fixed width breakpoints instead of fluid width breakpoints.

Mainly because anchors do not really behave responsive and so it needs a lot of workarounds to get them good to work.

If you need assistance with this, send a small page with only one or two slides.

Best Regards,

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...
Sep 07, 2017 0
Community Beginner ,
Sep 08, 2017

Copy link to clipboard

Copied

Hello Uwe,

Thank you for your comment.

Did you have a nice dinner with your daughter? 😉

Wat about the site, the slideshows are having a fixed centre, maybe that's not right. I wil send you a part of the site, is that possible in this chat?

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...
Sep 08, 2017 0
Adobe Community Professional ,
Sep 08, 2017

Copy link to clipboard

Copied

Of course. I recommend to send a small page exactly to check how it could be done.

This behavior I recommend for personal work also because it minimizes the hazzle to handle huge pages without knowledge how to keep on especially with breakpoints.

Dinner was perfect, thanks.

Waiting

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...
Sep 08, 2017 0
Community Beginner ,
Sep 08, 2017

Copy link to clipboard

Copied

Sorry, I can't upload a .muse: That image type is forbidden.

Is there another way to send you the file?

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...
Sep 08, 2017 0
Adobe Community Professional ,
Sep 08, 2017

Copy link to clipboard

Copied

Follow these instructions:

Please Provide a .muse File to Help Us Fixing Your Issue!

Best Regards,

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...
Sep 08, 2017 0
LEGEND ,
Sep 08, 2017

Copy link to clipboard

Copied

Regine posted in the wrong thread. Here is her .muse link: Adobe Creative Cloud

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...
Sep 08, 2017 0
Adobe Community Professional ,
Sep 08, 2017

Copy link to clipboard

Copied

I already got it in an extra  email and was wondering.

Thanks

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...
Sep 08, 2017 0
Adobe Community Professional ,
Sep 08, 2017

Copy link to clipboard

Copied

Master:

1) Responsive width for the logo down left not necessary at higher breakpoints or even never necessary (my opinion).

2) Breakpoint at 1200 unnecessary, nothing to "break" there.

3) I would place the social icons and the logo all the same way across almost all breakpoints.

   I did now use just 1900 - 600 , that´s it. Keep the design consistent (in my opinion) as much as possible.

Adobe Creative Cloud

That´s the beginning, I guess. Look at it and tell me what you think about it.

And really, breakpoint at 320 is not necessary, trust me .

The page review will follow soon.

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...
Sep 08, 2017 0
Adobe Community Professional ,
Sep 08, 2017

Copy link to clipboard

Copied

Is this behavior something wanted?

Bildschirmfoto 2017-09-08 um 16.29.43.png

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...
Sep 08, 2017 0
Adobe Community Professional ,
Sep 08, 2017

Copy link to clipboard

Copied

I found out, unchecking the composition elements to show always (downside left 2 checkmarks) handles this issue:

Bildschirmfoto 2017-09-08 um 16.44.56.png

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...
Sep 08, 2017 0
Community Beginner ,
Sep 08, 2017

Copy link to clipboard

Copied

Ow, sorry. Thank you for sending it to 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...
Sep 08, 2017 0
Community Beginner ,
Sep 08, 2017

Copy link to clipboard

Copied

Hello Uwe,

The round menu has to stay in line, I thought that problem was solved.

At 320 everything has to be very small, that is the reason I put a breakpoint there. To make it fit for mobile.

When I move the scrubber to 320 all the items are mixed up.

Have a nice evening!

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...
Sep 08, 2017 0
Community Beginner ,
Nov 07, 2018

Copy link to clipboard

Copied

Adobe staff, please remove this post. Thank you.

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...
Nov 07, 2018 0
LEGEND ,
Nov 07, 2018

Copy link to clipboard

Copied

Please don’t remove this thread! Nobody has a right of ownership of a thread in a public(!) forum — especially, when the initial post already already got answers and statements. I think, it would be more than unpolite in regard to other contributors to delete their posts. Additionally there might be valuable informations for other community members.

It would be quite annoying, if someone contributes to a conversation and has to fear, that her/his statements may be removed, when the thread opener got his answer or looses interest in the discussed subject. If this would be common practice, it definitely would be the end of user communities.

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...
Nov 07, 2018 0