A Responsive Strategy for Muse CC2015

Discussion in 'General Muse' started by Chipp Walters, Aug 24, 2016.

  1. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Like many of you, I've struggled with trying to use the fluid width features in breakpoints. The reasons are many, but most importantly it's most difficult getting the pixel perfect layouts we designers enjoyed in the fixed width days.

    For some of us designing more complicated websites, fluid width just doesn't work very well-- unless you're willing to create 7,8 and 9 breakpoint sites. As soon as text starts wrapping, or images resize, there's the potential for the whole design to go off. Not necessarily in a 'broken' way, but just enough to make it look like it's not quite finished. Especially true for typography types who are so careful about negative space around text and it's relation to all other elements on the page.

    So, I've decided to work with fixed width breakpoints, but using them in a responsive way. Besides the fact you can do scrollable effects, you just have more control with fixed width: EXACT CONTROL in most cases.

    After my last fluid site (it actually had 6 breakpoints based upon the current meme which says "create breakpoints when they are needed." Even with 6 breakpoints, the typography broke down significantly, not to mention all the hassles trying to keep all breakpoints in sync. Ugh-- it's like designing 6 separate pages for each page on the site. Never again. All that work for a mediocre finish.

    The NEW Responsive Strategy

    Okay, so now the goal for this next site is:
    1. As few breakpoints as possible
    2. Full control over typography at all times
    3. Try to minimize 'syncing' between pages and breakpoints
    4. Speed up development significantly
    After reading up and asking a few more questions, it's clear that the best solution for me is to use fixed width breakpoints, with the smallest one being able to be used BY ALL MOBILE devices. The idea is that a 500px or so breakpoint, if set properly, can literally be used on every smartphone around.

    TEST 2: One breakpoint fits them all
    (TEST 1 was used for something else)

    It's important to understand how a mobile browser, like iPhone's Safari, renders a page. If a web page is wider than the browser viewport (px) then it will render the page offscreen at a default width of 980px, then scale it to fit in the smaller browser viewport window. If it's smaller than the viewport, it will scale it up to fit in the browser viewport.

    Here's a test showing how it works.
    Go to http://chippwalters.com/test2

    This is a single page Muse site. In fact all of the following examples are single page Muse sites.

    Read the page on the site.
    Note, there is only 1 fixed width breakpoint for the entire site. And it scales perfectly on Tablet, Mobile and Desktop (as long as the Desktop browser width >= 1000px). Of course there are problems with this single breakpoint approach-- the browser is too tiny in mobile, it's not responsive, etc. But, what's interesting is to see how perfectly is is scaled on the iPhone or other mobile devices.

    TEST 3: Multiple breakpoints BREAK Phone layouts
    Now let's go to the next level.
    Go to http://chippwalters.com/test3

    Here we've added another smaller breakpoint. This breakpoint is conveniently set so that it will render correctly down to 768px, the portrait size for an iPad. So, this is good for tablets, and also Desktop (browser width >= 768). This is more responsive ONLY NOW WE'VE BROKEN MOBILE. The new code from Muse is not recognized by our mobile browsers and only displays at full resolution-- so there's no scaling.

    Still, this is a good Desktop alternative as rarely are desktop browser widths set at less than 768px these days. And if so, the browser will scroll so it's still very viewable. Of course if we really want to, we can even go smaller.

    We now know that no matter how small the breakpoint, it won't render correctly as fixed width in Phone unless it matches exactly the viewport of the Phone. That would mean a significant number of fixed width breakpoints.

    Or we have another 2 options:
    1. Use Fluid Width and see how far you can go before having to create more breakpoints
    2. Use a Phone Alternate Layout

    TEST 4: The Strategy I've chosen
    I prefer option 2
    Go to http://chippwalters.com/test4

    This strategy uses the multiple fixed width breakpoints from TEST 2 along with an Alternate Phone Layout set at FIXED WIDTH (both MASTER and PAGE) 500 pixels wide. If you leave it at the default fluid width IT WON'T WORK! Once built, it autoscales to ALL phone devices, freeing you from the constant tweaking and massaging of multiple fluid breakpoints. The downside is you need to duplicate content and then keep it in sync.

    Another downside is there's the Desktop browser width gap we mentioned in TEST 3, but that can be fixed (if you want to) by adding another fixed width breakpoint to go from 500 to 767. I'll forgo that for now.

    This is the strategy I'll be going with on the next couple sites I create.

    CONCLUSION
    I hope this was helpful for some of you. It was helpful for me to build these sites and test them to find out what works. Please reply if there are any questions or if I have misstepped in anyway.

    Oh, and ADOBE, if you're listening, please consider adding some sort of flag or setting to force a certain breakpoint to be rendered at 980px on Mobile (if that's even possible?).
     
    Last edited: Aug 24, 2016
    George Achi likes this.
  2. Jeremei

    Jeremei Well-Known Member

    745
    97
    Chipp!

    Great testing work, thank you for your efforts!
    I absolutely agree with you that at the moment we need between 7 - 9 breakpoints if you want that your site will show properly on most popular devices. I do not mean very simple sites but a little more sophisticated sites.

    Despite everything in all honesty I must admit that I am fairly sure that the responsive designing is the word of the future. Of course in the meantime during the transition period can be used different workarounds when they suit with the current situation.

    I am not a great visionary but I predict at least two following steps in the development of the responsive designing in the very near future.

    1. You need to design a site only in one breakpoint (e.g. desktop/ width 1200px) and after that you choose other breakpoints from the panel. All the texts, images and other elements will be set by "the breakpoint-robot" exactly in right places in smaller breakpoints without any extra work of the designer.

    2. There will be also high-quality applications which convert e.g. Wordpress files/templates (php) to Muse files/templates (html). At the moment there are already applications which convert html-files to php-files.

    We are living in interesting times, cheers!
     
  3. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    An update for those of you following.

    The MUSE Phone layout I recommend above renders a site at fixed width. You can use any width you like. I chose 500px, but you can go smaller or even larger if you wish.

    One problem is that most of the phone website emulators on the web are expecting a fluid width (width=100%) page, so they break when you send them to the correct Phone layout web page. FWIW, this page is found by concatenating the URL + "/phone/" + the page filename. So, in the case of a site I'm working on:

    Desktop URL = http://lakepointstation.com/index.html
    Phone URL = http://lakepointstation.com/phone/index.html

    The Phone URL is the one you want to test.

    So, a tester like http://troy.labs.daum.net/ breaks when trying to show the Phone URL as it expects a responsive page, not a fixed width page.

    Here's a tester that does work. I've successfully used it in Safari and Chrome on Mac:
    http://www.mobilephoneemulator.com/#BrowserHelp
     
  4. Sarah

    Sarah Well-Known Member

    132
    9
    Chipp - thank you for all your work on this. Please keep us apprised of any further developments.
     
  5. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Thanks Sarah. The only other thing I'll mention is that the Lakepoint Station site, while not fully responsive (there are browser widths where not all content is shown) had a different breakpoint schema than the demo.
    1. The first fixed width breakpoint was from 1250 to 801
    2. The second was from 800 to 500
    3. The Phone layout was set at 500
    I'm still playing around with the numbers. I think a good compromise is somewhere between the two.

    I think perhaps Adobe got it right with the fixed width Phone Layout. It's really not all that different than editing another breakpoint-- just the hassle of syncing content. Perhaps Adobe can figure out that issue as well?

    I'm now working on a redo of joinamenify.com/info.html which is the website which got me started in all of this. It has 6 or 7 breakpoints depending on the page. And while it holds together pretty well, it's difficult to be exact in the placement of design elements, not to mention what a pain it was to build. All those breakpoints take time!
     
  6. Jeremei

    Jeremei Well-Known Member

    745
    97
    Chipp!
    Your "Lakepoint Station" site is really one of the best sites what I have seen created by Muse. I can see that your artistic eye (colors, balance of layout, etc) together with long experience guarantee marvelous end result. :) :) :) :) :)
     
  7. Sarah

    Sarah Well-Known Member

    132
    9
    Thanks Chipp. Definitely staying tuned to your threads!

    Another designer I know has a bit of a system too. I'll see if I can explain it properly. The site and BPs are fluid, he has about 4 or 5 BPs. Starting at the biggest BP(let's say it's 1200), he then creates the design so that it doesn't exceed the page width of the next BP (say 1024), and so on all the way down. I haven't fully tried and tested this but if it works, it certain reduces a bit of the headache.

    I am TRULY hoping that the Adobe team is working on making this better. I think the viability of the product is questionable as it is now. The support on this forum has been a life-saver.

    My strategy these days is to use Muse for very simple sites, but (with the help of someone else) use another platform (Webflow) for more complicated sites. Web flow has a great blog/CMS.
     
  8. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Thanks for the nice compliments.
     
  9. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    That's pretty much how I created the Amenify website-- 6 or 7 fluid breakpoints each butted up to the next.

    There are a number of problems for me with that strategy.
    1. Way too much work creating all those breakpoints for each page.
    2. A lot of the work involves testing on browsers and different mobile sizes for each page and each breakpoint. Depending on the content you need 2 or 3 breakpoints for mobile alone.
    3. Editing and/or adding content to a page becomes unbearably difficult as you need to edit and adjust each breakpoint-- then test. Not to mention it was existing content which originally led you to create the breakpoint in the first place-- what happens if the new content doesn't "fit" the current breakpoint strategy? Delete all the breakpoints and start from the top again? I've actually had to do this twice in one project.
    4. It's very difficult to keep your design looking good as it resizes within a fluid breakpoint. It's possible, but takes a lot of work. Typically you end up just biting the bullet and adding yet another breakpoint to resolve an issue.

    I agree with you regarding using other systems for larger projects.
     
  10. Sarah

    Sarah Well-Known Member

    132
    9
    Hi Chipp,

    I can't tell you how appreciative I am. Will try your method on a site I'm currently working on which is just 5 pages + Ecwid e-commerce. Hmmmm...wondering if I should set the store page (Ecwid) to responsive since Ecwid is responsive.

    So if I understand correctly:
    1. set-up site properties as FIXED
    2. First fixed BP 1200
    3. Second fixed BP 1000
    4. Phone Alt layout @ 500 fixed (will require copy/paste content....this is ok, phone layouts should be different anyway....the only slight problem is with SEO (duplicate content).
    Wondering how the sites set up this way look on extra large screens. I like the ability to use the chevron thingies because it allows me to pin items to the edge of the browser without having to pin them to the top, if you know what I mean.
     
  11. Jeremei

    Jeremei Well-Known Member

    745
    97
    Chipp!
    I am working with volleyball-magazine (screenshot) and three breakpoints system (fixed width; 1200, 1000 and 500) is not working with these kinds of more complicated sites, I tested it.
    But I must admit that your site http://joinamenify.com/info.html is working great if you have made it with three breakpoints (fixed width)? Of course there are not very items on the site and the layout is quite simple.
    My conclusion is that this system can work only with certain preconditions, right?
    Anyway I respect very much your testing work! :)

    HOME_ja_HOME.jpg
     
  12. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Hi Sarah,

    You pretty much have it correct, though you are free to change the number of breakpoints and their place as you like.
    I might recommend a fixed breakpoint going from 960 to 1250, then one from 500 to 960.

    Remember, UNLIKE fluid sites, for DESKTOP mode, you don't need to create a perfect width site for any size of browser as the user can (and typically will) adjust the width (or scroll horizontally) if it's not right. So, what I'm saying is that even though the breakpoint starts at 1250, by the time it gets to 960 it doesn't necessarily need to be perfect.

    BUT... at 1024, the first breakpoint does need to show the full site as that is what will be displayed for iPad Landscape mode.

    Similarly, at 768, in the second breakpoint also needs to display the full site, as that's what iPad will use for Portrait mode.

    Where you set up your breakpoints for desktop may also be a function of content as well. Still, remember you can have full width elements in your website which will extend and collapse as you make the browser wider and narrower. You can add background images to these rects so that they also grow and shrink as you're adjusting the website (see http://lakepointstation.com top image). This is the typical way people used to create dynamic sizing sites before responsive was introduced.

    Lastly, while I haven't tried this, I've been thinking you can also use fluid width breakpoints on Desktop instead as long as you don't make every element fluid-- sort of a hybrid mode where you're trying to use fluid like you would fixed, IOW, not trying to show a complete site at the lower breakpoint limit. The text need not wrap, the images need not resize, etc..

    I hope this helps.
     
    Sarah likes this.
  13. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Sarah likes this.
  14. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Hi Jeremei,

    The website you refer to, Join Amenify, is a fully responsive site with 6 or 7 breakpoints and was the reason I decided to try using fixed width sites. It works because, as you say, "there are not many items on the site and the layout is quite simple."

    You can check out http://lakepointstation.com for a site which uses fixed width breakpoints (only 2 of them).
     
  15. Jeremei

    Jeremei Well-Known Member

    745
    97
    Chipp!
    In tested lakepointstation.com site and here are my observations:
    - small text (above footer) starts to break in 1150px (breaking continues to 800px)
    - text on the red bar (beneath the header) starts to break in 1050px (breaking continues to 800px)
    - car-image (above footer) starts to break in 710px (breaking continues >> 0)
    - text on the red bar (beneath the header) starts to break in 680px (breaking continues >> 0)
    - small text (above footer) starts to break in 580px (breaking continues >> 0)
    - the whole site starts to break about in 580px and breaking continues because there are no smaller breakpoints.

    Chipp, in my opinion you should add at least one breakpoint (maybe 500px??) for mobile phones to this site.
     
  16. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Hi Jeremei,

    First off, you need to go back and re-read my first post on this thread. Your last comment about the breakpoint for mobile phones is not viewable for this site UNLESS YOU USE A PHONE. Please use a phone and you will see how it does work just fine. You can't just change the width of a desktop browser to see it-- it won't work. There is special code that MUSE creates to redirect to a different site. So the phone will see the site:

    http://lakepointstation.com/phone/index.html

    If you go there, you will see a fixed width site at 500 px which will automatically scale to a mobile phone device.

    Furthermore, I don't believe you are getting what I'm saying. The goal is to NOT make a fully responsive website which requires 6-9 breakpoints, but to allow anyone on any computer to be able to view the site. They may have to adjust the width, but I expect most will be just fine.

    Some text WILL scroll off at some breakpoints. There are two different sizes which should cover just about all Desktop configurations.
     
  17. Jeremei

    Jeremei Well-Known Member

    745
    97
    Chipp!
    Thank you so much for clarification. Now I understand. :)
     
  18. Sarah

    Sarah Well-Known Member

    132
    9
    Thanks Chipp. I think your brain is much bigger than mine :)

    I'm going to have to train myself to NOT keep resizing the browser to see how it looks. I get all bent out of shape when things go askew at any point.
     
  19. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Sarah,

    If you get a chance, visit Themeforest and view some of the demos of the Muse Themes available there for sale. You'll see few if any are fully responsive at all sizes, yet they all work nicely.

    Most have a Phone layout as well. And many are brand new themes, meaning they've been designed since responsive has been available.
     
  20. Jeremei

    Jeremei Well-Known Member

    745
    97
    Chipp!
    Your basic idea (my dream also) is already working here (link): I tested the application and its features. It works great despite minor shortcomings. You only have to make your website layout once. Read the article and test the app.
    https://webdesignledger.com/website-makers-missing-now/
     

Share This Page