I can't find a good tutorial on understanding Break Points, Fluid Design, Responsive Design and Fixed Width

[Roland Kahlenberg]

It's extremely frustrating!!! Lots of talk but no actual explanation of the why do Break Points exist? What causes them? How to solve/overcome them?

What are the relationships between Fluid Design, Fixed Width Design and Responsive Design? Which to use for designing a Responsive Site?

I found the tutorial, below,  but the library file (tutorial assets) are damaged after downloading!

Create a responsive website |

[Günter Heißenbüttel]

I‘d suggest to have a close look at the jam session videos of Dani Beaumont: https://m.youtube.com/results?q=dani%20beaumont&sm=1

[Roland Kahlenberg]

LOLOLOLOL!!!!! There are about, what ... 50 Muse Jam tutorials. You can't be serious that there isn't one that covers the questions I asked? The questions are all related and very specific. I've watched her tutorials and she thinks everyone knows about Web Design. She talks about Fluid, Fixed, Break Points etc as if I know what they mean! If I knew what they meant, I may not even have to watch her videos. lol

I just need to understand these very basic, yet critical topics. Until then, I'm not able to understand what and why after watching a tutorial. There is too much doing and not enough explaining of the why's - it's just do this and do that.

I'm certain there is a good tutorial on the  topics I brought forth.

[Günter Heißenbüttel]

I can‘t be serious? Ok, if you think so …

(Not sure, by the way, what can‘t be understood in the jam session about fixed width and fluid width sites.)

[Roland Kahlenberg]

So, if someone asks the following, where do I get details (what are they, what are their relationships,

on the following -
Fluid Design
Fixed Width Design
Responsive Design

Your reply, is to tell them to watch over 50 videos? And you're supposed to be taken seriously, as someone who is supposed to be helpful?

[Roland Kahlenberg]

Here's a pretty good tutorial on Break Points - Adobe Muse 2016 Responsive Tutorial | Where to Put Your Breakpoints - YouTube
Wished there are similar ones on Fluid Width, Fixed With and Responsive Sites and how all of these work together or how they relate with each other. There is also the case for Page Pinning and Page Browser and how these work with the earlier mentioned features.

Muse is supposed to be a product for non-coders which should include those new to Web Design - why aren't these critical topics covered in a contextual manner such that those, new, venturing into this area can quickly come to understand the software (Muse) much better. All the tutorials are not worthwhile until the viewer already has a good foundation in these topics.

[Pavel_Homeriki]

I think you should study on your own, what you are asking about. It has nothing to do with Muse as a product. You do not require from car manufacturers to teach you how to drive. Or a closer example - you do not require from the photoshop team, what would they teach you design

[Roland Kahlenberg]

I have not asked what is Web Design. Your analogy is as fake and preposterous as your purpose for being here. You're supposed to be an ACP here to help and guide others, in case you don't realize it. All you have done is be rude and show how pathetic you are at providing a decent answer. If you want to be rude then go somewhere else. If you can't answer then don't.

I've watched a fair few tutorials and what's missing for me are understanding those few terms I queried, here. If I could get a decent reply here, I could take advantage of the tutorials that are out there.

It's unbelievable that both of you have replied in such a vile manner to very straight-forward questions.

[Pavel_Homeriki]

I did not say a single rude word to you, but sincerely pointed to the real path. Muse is just a small tool in a huge industry and can not be the starting point of global knowledge. If you want to understand the processes in general, what is a breakpoint, you should start with this. And then you will understand this in the Muse. (IMO)

[pziecina · Accepted solution]

https://forums.adobe.com/people/Roland+Kahlenberg  wrote

So, if someone asks the following, where do I get details (what are they, what are their relationships,

on the following -
Fluid Design
Fixed Width Design
Responsive Design

Your reply, is to tell them to watch over 50 videos? And you're supposed to be taken seriously, as someone who is supposed to be helpful?

O/k,

These are all term taked from web design/development, with the first 2 dating from the days of IE5/6, (about 1999/2000) and refer to how one would decide to use the available browser window. The first thing to remember was that back then monitor sizes started to increase dramatically in screen size, (yes that was from 15inch to greater than 18inch). This meant we had to develop ways and term to describe them.

Fixed width is easy to understand, in that one sets the size of the web page to a fixed size, say 1000 pixels, and it will be that size no matter what your monitors/browser window is. Should it be larger then you will have 'white space' to the left/right/both-sides of your web page. Should it be smaller, then your browser will have an horizontal scroll-bar, meaning that your site visitor may have to scroll in order to read/see what is on the page.

To try and limit the possibility of horizontal scrolling, the idea of a fluid design became popular, so instead of a fixed size % values where used, (the % being of the users browser window). This meant that your visitor in theory did not have a horizontal scroll bar. In practice though it was necessary to specify a minimum and a maximum width for the web page, to stop the page shrinking or expanding in width unacceptably.

Now to the curve-ball, which is responsive design -

With the advent of the iPhone a method was required that enabled the developer to produce one page that adjusted in size for all screen sizes, be they 2inch to 80inch wide, (don't forget we now have about 3-5% of web users using smart tv's, or game consoles connected to a tv). We do this by the use of media-queries, and set these when the page layout starts to break, both going smaller or bigger than the designers/developers browser viewport.

We also at the same time adjust the various elements of a page, so that the display how we want them, by inserting relevant css within the relevant media-query.

Media-querys, are not so easy to describe, unless you are into code, and I have described as a web developer not a muse designer.

In code we have layout features such as css flexbox, css grid layouts, css tables to control how a layout flows, all of which have no equivalent in Muse.

If you are interested media-queries -

Media queries are useful when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions). With the huge variety of internet-connected devices available today, media queries are a vital tool for building websites and apps that are robust enough to work on whatever hardware your users have.

As for breakpoints, these are a Muse term, that whilst used by web developers has a different meaning than in web development, (you will have to ask a Muse user).

[Günter Heißenbüttel]

No Pavel Homeriki , but he would certainly demand from the Photoshop team, to publish a tutorial about how to handle his new camera to shot high quality photos.

I know, this is „ridiculous“ again, but …

[Günter Heißenbüttel]

Ok. We are „rude", we are „ridiculous". But you are a polite and nice guy.

Whish you luck to find, what you are looking for.

[Roland Kahlenberg]

You shouldn't have replied in the first instance since you find me rude! Your analogies are pathetic and show how infantile your brain is. It takes intelligence to come up with good analogies. That you and your friend failed miserably in this area is proof of how vile your nature is.

Thanks for messing up this thread!!!

[Günter Heißenbüttel]

[fotoroeder]

Too much emotion, mate. Nobody wants to be rude, I`m sure.

Not knowing, if this answers your question, there´s a file attached.

Adobe Creative Cloud

Breakpoints are used in case all elements do not fit anymore into the canvas.

You have …

Option 1: use fixed width breakpoints – stay in between the blue thin guides from the next breakpoint – have the most control over the elements

Option 2: use fluid width breakpoints – elements can scale proportionally in width but don`t change their height (text is handled different!)

Option 3: don´t use any breakpoint at all except your max width and minimum width – elements scale proportionally in width and height

One more …: Text boxes increase their height, as soon as they get smaller in width, of course – how else should all the text get handled

And one more: Responsive just means that all elements/the whole pages look great on all devices no matter if they are 320 or 330 or 402 or 739 px wide

The other solution – use adaptive design – you have one version for desktop-tablet-mobile each. I used both, both have advantages and disadvantages, depends on, what you want and need.

Best Regards,

Uwe

P.S. Of course watching Dani Beaumonts screencasts take a while, starting from the beginning helps, though but makes one clear that responsive design isn´t really easy at all. Don`t believe if one tells you websites are done in minutes – it is not.