Lessons

Lesson Info

Test and Publish your Site

The next thing we're gonna do is we're gonna start to just test and publish. I showed you how to test by going out to the browser quickly but I wanna show you how to couple other methods for doing this. If you come under File like I said, we have Preview Page in Browser and that can be great, honestly, because if you open a page in your site, if I double-click on the contact page for instance, let me do this. If you double-click in here, contact page for instance, come up under File and you're gonna see Preview Page in Browser. Now what is the difference between Preview Page and Preview Site? Preview Page is just gonna open that one site in the browser. I tried clicking on any of your links up here, they're not gonna work. It's gonna say, well you didn't load that in the browser 'cause it's just the one page. If you need to go and test the entire site, you're gonna go Preview Site in Browser. So I'll go choose Preview Page in Browser. This is actually faster. That's why they give it to...

you honestly. So it doesn't have to load the whole site up there, it's just the one page essentially. There we go. Now I can go to home, watch what happens. I didn't load that, so it's gonna say, and of course, you guys it's actually cached on my end, that's why it's doing it, but normally it will not do it for you, okay. All right, let me go back over the Muse. I got my site saved. Next thing I wanna do is preview here in Muse. You can do that. It's kinda weird, but if you actually want to preview, it's like the print command. It's command + p or control + p. If you look in the upper right corner, pressing that command will take you to what's called preview mode. If I click on preview up here, we're actually looking at it in a browser right now. This is a browser engine. So you could just preview it right here. So I could go between my pages in this case. I don't have to worry about, it's just gonna load them in. There we go and work it's magic, okay. Probably gonna have to drag that down a little bit. This is why we preview by the way. Nothing's ever gonna be perfect right out of the gate and if it is, you're amazing, I'm not. (laughs) So we always test and try these things out. Now the thing about this is that if you wanna change the size of the screen itself, we have to drag the whole Muse window to kinda do that. There's different ways to get it done, but I sometimes like going in the browser, 'cause you feel more comfortable and anyway, you test how you wanna test. These are just preview methods. All right, go back to plan. Now if we're comfortable and we're feeling good about this and what we wanna do is maybe we wanna share this with someone else or we wanna actually take this and we wanna put it on our device. We wanna go look at it on an iPad, on a phone, on a this. What we can do is can do something called Publish it. If you look up here, we've kind of taken a look at Plan, Design, Preview, quick preview to look at it, and now Publish. Now don't just click Publish. I'm gonna click on the arrow to the right here. There are three methods for publishing this thing. There's FTP host, there's Business Catalyst, and there's Export as HTML. Now Export as HTML is gonna give you a folder full of HTML pages and images and different things like. Basically, everything that it creates to put up on a server somewhere. This is the best part about Muse. It's generating the site. This isn't just the design we're looking at. It's gonna create code, get it out there, and we can just take this thing an publish it Go Daddy, One in One, Bluehost whatever host you happen to have or you can Export as HTML and I actually do that sometimes because it gives me a folder full of optimized images. And sometimes that's great if you wanna just do that. You can have these sized images and they're all optimized according to Muse, which is usually pretty good. Now we can also do FTP Host like I said. That's typical hosting platforms out there. You can just sign up for one. You can get an email password, that kinda thing, get an account, and then you just put the information in there and say, okay well what's your account information? Muse is gonna take your pages, cobble 'em, make 'em, make all your images, get 'em all optimized, make all the code, get it all together, take all that, put it up to your host and you're done. That's pretty much it okay. The only other thing you're probably gonna need to do is buy a URL, right? You gotta buy a name, a web name. And you can do that through your host usually, okay. Now I don't care if you want to host with another host or the big hosts out there, you're probably gonna also choose Business Catalyst. Business Catalyst is Adobe Hosting. Now this is something you can test your site on live, out there on the internet for free. Now it's gonna give you a URL like something, something, something.businesscatalyst.com, but if you're, let's say you're working on a team, you're working with a client and you want the client just to see it while you're building it or something like that, you can do that, it's free. You get a free trial for this, okay. So I'll choose Business Catalyst. It's gonna say, okay well you used some Typekit fonts, so what we need to do is kinda hook things together and make sure that we send them up to the host. So all you need to do is click next. And now it's gonna say, what do you wanna name your site? You just give it a name. Now if it's already used, like I type in Brian, it's gonna say, well there's about six billion Brian.businesscatalyst sites, and there are, it's gonna say, that's the site name you're gonna get. So you wanna be a little more creative in some cases. So I'll say like CLMusesite. Nobody's used that before Creativelive Musesite.businesscatalyst.com. This is gonna be my URL. Now like I said, we're testing this. It's gonna put live to the world. I can send people this URL and they can go look at it on their device, on their browser, whatever it happens to be. There are options. We're not gonna talk about those right now, 'cause we don't need to typically. Just click OK and it's gonna publish this. Now what we can do is we can wait a few minutes here. This is gonna take a little bit. I gotta be honest, if you have a really big website, go to lunch, okay, I'm talking a really big website. This one's actually not doing to bad. It depends on your internet connection. It depends on the types of content, the images you have, how much it has to optimize all these different types of things. And as soon as it finishes, check this out, you can right now, if you go to your browser, you can actually type in CLMusesite.businesscatalyst.com and you can see that site that I just published. Now you're gonna see there's gonna be a few things here. Notice that the footer is stuck at the bottom and notice the white gap guy I get there. I'm probably gonna wanna make sure I go back and fix that. This is why we preview in the browser. I'll go to portfolio, take a look at it. Doesn't look too bad. Go to contacts. And then we go in and we take a look and see what happens here. And you're gonna see, not to bad. Okay, it's a start. We wanna go in and we wanna try it. This is why test. This is why publish to Business Catalyst, this is why get to see kinda see how things happens. Now what I wanna do, I've actually got this set up. I'm gonna take this and we're gonna go, I'm gonna go back to Muse here and I'm gonna actually show you on device what this kinda looks like. So I'm gonna click OK. That's just kind of a little report. Now if you look in the upper right corner, you're gonna see share. That wasn't active before. As soon as you publish somewhere or somehow, if I click on Share it's now gonna say, well look, your site is live. Now this is gonna saved with the site forever. So if I open this Muse file a year from now, it's gonna say hey look, you've already published it. The site, hopefully is live, you knows, I don't know, but it's gonna give you and tell you that you have done something. If you want to, you need to give this to a client or something like that, you can click on Copy Link, and just go to your email or whatever, paste it in there and they have that link so they can see it. Now the other thing you can do, is you can actually, if you forget the URL, which I do that all the time, you can come up here and you can actually click on the URL name and it'll take you to the browser right here on your machine. Now what I wanna do is I'm gonna go out to my browser here and take a look. And you guys, I'm gonna open up the pretty one, is that okay, 'cause the other one, I'm gonna have to resize that image, and that's just annoying me. I need to drag it down, make it bigger. So I've got the one that I already dragged the image down. If you look, I'm gonna open up this home page. All I did was make that image bigger. I just dragged the bottom down. So what I'm gonna do take this one, and I've already published it. I'm gonna open it up, it's live. And what I wanna do is I'm gonna take a look at it on my device just to show you. See if we can get this to happen. All right, I'm gonna go out to my phone and what I wanna do is I'm actually gonna take a look at it in browser. Let's see if we get it here. You got it, okay. I think, I think, I think we got it. Here we go. Now you can notice, you guys, this actually has a few more bells and whistles. I actually have a mobile menu, but you'll notice, and let me flip it over here, we're gonna see that it is actually looking pretty good, not too bad. A few fixes, not much, but I'm going in and just checking it out. Now, let's see if I can actually go over to my iPad here. And once again, this is a live site, so you're gonna be able to see what we're doing. Now I'm just gonna tap and see if we get it here. Set it down there and there we go. Not too bad. So I'm gonna, sorry I'm moving it around here, but I'm gonna just start going and looking and seeing what we get. Not too bad, not too bad at all. Now the thing is, we do need to test these on device, we really do, because you can get a sense for it in Muse and you can kinda feel well, okay, what is it gonna look like, but if you know for instance that a lot of your users are gonna be using a specific iPhone, you can test it right on that device and you can know then what things look like. Is it too far over? Are things not centered? Whatever it happens to be. So that's actually a great way to do it. Once we go in and we test it, I'm gonna close this up here. Once we go in and we test it, we're pretty much good. I mean we go in and we start making our changes, we start doing things like that. And once we make those changes, I'll show you in a second here, we're gonna be able to just quickly upload what we did. So I go into site and I go into my site here, and let's suppose that stop being lazy, I zoom out a little and I grab that homepage, and I drag it down, right? That right there would have fixed it on the iPad, okay. I'm gonna save my site. I'm gonna just save it out on my desktop again real quick. And what I wind up doing is, you're gonna find that if I actually have published this before, I can go right back up to Publish, and just hit return, and it's gonna just upload what I've changed essentially. So that's actually a pretty great way to be able to work. Once you publish it up there, you're gonna find that it's just gonna do it for me. So I'm gonna go up to Publish here, and remember this is the one that I did not do. So I'm gonna click okay, it's gonna do it for me. Look what it's doing right there. I published this previously so it's say okay, we know what the URL is, which is different, I know this is a different site, but it's gonna go up and just do what's different. That's the great thing. If you have a really big website and you make a few changes to a few pages, it's gonna go in and say, we're just gonna upload or change what's different. I love that, so it doesn't have to upload the whole site. There we go, there we did it. So in a nutshell, that's Muse. Muse has a lot goin' on and if you are looking to build a website, if you're looking to do wireframing, prototyping. If you're looking to create some kinda, I don't know, presentation, you can do that as well. There's a lotta things we can use Adobe Muse for. But it's got a lotta power, it really does. And you'll find that you can actually expand that power as well. There are third party widgets and people out there that will create some amazing things, like being able to sell things, background videos, full screen video, that kinda thing, and you'll be able to get those for free or paid or however it works, and download them and pull them in. And in the advance class I actually talk about that a little bit. But with Muse you can jump in, you can create your responsive website. It's all visual, you're designing, you're moving, you're checking, right, checking our designs, and once we get it, we're solid. We've got ourselves a fully responsive website, which is awesome. So I just wanted to say thanks. Thanks for hanging in there, thanks for watching this, and my name is Brian Wood and I will see you soon. Thanks a lot for coming.