Semi-Newbie with Muse - Please Help with Understanding Layouts!

[ShckBytePro]

Hello all,

For some reason I can't seem to understand the concept of having three alternate layouts. I have originally created all breakpoints in my Desktop version and it looks good. I am able to view my smaller breakpoints on my Android phone and able to get those to look good too.

My issue is this: I go to create an alternate phone layout because I just found out that you can preview the latest mobile phones and nothing seems to work. It could be my design or just my lack of knowledge of the program. It says when I Publish to get rid of duplicate breakpoints in layouts and I did this. Only a view layouts look ok in the phone layout.

Here is my site I am doing for a friend. I have created numerous sites in Dreamweaver over the years, but never for a phone or tablet layout and especially in Muse.

http://ruthienergy/businesscatalyst.com

If anyone could help me understand what I am doing wrong I would greatly appreciate it!!!!! I feel really dumb at this point that I can't seem to understand how to make it work. Thank you!

[fotoroeder]

As far as I experienced you should choose between alternate layout or responsive layout.

If you use responsive layout with breakpoints there´s no reason to create alternate layout. You could do it in just one step.

Alternate Layout has fixed all widths. No breakpoints necessary.

Responsive layout is also better for SEO, I heard.

Best Regards,

Uwe

P.S. your link does not work.

That´s the correct address:

Home | Ruthienergy: A Magical World of Self-Discovery

[ShckBytePro]

Thank you very much for the clarification Uwe. Do you know how I would test for mobile and table compatibility if I only have a responsive design layout? Besides the obvious of having to check on every current device. Thanks.

[fotoroeder · Accepted solution]

Well, with responsive design you don`t really necessarily decide between desktop , tablet and phone versions.

You just use this grey scrubber on the top right hand side at the breakpoint bar and move it.

As soon as your design starts to "break"/"bleeds" outside the canvas you add a breakpoint and adjust your elements

as desired. It is good practice, while doing responsive design, to start with fixed width breakpoints.

What I do normally.with Safari there´s a tool called "Developer", I check responsive design.

All this beside the test on real devices.

There´s also one from chrome, which I forgot the address. This one from chrome has more devices in its case to test, but also – real devices are necessary to test.

I started to watch some DW tutorials and realized, they go with alternate layouts kind of mixed with fluid width breakpoints.

So this might be a difference between those two but important to know, I guess.

Best Regards,

Uwe