Responsive vs Alternate Layouts

Discussion in 'General Muse' started by CT-Scott, Apr 9, 2016.

  1. CT-Scott

    CT-Scott New Member

    4
    0
    I'm new to Muse. I just started playing with it yesterday. I'm a developer by trade, but I also have a strong creative streak (I have a small web design business that I haven't given much attention to over the last several years, but I still have a couple of clients I support). My daughter is an artist and I wanted to get her to stick her feet in the technology side of design but not get her scared away with tools that made her have to work with HTML. I started playing with Muse yesterday and really enjoyed using it. It got me excited about using it to redesign one of my client's sites and fixing their current problem where my last design does not display well on mobile devices.

    So I see how the response stuff works and it's neat. But I'm still skeptical about the entire thing, and part of me feels like creating a separate mobile-optimized version might still be the best way to go. Since I'm new to Muse, I'm just now learning that the responsive features are brand new and that earlier versions of Muse used the "alternate layout" approach. One might think that the fact that they now seem to be "burying" the Alternate Layout approach in the menu, rather than proudly displaying it in the forefront, means that they're pushing Responsive as the new and improved way. But is that really so?

    I see that with Responsive, I can get fancy and have elements be hidden (and other elements get displayed) when a certain breakpoint is crossed. But doesn't that mean that it's still downloading all of those graphic elements down to the mobile device and that Javascript is handling the hiding/showing of those elements? That seems like a bad thing bandwidth/speed-wise.

    Am I missing anything or are there others who feel like the Alternate Layout approach may be a better (at least in some cases) approach to follow?
     
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,416
    251
    CT, I hope that the community will jump in on this conversation, and give their opinions. I know there are many schools of thought on this.
    From my perspective, Adobe needs to refine the tool set much more before the 'bugs' are worked out. By there own admission, they have a ways to go with this initial platform. I think the important thing to keep in mind with Responsive Muse, is the Version we have today works much better when the break points are kept to a minimum. I also feel that the concentration in today's version, should be on content, and not jamming as much 'stuff' into your site as you can.
    I keep speaking of this version, because Adobe will keep putting out newer versions and bug fixes on the fly. I even think we may be seeing something not to far out that fixes some issues (those things are best found on the Adobe site though).
    Having said that, take a look at the Steve Harris article in our Blog, titled "responsive updates'. He talks about using Hybrid sites, similar to what you are describing with your Mobile design.
    To your point on the Adaptive items kinda being pushed aside, I would have to agree that Adobe would much rather move to total responsive (but I don't see that being the case anytime soon).
    With your Daughter, I think this is a platform that she could love, being an artist. My only suggestion would be to have her learn the system before she allows herself to get overwhelmed with all the things she can do.
    From my experience, I see those that grasp Muse and take it's intent and functionality to heart, are the ones I see having the most success. And that goes for either method, responsive or adaptive.
    On the flip side, I see many people that expect Muse to eliminate the need for basic design and common sense.
    Good luck, and thanks for posting. This is a topic I hope we get a ton of constructive involvement from the community.
    Dj
     
  3. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Just took my first foray into Muse responsive sites: http://joinamenify.com/joinamenify.html

    And yes, it was quite the challenge. A couple things I did learn which I didn't find anywhere else.

    • Text will only resize width in responsive layouts unless you group it with something else, then it will resize both width and height.
    • You can use rectangle elements, and stack them one on top of each other as you go down the page, to help things "stick" together. Just make sure the boxes are actually touching each other perfectly in order for this to work.
    • Grouping also helps keep things "together" but remember to plan your grouping. If you group objects and you later want to ungroup them at a smaller breakpoint, it won't work. In this case, you'll need to create a duplicate and show and hide over the various breakpoints.
    • If an image or other element is contained within a full rectangle, it will not move outside the rectangle. You can use this to help force a rectangle to grow taller if necessary.
    • I have yet to figure out how to keep a layout from pinch zooming inside of the iPhone or iPad. Once you zoom in, then zooming out is problematic in most difficult to get back to the full size layout.
     
  4. Sidders

    Sidders Member

    21
    3
    CT-Scott - I've been using Muse almost since its inception and I have to admit, there are aspects of a responsive site that just dont work. You can have lots of nice flashy widgets, flipping boxes, slideshows etc on a desktop site then you have to essentially create a new site (breakpoint) that doesnt use these as they arent designed for phones. I'm designing a site at the moment and feel I have gone back to basic images and text, which isnt a bad thing but I had assumed the point of responsive was to get it right once and then it becomes a lot easier to maintain. However i'm spending a lot of time flicking between breakpoints (4 at most) and constantly shifting stuff around, checking the broswers, going back again etc.

    I'm starting to get the feeling that responsive is good for the site templates that can be found on here which are all very crisp and minimal but there does come occasions where you need a decent amount of info, images, forms etc and there isnt the time to make sure they function correctly across all breakpoints. As it stands im tempted to design a site in desktop only and then port the info I needed across to tablet and phone as before. Maybe time will tell from Adobe!
     
  5. asifnm

    asifnm Well-Known Member

    117
    26
    If i have to design a particularly challenging website with lots of elements then I would use the adaptive method, simply start the site as a fluid site and then set the individual breakpoint as fixed width. This would then allow you to design each breakpoint as you wanted it to look and that is exactly how it would look on various devices - for instance a breakpoint of say 1400px would be shown on all desktops and laptops, a breakpoint of 768px would be shown on all portrait tablet and landscape phone and 480px breakpoint for all portrait phones. Because using fixed breakpoint has code which tells the browser to show the page at 100% your site will scale and look good on all devices. This is better than the old variant method were you had to design to a fixed width for portrait phone, portrait tablet and desktop and ended up with three sets of html files and when you needed to make a change you had to do it three times.

    Of course responsive is great as long as you follow some guidelines and have a play to familiarise yourself with the feature.
     
    Sarah likes this.
  6. Sarah

    Sarah Well-Known Member

    132
    9
    asignm....thank you for the above post...it's a great suggestion until responsive gets better. I am finding that I am tailoring my designs in order to avoid a responsive breakpoint nightmare, which doesn't seem like the right thing to do. It's also taking me MUCH LONGER to build sites (which I do for a living) so breakpoints result in not breaking even!

    Thank you!
     
  7. Sidders

    Sidders Member

    21
    3
    I'm the same Sarah - starting to not use widgets and make it do cool things because i'm so wary of having to hide them in other breakpoints and so on. Think we have to remember that computers still exist (even though the world is stuck to their phones)

    Meant to ask - if scroll effects don't work in fluid width - how have MT used them on some of their templates? DJHerold?
     
  8. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,416
    251
    Sidders, the templates that we have with scroll effects were made with the older fixed design.
    Dj
     
  9. Sarah

    Sarah Well-Known Member

    132
    9
    So there is no way to do the hybrid style and have scroll effects? That's a bummer.
     
  10. asifnm

    asifnm Well-Known Member

    117
    26
    You can have scrolling type effects still but you have to use css, for instance you can have an element slide in from the right when the viewport is in range, or fade in etc etc. There are a lot of widgets out there that will allow that and some of them are very powerful.
     
  11. markushamster

    markushamster New Member

    3
    0
    i really like the idea of working with fixed layouts as you describe it here. i only have the problem that the final phone and tablet layouts are NOT scaled to fit the browser. i always have a more or less wide boarder left and right of each device screen. i read multible posts on differen forums about this and everywhere the people tell that the devices will scale the content automatically. but in my case this doesnt happen. if i design the smallest breakpoint to for ex. 380px, the page displays to large on smaller devices. you can always double tap the screen, then it will scale to fit. but it never does automatically when the page is loaded. do you have any clue what i am doing wrong?
     
  12. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    I am in agreement with markushamster. I now like using multiple fixed width layouts, but they do NOT scale to fit my iPhone or other mobile devices.

    For instance, take lakepointstation.com, it has a breakpoint at 1024, which works fine on iPad landscape, but won't 'autoscale' for an iPhone portrait. Why not?

    FWIW, I did try putting this in the header html to no avail:

    HTML:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    
    Anyone have any ideas? Thanks!
     
    Susan Stramm likes this.
  13. asifnm

    asifnm Well-Known Member

    117
    26
    Ok, this did used to work and it worked really well, but I've just tried it with the latest update and it does indeed NOT set to 100% zoom. I don't know what happened but there was talk that some things were broken with the latest release. Hopefully this is fixed in the next release because it is (was) a great, fast way to create a website.
     
  14. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    More investigation turns up the fact IF YOU SET MORE THAN ONE BREAKPOINT, THE 100% WIDTH FOR MOBILE WILL FAIL.

    So, as to not usurp this thread, I will post my new strategy on a new thread.
     
  15. Matthew Hotchkiss

    Matthew Hotchkiss New Member

    1
    1
    I have had the same issue with 480pixels or under breakpoint not registering the correct width on phones and either using a larger breakpoint or with white space on the right hand side. The good old iphone/ipad/desktop works much better but now when I turn my phone landscape it doesnt resize.. Aghhhhh Is this just me? www.fearaudio.com WIP looks fine portrait but some parts don't centre on landscape even though all are set to the same central pinning and scale...
     
    Susan Stramm likes this.
  16. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
  17. markushamster

    markushamster New Member

    3
    0
    i found out that not using alternate layouts was the problem in my case. viewport scaling seems to work only in fixed layouts with only one breakpoint.

    so i first created a fixed width layout with 1200px and an alternate phone layout. both worked fine. viewport was scaling on mobile and desktop scaled to fit tablet perfectly. so i have to design only two sites what is a lot easier than having three or even more breakpoints. this was just for testing.

    now i wanted to build my real site. i did the same as i described above. but strange thing is, now it only does proper viewport scaling on tablet and phone in landscape mode. in portait mode the site is a bit too big and does not even react to double tapping the screen (than usually it should scale to fit)

    second strange thing: when i build the site again but this time with 980px instead of 1200, the viewport scaling start to work properly again, on all devices in landscape and portait modes.

    anyone has an idea why?
     
  18. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Was your alternate phone breakpoint set to fixed width? (It defaults to fluid width). If not, it won't work right.
     
  19. markushamster

    markushamster New Member

    3
    0
    first i did not even make a alternate layout, only the desktop version. viewport scaling only worked from around 980px witdh. i posted this problem on the adobe forum, and an adobe-guy promised to look at it. that is now two month ago and he never replied. i now builded the site 980px width and an alternate mobile-layout and all is working. its best practice to me. responsive is nice but until muse is not able to scale text, it makes no sense to me. i need full control over my design and dont like things to move around uncrontrolled.
     
  20. Gwen Speicher

    Gwen Speicher New Member

    2
    3
    I do have a question, but first I want to thank everyone involved in this discussion. This is the first place I've encountered people who still promote alternative layouts, and boy I needed that! Forgive me if I'm hijacking this discussion or posting in the wrong place.
    I'm long-time print designer but a Muse newbie, and I just spent 6 weeks learning the program while creating a client's website, which I'm quite proud of and that she loves. Forms, panels, slideshows, e-commerce, you name it. And then I tackled the responsive design. Ugh.
    It took me 2 days just to get the homepage acceptable, and I've got almost 30 pages to go. I've read a dozen articles, watched videos, searched forums and tried all kinds of techniques, but still end up screaming at the messes I make for mobile.
    So my question is about in-browser editing with Alternative Layouts. I had abandoned the A.L. idea when I discovered synchronized text only allows one text style. THAT was a revoltin' development since the website includes 22 pages of formatted articles. and eventually, she wants to add a blog. So, if my client wants to edit any of those, she's going to have to do it 2 or 3 times, right? But if I slog through the responsive design process, she'd only have to edit it once? Which one would you recommend?
    I should mention that I'm doing this website for super cheap...I had some free time and told her I wanted a good excuse to learn Muse.
     
    Sarah and Susan Stramm like this.

Share This Page