Lessons

Lesson Info

Intro to Responsive Web Design

Now that I've got my site kind of started here, what we're gonna do is we're gonna focus on a master page. So come down here you're gonna see every site starts with one master page. These are kind of like master pages in InDesign, if you've ever worked with those, or they're like a template. If you put things on the master, they show up on every page by default. You can create more than one of these masters, apply them to different pages for different sections you recite, do all kinds of things if you want to do it that way. I use the master pages because we're gonna put consistent elements on them. So to go to the master page to start adding content and things like that, double click on a master. That should open it up. And we're in design mode right now. What's great about Muse is that once you start opening pages, each page has its own tab at the top. You can always go back to plan mode. As a matter of fact, plan mode there's a mysite, that little tab right there, I can click back o...

n it right up there, and that will take me back to it. All right with the master page open we can start to do things that will be covered across our whole site. Things like colors and backgrounds and all kinds of things. If you look out here, let's just take a quick lay of the land in Muse, see what we got. On the left we've got a toolbar. This is probably the world's smallest toolbar if you know other Adobe applications. We've got things like text tool, shapes, move around zooms, all kinds of things to work with. Above, up top here, above the document window we actually have the control panel, the control strip up here. This where if you click on things if you're used to Illustrator and InDesign, PhotoShop even, click on something, it's gonna show you some of the properties right up there you can change. And on the right we've got a bunch of our panels, which once again if you 've worked with other Adobe applications, you're gonna be familiar with these. They're really similar. All the panels in here, they're docked over on the right, at least the ones that are open, but there's a lot more. If you come under window, you'll see there's a bunch of panels you can open. For our master page, what we typically want to do is set up some kind of color or something like that. We actually have, if you look with nothing selected, we have what's called a fill color. This is the page fill color. Now the reason I can tell it's the page fill color is because on the left here you're gonna see that we have the type of content selected. Right now nothing's selected, so it's affecting the page, whatever we do out here. So if we wanna go to fill, you could come in here and like put a color in here. I don't really want to do that, so I'm gonna keep it at none. The fill or the page is right here. Now there's actually a kind of layering going on. We have our page. We have our content in front of the page just sitting like right here so if we put a color on the page background, it's gonna show behind all your content. We also have what's called a browser fill. Now I don't have three hands, so I've got the content, I've got the page, and I've got the browser behind it. This is the actual browswer window. We can use what's called browser fill to put a color, a picture, tile things, most of what we want in the back behind everything. So to do that you could come to browser fill up here. If you click on the word browser fill, you'll see we can put in a grading back there, which ... wow that looks horrible. I'll go back to solid. We could put in an image. If I got to add image, it can do that too. There's a lot of things we can do. I'm just gonna keep it like this. I think it looks great. If you want to explore, go ahead. Next thing we're gonna do with the master page is we're gonna make sure that we actually have a header and a footer section set. When you create web pages, you don't always follow this rule, but a lot of times we'll have like a logo and the menu up top, something like that, or on the side, and on the bottom you'll have footers, social content, whatever you want to do, right. Well in here on the master you're gonna see we have these guides, these blue guides running across. There's a little handle on the far left here. If I drag these, you can set the size of the header, and the size of the footer. Now the header area is something that you can change later on, and it's just for you to figure out what's gonna go up here. How big is it gonna be? Down here the footer area is a little more important as far as how tall you make it. Just grab that little, right there, that little guide up and down. Anything below that guide will automatically move down as you add page content. So the footer content's gonna move, which is great, and on your sites what's gonna happens is the footer content below that guide is actually gonna be stuck to the bottom of the browser window. If your page is really short, and you're looking at it on a really big device type thing, that's gonna happen by default. So anything below that line, that's great. Now what we're gonna do is we're gonna start to add some content. So I'm gonna add maybe a graphic, like a logo. I'm gonna add a menu. I'm gonna add a color bar, things like that. So what we'll do is we'll just kind of start out a little simple here. I'm gonna go put a rectangle out here just to put something on the page. So over here in the tools panel, you'll see we've got a lot of stuff we can work with. If you're used to InDesign, we actually have two shape tools you can call them, rectangle tool and rectangle frame. The rectangle tool and all those underneath, you're gonna see there's a couple underneath, those are basically page elements. They're kind of like I want a background shape, or I want a button, or something like that. The ones with the x in it, those are typically for graphics. Now the reason why I'm mentioning this is because you can go to those shapes, and you can do something like this. I can come out, and you're just gonna click and drag to draw. I can draw one, and say, "You know what? I don't have my picture yet, but that's where it's gonna go." so we can use placeholders if we want to do that. I'll delete that. I'm just gonna hit backspace or delete, and what I wanna do is I just wanna put a color box in the footer. We'll just put it down there. So I'll go to the one without the x in it, because it actually has more capabilities too. Later I'll show you. With that selected I'm just gonna come down here and click and drag. I'll just make it the size of the footer. So you just make a box. Make it the size of the footer. That looks pretty good. Now by going over there, I don't know if you noticed, but when I drag the corner ... Let me go back over to the black arrow. That's kind of our selection tool to move and rotate and transform and do things. When we took this and we drew it, you'll notice that as I went in the corner, red guides showed up. I don't know if you noticed the snap there. That means basically that it's gonna fill up that whole area, which is really pretty cool. All right now I think that looks pretty good. The next thing I want to do is I just want to put a color in it. So if you come up top, you'll notice that because it's selected, I actually have the rectangle showing in the upper left corner, saying this is a rectangle. And here's all the properties. Here's the things we can do. What I'm gonna do is just fill it a color. Now you can if you want to, start with an existing color. You can mix it up. Do some different things. You can kind of change things a little bit, if you want to. I'll make something like this, maybe a little bit lighter yellow, etc. There you go, that's pretty good. If you want to, you can save colors in Muse just by clicking on this little button here, and it's gonna add a swatch to your swatches. So this is something that for this site it will save that color, and you can reuse it if you want to do that. I'll just click okay. There's other things that we could do, but I'll just leave that there. All right that looks pretty good. Now what I wanna do is I want to add a logo that I've created somewhere else. We can bring in JPEG, GIF, PING, native Illustrator files. We can bring in PSD files. There's a whole slew of file formats that we can try to bring in. To bring in an image, what I'm gonna do is just click somewhere to have it to deselect. And then to place an image, I'll come under file, and you'll see that we can do two things here. We can place. Place is a command like Illustrator, like InDesign that allows you to place text and pictures or images and graphics. So we can do all that with that one command. And you notice that shortcut, command D? That's the InDesign shortcut. You're also gonna see place PhotoShop file. This is a way for us to place a layered PhotoShop file that's gonna become a rollover button with states. So it's gonna hover over it. It'll show another layer, that kind of thing. Choose place, and we'll go out and we're gonna place. Now I've got a folder full of content here. I'm just gonna place a logo. This is an SVG file. Now SVG is awesome for the web. It really is because it's scalable vector graphics. It's something we can save out of Illustrator and Photoshop, and it's vectored so that it can scale and stretch and do all that stuff, and still look awesome. We don't have to worry about sizing, scaling, all that. I'll click open. And what's gonna happen is you're gonna get this loaded cursor. I'll just click. And we can place multiple images at once. We can do all kinds of things. With this out here, if you guys check out the fundamentals course, you'll learn that there's a lot of things we can do with our images. We can rotate by coming off a corner. We can resize, and in here it's kind of interesting, but if you resize, you don't have to hold any keys down. That's actually gonna mess you up if you know InDesign or Illustrator. So I'm just gonna drag, and you'll see, I can just drag it, and it'll maintain its proportions automatically. That's pretty awesome. All right I'll put it up here. Now when you work with images and graphics and different things like that, you'll find that when you place them, you're actually linking to them. You're linking to the original asset in your folders. So if I look on the right, you're gonna see one of the panels over there called assets. Just click on it and take a look. It'll show you. There's the logo. It'll even give you a tool tip if you hover over the right spot and say that's where it's located, okay. So in this panel you can go over here and update links and do all kinds of things, replace images, all that. All right the next thing we're gonna do is we're gonna add a menu. So the menu is something, like I said, that a lot of sites have that way people can get around. The menu is something that we can have Muse create for us, or we can create what's called a manual menu, and make your own. On the right, I'm gonna open the widgets library panel. Say that 10 times real fast. This is the cool stuff. I'm not gonna lie. This is where everybody goes. They're like, "I wanna put a slideshow. I wanna do a rollover button. I want to do a form." It's all right here. so if I come into this panel, you can start to explore and look around, and you can start clicking on these little folders here to see all this content, but I'm gonna look at the menus. Now we've got two menus. We've got a horizontal menu and a vertical menu. You drag whichever one you want into your page. Same with other widgets. If you want to use one of these, you just drag it over. I'm gonna take the horizontal menu and just drag it onto the page and just drop it anywhere. It doesn't really matter. There we go. Now notice this. Notice what it's doing. It's automatically picking up the pages you made over there in plan mode. If you add pages later, and this can sometimes screw you up actually, you add pages or delete pages. This is gonna change. It's gonna keep updating to match what you have in your plan mode. That's actually called your site map over there in plan mode. So you're figuring out what pages we need. Now with the menu on the page, you should see this little options window. If you don't see it, you can actually click on the menu, and there's a little blue circle here. All your widgets have something like this. So you can click on that to see the options. Right now it's actually showing our top-level pages. If we wanted to show the sub pages, or children pages I was talking about, like a sub menu, you would have to choose all pages. That would show whatever you have as far as submenus. Now I don't want to do that. We're gonna send them to the thanks page, but I don't want them to go to it because that wouldn't make any sense. So I'm gonna go up here and choose top-level pages again. Now we can go in and say, "I want to change the sizing." there's a lot of options we can set in here. For right now, all I wanna do is get it out there. So I'm gonna click away, and then drag it right up here. You're gonna notice that we actually have smart guides in here. It's gonna help us try and align content, which is great. I'll snap it right up there, and just make it smaller. So I'll drag an edge. Drag the left edge to the right. If we wanna go in and change the coloring of this, we could pretty easily. Think of these widgets that you drag out sort of like groups. They're groups of content. If you wanna edit a part of it, you're gonna go in and start clicking in the object or in the widget. So if I wanna edit one of these buttons, like home right here, I've got it selected, the whole thing, I'm click once more on the home button, and it selects just that one. And that's gonna let me go in and do things like change the fill color, do all kinds of things. Now the cool thing about that too is that on menus all of these menu items will change if you only change one. There are some more advanced settings we can set and change them independently and things like that, but we're not gonna go there. So come up here and you can see fill, stroke, we've got rounded corners. We've got drop shadow effects. We've got all kind of things we can affect. I'll just maybe change the fill color to none, that way we can see through them, that's fine. And then if I wanna change, let's say, the text color, you're gonna see there's a whole panel over here, or open the control panel if your screen's big enough, called text. We can go over there, and we can do the text color. We can do all kinds of things. I'll do a gray is fine. It's good right there. Now these menu systems actually have what's called a rollover state. There's other states to these. If you click on one, like I said before, come up to the upper left-hand corner, you're gonna see the word normal. Anytime in the control panel up here you see like orange and underlined, that means if you click on it you're gonna see other options. So if I click on normal, we can go in and set a rollover state. We can set a mouse down state, and an active state. And the only thing you need to do here is whichever state you wanna affect, how people interact with the button, you just select it, and go out there and change the fill and change the color, do all kinds of things. So just to show you, for rollover. If somebody moves their mouse over this or their pointer over this, I selected rollover, I can go over to the text panel and say, "You know what, I want the text to be white." We're just reversing it right? So if I come back to rollover in the corner, I can then see, "Okay, that's what normal looks like and that's what rollover looks like." Go ahead and explore. Try some of these. You can do some great things. All right we've got some content out here. Now the next thing what we're gonna do is we're gonna look at responsive web design because this is a big deal. Responsive web design means is it gonna look good on other screens, other devices, and things like that. If we look at this right now in our browser, it's probably gonna look fine. Okay, it'll look great. We have this little handle right up here. This is awesome. This little handle up in the upper right corner, if you drag it, watch what happens. I'm gonna drag this thing. We're actually gonna be able to preview it at different device sizes or screen sizes. If you even go further, drag it further to the right, check out what happens. See your page, the page corner or the page size right there? We set a maximum width when we first created this thing. That's it. It's not going any wider. The white outside? That's the background fill. That's the color or shape or whatever you want to put back there when we first stared doing it. That's the browser fill up there in the control panel. Now you're gonna see right here, let's just suppose I just drag that thing and I'm like, "Oh, I checked it out. That looks great." Now notice what happens here to the logo and the menu items. They're shrinking. Okay, I don't want to do that. So here's what I' gonna do. I'm gonna go select one of these to start changing things, but I can't. Look at this. I come out here it's gonna say click to jump to breakpoint. Now you see that purple bar along the top? That's called the breakpoint bar. What we're gonna do is we're gonna go out and say, "If I need to make a design change, I'm gonna set or create a size, or a breakpoint." Just follow me here. Just click in the page. It's gonna jump you back out here, and Muse is saying, "What you need to do right now is we need to get all of our design content out there." And this is best practice by the way in Muse. All of the design content out there best we can. And then we go and drag it smaller, smaller, smaller. And when things break, we're gonna fix it. That's the whole idea here. Now every object on here has some kind of responsive nature, it's called. If you click on the menu for instance, and select out, look up top, you're gonna see there's two things we're gonna talk about with responsive design. If you come to resize, right here, click on resize first, you're gonna see that just about every object you put out here has resize possibilities, okay, options. Responsive width means as it goes and goes like this, as we make the screen size smaller, for instance, it's gonna take the width and shrink it and grow it like this. It's responsive, remember that, us showing you this? We also have stretch to browser width. What that means is take that menu, jam the left edge to the left edge and right edge to the right edge of the window, and as it gets smaller, take the whole thing and like an accordion go like that. I really ... this is such a small menu, I don't want it to do this, responsive width. I want to keep it as is. So I'm gonna choose none. None just means don't do anything to it. Just let it hang out at that size and let's do it. The logo on the left, go ahead and click on that. Same thing with that, by default, everything has a responsive nature. We can call it that. If you come up top and you see the resize content' right there, you're gonna see that images by default have a responsive width and height. That means as we look at it on a smaller screen, that image is gonna take its width and height, and get smaller like this. It's gonna be scaled proportionally, which is great. That's what we need. Now once again, I don't want to stretch it to the browser width because that's just silly. It's gonna be ginormous, right? What I want to do is say, "This logo's pretty small. I don't want to scale it." So let's choose none. We can always change this stuff later. Now, watch. I'm gonna grab that bar and that grouper and drag, and look at what we get. Not too bad. Now the only other problem here is look at the menu. The menu's just kind of hanging out, freaking out right there. So what I'm gonna do I want to go select the menu, and I can't until I click and go jump out to that size again. Click on the menu. And what you can do is you can also align content to the page, so that it will kind of travel with it, like maybe an edge or stay in the center, that type of thing. With the menu selected, if you look up here you're gonna see that we have a couple different pinning options. We are not gonna talk about the one with the six pins here for right now. That's a little further along. We're not gonna talk about it. You're gonna focus you efforts for right now on the one with the three little dots, the three pins. This is for responsive design. This is allowing us to say, you can probably figure it out, if I'm saying pin it somewhere, saying, "Pin it to the right side of the page. Pin it to the left side of the page, or pin it right to the center." What it basically means is when you do this it's gonna stick to one side or stay dead center, okay? I want to take this menu, and I want to actually stick it on the right side, so I'm gonna come in here and click right pin. I'm gonna drag that gripper, and watch what happens. Pretty awesome. Now I'm gonna click in the center again just to jump back out. I'm gonna do the same thing to the logo. I want it to stick to the left side. So with it selected, I'll say pin it to the left. That's awesome, there we go. Now let me see it. That looks great, right? Look at that. Check that out. Okay, now it doesn't. Here's what's going on. I think it looks awesome up to a point. We're gonna do this. I'm gonna go small, small, small, small, and realize, "Wait, hang on. We got a make a fix." Whenever you think to yourself in Muse, "I need to fix the design. I need to do something," what you're gonna do is you're gonna tell Muse, "Okay, at this size we're gonna make some design changes." Think of it this way. Adding a breakpoint means fix the design at that size. So we're gonna do something called add a breakpoint. So what I'm gonna do is back it up a little and say, "Okay, this still looks pretty good. Right here, we're gonna move things around and do some different stuff so they don't collide." So up here you're gonna see there's a little plus on the breakpoint bar. I'll click on that, and I can now at this size, I can do whatever I want within reason. I'm gonna take this menu, move it down here. It's gonna center it. You're gonna see smartguides. I'm gonna take the logo and make it smaller. I'm gonna bring it up here. Center it, there we go. Get it in the header a little bit, and I wanna make sure this content, all this, stays centered. So I will click on the logo, and you'll notice that it's actually pinned to the left still. I don't want to do that at this size. I want to say pin it to the center. Same with the menu. Click on that. Pin to center. Now what we're saying is, "At this size and smaller, essentially, okay?" Now watch the magic. Check this out. I'm gonna grab that gripper ... Bigger ... Smaller. Check that out. There it is. You guys that is responsive web design in a nutshell. The whole idea with responsive web design in Muse is we've got to pay attention to the sizing, the scaling, of things. We've got to pay attention to the nature of objects. Do we want it to scale? Do we not? We've gotta pay attention to where stuff is on the page, and we've gotta fix the design as it gets smaller. So with responsive web design, let me do this. I'm gonna save my site, or save my page here. And the next thing we're gonna start to talk about is we're just gonna add some more images, add a little bit of text, and kind of work that way.