Adobe Muse Course | Responsive design and breakpoints [Chapter 1]

[Music] hey guys this is bathroom responsive muse this is the first chapter of our online course to learn how to build a responsive website in Adobe muse so this first chapter is basically an introduction and what it's important to understand is the concept of responsive design so responsive design is basically means that your design should respond automatically to the screen size by accommodating all the elements so what it means is that it has to look nice in any device it has to look nice in a small device like a mobile phone in a tablet or something bigger like a desktop so maybe if you don't understand this what I'm gonna do is as an example I'm going to show you I'm gonna use muse which is comm other amuse official website to explain the concept of responsiveness so as you can see here we have we have logos we have a menu and we have some elements down here so as you see I'm gonna what I'm gonna do is I'm gonna make the browser smaller and this is what happens when you make the browser smaller so in the beginning you have like space on the right and on the left of the website but the smaller it gets the less space that raised so it will reach to a point where there's no space and something happens so when this happens it means it has reached a breakpoint it means that your design your current design is broken so you need to make a new decision so what's gonna happen now how you are going to relocate all these elements and how it's gonna look good in in this browser in a smaller browser so designer here has chosen to move some elements and instead of four columns now we get three columns here and it goes smaller and smaller and smaller so we will reach to the next breakpoint design breaks again and what's going to happen here so we get all the elements up here in the header aligned centered aligned and we have two columns and then if we go smaller smaller smaller we reach to a point that will get a mobile menu and we have just one column and the elements here are bigger so this is responsive design okay so now I'm going to show you we're gonna go to muse and we're gonna bring all this into it okay so this is Muse so if you want to create a website the first thing is to go here to create new now basic options is here you get fluid with and fixed width so actually here is say speed with and explains a little bit of what it is about sorry sorry - speaks wave to create static layouts that do not resize or fluid with to create a layout that resizes to the browser's window the choice of text initial pages and is a default port is a default for new pages which is edible in the site properties dialog okay I'm going to explain you what this is so I'm gonna create a website one fluid and one fixed and we're gonna I'm gonna tell you the difference me personally I prefer to use fixed websites so first recommendation is maximum page width is 1200 okay first times gonna make I'm gonna create the fluid web site and now I'm gonna go to file new site and here I'm just gonna click to get the fixed web site and the same thing page width is 1200 so we get two web sites here what and then what I'm gonna do this is the news layout okay so when you up here you can see the first page called home and this is the master pages master pages we're going to talk about it in next chapter so here is we get all the pages all the pages that you can find in your menu or even your sub pages okay inside the the the parent page so to create a new page what you have to do is just if you hover over the page you'll see a plus sign here so just click on it and you'll get another page and so on as many as you want and here if you double click you can rename it let's say this is gonna be called services and this is gonna be called about me contact here in services for example we can create a subpage and we can create prices here you can bring down the side so you can see the map of your website alright so this is how you create your different pages so you can directly go into each one and change your design okay so we're going to talk about this a bit deeper and another another chapter so now I'm gonna go back to what we were talking before that it was the difference between fluid and fixed so this one here is I'm gonna double click so I'm gonna enter the home page here and double click this one too so what I'm gonna do is I'm gonna drag I'm gonna create first a breakpoint so here my maximum breakpoint is 1200 I'm in the fluid you can see the icon is different this icon means fluid breakpoint and this icon over here which is only a square it means fixed breakpoint so I'm gonna create different break points so I recommend you using this one some people drive themselves crazy yeah using a whole bunch of breakpoints but if you use this you're pretty safe okay so first break point is 1200 next break point is 1000 this will cover most of the devices next break point 768 and although smaller break point is 480 which covers mobile phones there are other mobile phones like some iPhones iPhone 5 and lower is actually 320 the screen size are 320 pixels but they are out bit outdated so you can actually create a 320 if you want to but I personally use a 480 that's as small is that I used okay so that's how you create the break points you I'm gonna do the same thing here no matter if it's fixed or fluid you will create it the same way so over the purple break point bar right click and at breakpoint as you can see here I set in the beginning the 1200 where the maximum width is 1200 pixels but if you use a fixed breakpoint music like adds 200 pixels so 200 pixels 100 and 100 to each side so I'm gonna create next breakpoint which is the thousand one here next 768 I'm creating exactly the same breakpoints okay and 480 ok going back to fluid what I'm gonna do is I'm going to drag an element here I'm going to get I'm going to fill this with a photo so I'm gonna click on fill and I'm going to add an image so this is how you add images into Muse you can actually drag the the pic the look at your assets or you can do this create the rectangle okay I'm gonna set it to fill and I'm done okay so what we can do in Muse is set the behavior of the different elements so when you have your element clicked you'll see more options will appear here and you have one's called resize so I'm going to click here so it displays can choose non-responsive with responses width and height and stretch the browser's with so this will react differently if you are in a fluid or in a fixed breakpoint what I'm going to do is I'm going to copy this four times so you see how it will work with a fluid breakpoint first I'm gonna click on none second it's responsive wave next is responsive width and height and makes it stretch to browsers with okay that's what it does go stretch the browser fit okay so the others have exactly the same thing so what I'm gonna do is I'm gonna show you what happens here with a fist doing the exactly the same thing I'm just going to create a rectangle and I'm gonna frame so I'm gonna fill it with the same image sorry and I'm just going to scale to fill and that's it exactly copy at four times and set the different behavior okay first it's nun second is responsive with third is responsive width and height and this one is stretched browsers with okay so what I'm going to do is first I'm going back to the fluid and I'm going to preview it so this is a fluid with so what it does is that I'm gonna make the browser smaller so whenever he hits a breakpoint you'll just you see how it goes all the way down and out all all the way it resizes so first one was none so I'm just gonna go here so you can see how it will react so you can see how it goes to a breakpoint is fluid all over the way okay it can be really tricky sometimes because it's kind of hard to control your elements with a fluid breakpoint so now I'm going to preview the fixed breakpoint okay so first what I'm going to show you is remember I said that a news kind of creates whenever you set the maximum width it creates like 200 pixels plus and you can see there's like a blue rectangle so this is like your safe area so whatever happens inside there it's it's your safe area so this means that whenever your design reaches to from the 1400 pixels to the 1200 pixels it will look like this and then you go to the 1200 pixels to the 1000 pixels then it will look other way it won't be that fluid it'll just you said what is gonna look in between these breakpoints and so on and on okay so now that I'm going to preview it you guys will understand what I mean it's alright so see like nothing really happens now it hit a breakpoint so now we're going to the next breakpoint and you see how it did how it resizes go to next breakpoint and that's how it resizes so that's the difference between fluid and fixed I'm going to show you the fluid one again and you actually see when it hits the breakpoint how it goes all the way all the way so that's the meaning of fluid okay so that's why in this course what I'm gonna do is I'm gonna show you how to build a responsive website with a fixed breakpoint because it's easier to control all the elements okay so we're done for the first chapter if you guys want to continue watching this remember to subscribe to our Channel and next step we're going to talk about master pages and other stuff too so hope you guys like the tutorial thank you very much for watching you

Channel: Netgrows English

Views: 22,627

Keywords: Adobe Muse, responsive, muse, widgets, templates, adobe muse course, breakpoints, fluid, fixed, beginners course, basic course, adobe muse cc 2018, free online course, full course

Id: 7SjK-1BmLw8

Length: 13min 14sec (794 seconds)

Published: Thu Jan 25 2018