Lessons

Lesson Info

Introduction to Responsive Design

Responsive web design is gonna give us a lot of options here, a lot of things to work with. Here's the thing about design. When you setup your pages in Muse, what you wanna do is you wanna get all of the design content out there you can on a page. Now I'm on a master page so I might add a few things later, it might make it a little trickier, I'll show you that don't worry, but for now I think this is most of what I want. What we can do then is we can take that content on this size screen and we can say you know what, let's look at it on a smaller size. So to do that you're gonna see this gripper up here. Now if I take this little gripper and drag it to the left, you're gonna see what it's gonna do here. It's actually gonna start to move and change and do some different things. Now notice the menu there, it's acting kind of funky, it's just hanging out and look at the logo. All of your images by default are set to responsive width and height it's called. It just means that as the page g...

ets smaller, narrower I should say, that image is gonna start to shrink. That thing is gonna shrink. Now you might like that or not. I don't personally like that for the logo, it's gonna get too small. But notice the box at the bottom, because we snapped it to the edges, it's just stretching and do this which is great. Now what we're gonna do here is this, I wanna go in and I wanna touch these objects and start messing with them a little bit. But you notice that if you hover over something, you might get this pencil with a slash. Click if you see that. It's gonna pop it back out to that 1,100 pixels. Notice that purple bar up top. That's called the breakpoints bar. Now that number in the far right up there where it says 1,100 right there, that's showing you the maximum width we set. This is the page size we're designing at. Now if we wanna go in and do something like change content around, first of all the first thing we do is we click on our objects and we drag this and we say you know what, that looks pretty bad. I wanna make it so that logo doesn't resize or make the menu do something different. If I click again, we can click on each object and set how it's gonna work in responsive design. This is what we usually do first. Click on the menu for instance. If you look up top, you're gonna see that we actually have two things we're gonna talk about as far as responsive design. We have resize and we have this pin object right here. Now this pin object is all about pinning or sticking content to the left side of the browser window, to the right side of the browser window, or dead center in the browser window. And if you think about it, if we take content and we look at it on a screen this size and then we look at it on a screen this size, that might be really helpful. Keep something stuck to the edge of the page as it gets smaller or bigger. Or keep it dead center as it gets smaller or bigger. So with the menu right now, we actually have it set up if you take a look in the menu options right here, we have it setup to uniform spacing. It's not gonna change size or do anything, you guys. It's actually just the same size, just kinda moves around. Now that's good. And what we can do with the that menu if we have it selected, we can pin it. Now I want it to stay on the right side of the page that same distance away, so for you guys it'd be this way. So the menu's here and there's the page. As the page gets narrower, I want it to always stay here. So what we're doing is we're doing something called pin it to the right side. That's what I just did. Now if i drag that little gripper, watch what happens. Bam, isn't that awesome? All right, now the logo's driving me nuts. We gotta fix that. So what I'm gonna do is I'm gonna click back at design size, full design size. I'm looking at the logo saying you know what, it shouldn't scale. I think it should be the same. So click on the logo. Look up top, you're gonna see that we have the pin thing. Now what do you think about this? Where do you think I want the logo to stay? Do you think I want it to stay left, right or center? Well it's positioned on the left, right? It's positioned on the left, correct. So we want it to probably pin to the left. That actually keeps it the same exact distance from the edge of the page no matter how big or small the page is. So pin it to the left. You don't have to do that, but I like that because it keeps the set distance. Now look at resize. This is the next option we're gonna look at. If you click on resize, every object you put out here has a responsive nature. It has a default responsive setting, if you will. If we go out here and we put something like an image or a logo, some kind of image file or graphic file, it's gonna have a responsive width and height by default. That just means like I said before, it's gonna just scale proportionally as the screen gets smaller and gets bigger. Now we can keep it that way and that's fine, that's great, we can also say stretch to browser width which would just make it look dumb. We're not gonna do that. Think about it. That logo's gonna be, anyway. We can also say no, don't do anything, don't be responsive at all. I'm gonna take this logo and that's gonna look fine on mobile maybe. So what I'm gonna do is choose none. My point is at this design size before we start going and making changes at smaller sizes, we wanna look at everything and say are you really doing what you want? Do you want a size, do you not want a size? Do you wanna stick it to one side or another? And that's a great place to start when it comes to responsive web design. Now I think we're doing okay. So what I'm gonna do is just try it out. I'm gonna grab that gripper and drag and watch what happens. Nice. Unfortunately what's happening here is things are crossing. So what we're gonna do is this, you have to think to yourself, you have to say okay I'm making it smaller, I'm making it smaller, bam, oh problem. When I come to a size here as I drag smaller and I think to myself that still looks good, but if I drag it any further, I'm gonna need to make a design change. Here's what we do. We are gonna start big, go small. As we get smaller, if we think to ourself design change, we are gonna create something called a breakpoint. We are gonna tell Muse at this size, small or big, whatever, and smaller I wanna move stuff around. I wanna do something different. So it's still gonna keep it the same when it's bigger, but as soon we get here, it's gonna do something different. So here's what we could do. Come into the breakpoint right here, this little plus, and you're gonna drag that thing and whenever yours still kinda looks good, click on the plus. And you're gonna notice up here in the breakpoint bar, it's gonna add another color and it's gonna add another size. We're telling Muse at this size, at this scaling, let's do something different. And it's gonna keep all that the same way even as you get smaller. Check this out. I'm just gonna drag it and go right. The bigger size is still bigger. And then I'm gonna drag smaller and we haven't changed anything yet. So here's what I wanna do. Click back on that smaller breakpoint right there, that's gonna make the page that size. We can only edit content exactly at a breakpoint size. Right where this edge is right here. And what we're gonna do is we're actually gonna add what's called a mobile menu. We're gonna do something a little different here. So I wanna keep some different content out here, et cetera, but I'm gonna open up another file and I'm gonna copy paste something. Now mobile menu is sort of like a hamburger menu, you tap on it and it grows and you see a menu in there, that type of thing. I've already created one for you. You can open it up if you get the files or when you get the files. I'm gonna come under file. Now what you can do right now if you don't have access to these, if you're just doing this, you can just take this content and kinda drag it around a little bit. Make it smaller, make the logo smaller, just kinda move it a little bit. You can do that. I'm gonna come to file, open site. And I've got this mobilemenu.muse. This is in my assets folder. I'll open this up. Now the reason why I actually had this created already was because it takes a bit to create this. So I'm gonna double click on the homepage and I kind of explain what this is, a mobile menu is. It's kind of a kluge, a fix if you will. It's basically an accordion panel widget it's called. That if you tap on something, it shows and hides content. And in that content we just stuck a menu. So if you tap on this part, the menu will hide or show. So I kinda just give you a visual right here. But if you look up top, this is the one that we're gonna work with. If I come up there and click on it and then click again, look what I did. It's gonna open and close. So all I'm gonna do right now is I'm gonna take this and copy and paste it into our site. So I'm gonna click off and click on that, copy it. You can edit, copy, right-click, however you do that. Great thing about Muse is we can actually copy content from one site to another, between pages, and it mostly works, it's great. I'm gonna go back to the master page. So to go back to another page we're gonna click on the tab for it. So I'll click on A master. Now here's the thing, I don't wanna keep this stuff out here, but I'm gonna paste the menu right now. So I'm gonna go to paste or paste it and I'll see that I've got it out there. And what I wanna do is I wanna take this menu and I wanna just kinda stretch it out so it fits the browser window here. Now it's gonna keep doing this, you're gonna see. If I click on it, woops, got back to the back arrow, if I click on it and click off of it, it's gonna keep opening and closing. And if I click on it enough, I will see the menu out here. The menu's a little messed up. So what I'm gonna do is take that menu, click on it a couple times to select it and I can drag it over here and resize it and make it look pretty good. Now think of this menu system as a group of content. If you wanna select something, you can click off, click on again. And if you click a few times, that type of thing, you can select different parts of it. I'm just gonna drag that up a little bit. There we go, that's not too bad. The problem we have is that this menu right here, we don't need that anymore right now. So here's what we're gonna do. We're gonna take in our responsive web design here, you can actually hide things at a certain scale or certain size and then have other stuff out here. So I don't wanna show that right now. So if I click on that menu, come up to object, you can also right-click right on the object, you're gonna see a command called hide in breakpoint. This is awesome. And you're gonna see that shortcut right there. Command+3 or Control+3 on Windows. That just means at this size and my size is set to like 583 or something like that, doesn't have to be perfect, at this size and smaller we're gonna make sure that that menu I select is gonna hide. So I'm gonna choose hide in breakpoint. Nice. Now I'm gonna drag this up so it's up here. No unfortunately it's gonna go kind of over the logo and what we would do here is we kind of situate things a little bit better. But I'm gonna take this and remember how we said we had to have content in the right ordering? And I had to keep working with master pages? That type of thing. If I go here to the layers panel and take a look, I wanna make sure it's still on the master layer, this object. All right, there we go. That's good. Now I'm gonna send it behind the other content. So I'm gonna arrange it. So I will either right-click or go to object. If you know the arrange commands, you can send to back from other programs. And I'll send it behind the logo. So I'll do something like that, move that up. Now this menu right here hopefully looks pretty good. If I click to close, I click to open it, that type of thing. What you wanna do is you wanna make sure that the logo is small enough, let me make sure that logo is small enough. I'll just drag it, there we go. And also what we wanna do, this is kinda wacky, but we wanna make sure that the menu's closed initially. So if you click off this menu, click on it again and then click one more time on the top, the top part is called the trigger, it shows the menu, it's gonna hide it initially. That's what we're gonna see when we first start. Now check this out. I'm gonna grab that gripper and go smaller. You're gonna see it's gonna kinda size and then go bigger and what what happens. Bam, notice how it's still out there? Look at the menu way down there. It's freaking out a little bit, that's okay. Here's what I wanna do. We have to tell it when you put content out here, it's gonna show at every size. If we don't want this mobile menu to show with a bigger size, which we don't, it's silly, we don't need it out there, we're gonna hide it in the other breakpoints. So I'm gonna go back, why don't you click back on this size here, go back to that size, click on the menu and what we're gonna do like I said is hide it. So come up to object, we say don't choose this, but you're gonna see hide in breakpoint. That means hide in this breakpoint, we don't want that. We want hide in other breakpoints. So we wanna hide it at the bigger size. That's what this is saying. So choose hide in other breakpoints. And if I drag this gripper, look what happens. We got this, man. This is awesome. Every time I do this, I do this like a thousand billion times and every time I do it I just do a little yay. What what happens, I go smaller, bam, there it is. There's our logo, there's our menu. So the whole thing about responsive web design, it's gonna take practice, I'm not gonna lie to you. It's gonna take a little bit of time to get used to doing this. There are some hard and fast rules with it. You wanna make sure that you design at the larger size in the beginning. Get all your content out there on your pages, get everything out there you can. Then start making it smaller, when things break, click to add another breakpoint. That little plus up top. If we make this smaller for instance, right there at a breakpoint and then move things around, change things up. Make sure you look at the resize. So remember when we clicked on the object and we saw the pinning and the resize? Make sure you look at that every time you make a new breakpoint and say do I still want it to do that resizing? Do I still want it to be pinned on the side or in the center? You gotta check all of it. As we go throughout the day here, we're gonna be testing this stuff, we have to. That's just the way it's gonna work. But I would suggest like I said, design it all, then test the responsive part of it. We're gonna kind of do that in the next section as we go through, but for right now I'm gonna save this and I just wanna show you something that's kind of cool that we can do. We can actually go out and pin this header content real quick. I wanna do that. So we're gonna make it to where if the page scrolls, this header content will actually stay stuck to the top of the page and the other page content will go behind it. As long as you have your master page open, that's what we're gonna make sure we're on, you guys can click on the logo, you know what let's do this. Let's click on the menu, come up top and you remember I said we're gonna pin it to the right? Well we're gonna do another kind of pinning here. This is a special case, this is only if we want this to go up. Now bear with me for one second. Here's what I'm gonna do, I'm gonna actually show you what I'm talking about. I'm gonna go to file and I'm gonna preview this page in the browser, the master page. And I'm gonna make the page small enough so that we actually have a scrollable area. So let me pull this up. Now watch. When I scroll in the browser, look what's gonna happen here. Notice how the menu system goes with it, it scrolls? I want that to stick somewhere. And normally when you guys do responsive web design, it's just gonna go away, that type of thing. In this case I want it to stay in place right there. So what I'll do is go back over to Muse, let me close this up. If you click on something like the menu, come up top, you're gonna see that we have this other type of pinning. The three pins, I don't know how to do that with my hand anyway. Three pins is for responsive web design, left, center, right. Six pins is for pinning some object to the browser window. So it sticks upper left, on top center, upper right, that type of thing. I'm looking at my page and I'm saying I want the menu to stay up there up in the corner. So if I click the top center or the upper right, let's actually do top center, we'll try that. So top center means it's gonna always stay relative to the top center of the browser window. Now I'm gonna save this and I'm gonna go out to my browser. File, preview page in browser and just take a look at it and see what we get. And watch what happens here. Let me make sure I'm in the right one. There we go. Watch what happens here when I scroll. Look at that. I'm sticking it to the top center. And watch what happens when I go smaller. Eventually we're gonna have a little problem there, it's gonna kind of hit and work that way. And then we're eventually gonna have our content show. I kinda need to do a little fix there. That's fine, it's not working very well. So what I might actually do is take that instead of the center 'cause it's gonna get hidden, I'm gonna say upper right maybe. So upper right pin and I'll do the same thing for this logo. The logo I want to pin to the upper left maybe. So I'll pin it to the upper left. This is a different kind of pinning. Like I said this is a pinning for sticking it to the browser window. Now I'm gonna put a box behind this for a color or something like that just so we have it. So if I draw another box, you can also just copy, paste. I'm not gonna do that, I'm just gonna draw another box, keep it simple. Put it out here, it's stretching to fit. I'm gonna go fill it with a color, fill it with a color, there we go. Put it behind everything else, arrange, send it back. Now this one' just gonna move if you watch. Just look. Look what's gonna happen here. It's just gonna stretch and squish. And notice what happens here. Now unfortunately I want that box to hide in the mobile version so here's what we're gonna do. Come back to your larger version, let me scroll up a bit. Click on that object. And if you come to object, remember we wanna hide it in the smaller size. So we're gonna hide it in other breakpoints. There we go. I'll save it. And then take a look. There we go, should work pretty well now. Nice. Now if we go out to the browser and take a look at it, we may have to do a few tweaks, move it up, move it down, kinda resize things. If I go to file, preview page in browser, take a look at it. You're gonna see it's gonna do it. Now watch, this is the best part, I'm gonna scroll. It's gonna stick there. Now I forgot to actually set that box to pin, right? Some of you are thinking but why didn't you do that? Anyway. I go down you're gonna see we actually get the mobile menu. Nice. Okay, I'm gonna click on that box. Last thing, we'll save the site. But I click on that box, I'm gonna pin it to top center in this case most likely. Try it out. Make sure it's stuck up there in the center, save your site. You can go preview it in the browser. Don't forget we also have the preview in the upper right corner you can click on. You can hit Command+P or Control+P to do that as well. And that'll take you in there to preview.