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.
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.
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.
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
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:
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.
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?
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.
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?
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.
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?
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.
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:
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.
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?
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.
Sorry, I can't upload a .muse: That image type is forbidden.
Is there another way to send you the file?
I already got it in an extra email and was wondering.
Ow, sorry. Thank you for sending it to Uwe.
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.
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.
Is this behavior something wanted?
I found out, unchecking the composition elements to show always (downside left 2 checkmarks) handles this issue:
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!
Adobe staff, please remove this post. Thank you.