Adobe® Muse Fundamentals

 

 

Lesson Info

Final Testing and Publishing

What I want to do is I want to talk to you about working with and publishing, testing, working with testing, and working with publishing and kinda getting this thing out of here. So what I want to do is I'm actually gonna close up all the pages. I'm using Command + W, or Control + W if you're on Windows to close up the pages; or I'll just click on the X's, that's fine, and get back over to this site doc here. Now, if we are ready to share this with people, like I said we can preview it in the browser on the hard drive here, I can preview it in the one browser. You can also go and preview it inside of Muse. If you want to test it on other devices for instance, we are gonna publish it. So if you come up to the right here, you're gonna see the word publish. Now don't just click the word publish, click the arrow to the right, and you'll see we have three options here. We have FTP Host, Business Catalyst, and Export as HTML. I'll just hit this one down here. Export as HTML is gonna give you...

a folder full of HTML pages, Java script, CSS, images, and all the things necessary to make this run somewhere. I typically will export as HTML because maybe I wanna get the optimized images on here. That could be one of the great things you can do. So that's one of the reasons you could export as HTML. We'll also see FTP host. FTP host is, if you wanna host this site, it's gonna make the site right now. Cobble it all together, put the folder out, all that stuff. If you wanna host it on Bluehost, GoDaddy, 1and1, HostGator, whatever it happens to be out there, that's what you're gonna do. You're gonna go sign up on that hosting platform, alright. They're gonna give you a username, a password, all that good stuff, an account. You're gonna click on FTP Host, it's gonna usually say "Hey, we gotta connect to Typekit," that's because we use Typekit fonts. Don't even worry about that, just click next. Here's what we have to do: Whatever your hosting company gave you, they're gonna give you an email. They usually call that the golden ticket, or an account sign in. There's gonna be something like the server, the username, the password, and that's all you need to give it. Once you do that, it's gonna allow you to upload your site to that server to that actual company, the hosting company, and you're sit is pretty much done. The only thing you're gonna probably have to do, or want to do, is go buy a URL, go buy a domain name. And that's something you can do with the host, and they can help you usually connect the two and get it done, and it's usually pretty simple if you buy in the same host. This is all you gotta do, I'm gonna click cancel, but I wanna tell you that even if you're gonna go host somewhere else; you're probably gonna host, or at least go to 'Business Catalyst,' this is Adobe Hosting, and you get a free trial, okay. They say you get a 30-day trial for this kind of stuff. So you can take your site, you can publish it to 'Business Catalyst,' and what it's gonna do is it's gonna make the whole site, it's gonna put it up on Adobe Server somewhere, and it's gonna give you a URL. Now the URL, the name of the site, is gonna be something like whatever you want, dot, business catalyst, .com So this is, right now, we can use purely for testing if we wanna do that. Later on, if you decide, you can actually switch to Adobe Hosting and start paying. You can do something like that too, and then get a real domain, like an actual domain, okay. I do this all the time. Go to 'Business Catalyst,' you can actually then push it out there, you can take the URL it creates, and give it to people. So, I'm gonna click on it, it's gonna say it's gonna link to Typekit, yeah yeah, we know. That just means the fonts will work. I'll come into site name, and I'll say like 'CLSiteMuse,' the reason why is cause I, already did the other one, this is a new site, and you're gonna see, it's gonna give you, this is your URL to give to people, okay. You don't have to remember, don't worry, it'll let you see it later. There are a ton of other options in here, if you want to, you can actually publish to an existing website you've published in the past. You can change the URL, you can go to a different data center if you want. If you know that, maybe, you know most of your clientele is in Europe, then you choose European Union, it's actually gonna put it in that data center as the send out point, or the point that it's gonna kind of start from. I'll leave it automatic so it determines it, and click OK. Now what's gonna happen here is, it is now going through and saying 'We're gonna take everything you design in here, all this content, these pages, etc., we're gonna generate HTML, we're gonna generate CSS, we're gonna generate Java script, images, image content, we're gonna link it all together, we're gonna put it in a whole bunch of folders, kind of wrap it up nice for you, and we're gonna upload it to Business Catalyst, to Adobe Hosting.' Just like as if you went to FTP hosting, or like GoDaddy, 1on1, Bluehost, etc., okay, all these different. Now, if you have a big site, go to lunch, go home, whatever, it sometimes can take a little while, depending on the website you have. Most of the time, I find it does a pretty good job, and it's not too bad, and it also depends on your internet connection. It's not all Muse. Once you do it, there it is. There's your site. It is now live to the world. So, what I could do, if I wanted to is, you guys could actually get this URL, and I got a little white gap there I got to fix, but that's fine. And you could take a look at it. I could take this URL right here, and let me actually go back to Muse and I'll show you. If I go back over to Muse, you're gonna say OK well you're all done, great, no problems. And if there are any problems that occurred, they would've listed them here, okay. I'll click OK. Now after you published, if you forget that URL, if you want to find it again, give it to a client, that kind of thing. Click on share in the upright corner, and you'll see, right now that's saying 'OUR SITE IS LIVE,' which means it's on Business Catalyst, it's hosted, and this is the actual URL. If you click it, you go to the browser and look at it. If you want to just copy the link, you click copy the link, and you're done. You can then e-mail that to somebody else. They can look at it on their device, on their machine, on their this, on their that, and be done with it, okay. And that way you can get feedback, whatever you need to do here, to, you know, the reasoning behind this, alright, to do this kind of testing. We also have in-browser editing, which we're not gonna cover, but it is something where, if you had a client where they wanted to make text changes, things like that, they could actually do that in their browser. If you wanna learn more about it, you can actually, there's a little thing right here might just show you something, take you out, there you go. Little help learning about it. Otherwise, we can copy that link and send it to somebody else. If you're not quite done with your site, you've already published it though, and you say "Well I just made a change," so, I'd go out and go to the thanks page, I changed the font, I added some text, I did something, whatever changes you happen to make. As soon as you make those changes and save the site, if you come back to publish, now, it's gonna remember that you published to Business Catalyst forever, okay, with this site file, and it will always be there, that information will be there. You can just click publish, it's gonna remember, I click next, and, if you'll watch, there's the URL. This site will remember, this file will remember. I click OK. Great thing about this is it's only gonna upload what has changed, it's not gonna upload everything, that's the best part. So you don't have to go through this every single time. So it should be a little faster, after I put everything in and get it done. Okay, now, I do want to show that once you do all this, once you get it all done, I mean we've got this content out there. I'm still gonna go look at it, you guys. I'm still gonna go look at it in the browser, make sure it's still working, everything works. I might see gaps, things like that, that I need to kind of pull the images down, fix things a little bit, but if I'm ready to go, what I can do is, I'll show you guys on my devices over here. I've actually got my content, and what I wanted to do is go out, so this site is live. It's out there, and if you watch you're gonna see. See that gap down there, I knew that was gonna be there. What happens is, the iPad is really tall, right, in this direction, anyway. So, this image is not quite making it. I'll have to pull it down a little bit in Muse, and republish, but, that's good. So that way, now, I can go out. I can check it in different directions. I can try my contact page. I can do all kinds of stuff here, but it is a live site that we can go and test, as you can see, there we go. So, it is working, I mean, honestly my iPad is about as big as my desktop, so that's not really cool. I mean, it's not really a test, okay. The test, let's take a look. I know that on Macs you're gonna have a little gapping. Okay, come on now. I could type in the URL, but, I'm being kind of lazy. There we go, there's the site. Not too bad. And this is where the rubber meets the road, this is where, if you realize that things are not working, look at that, I gotta move that object down. This is why we don't trust exactly what we see in Muse a lot of times. We want to make sure that we are actually going out and trying it. We're trying out our forms, we're trying out our content, we're trying it in different orientations, to check and see what it does. Okay, you guys can see it's kind of going back there, there we go. Flip back. Nice. So, you can, if you want, try it on a device, and if you know, (I'll close this up), if you know that specific, let's say that you're making this for your office or something, and you know that people are gonna look at it on a specific device. I know that, sometimes people make websites for like, a sales team or something, and they're go out on certain iPads. You can make sure that you look at it on that device, and that it all works properly, right. This is why we still have to go out and take a look at it in the browser, and try it on the device, and look at it, and gather feedback, if we can. Make changes, updates, and publish when we're done. So that's it, I mean, we've covered most of Muse. There's a lot of things that we can go beyond with, as far as Muse is concerned. I hope you got something out of this, and I hope you kind of realize now, if you didn't before, what Muse is capable of, and that it is a responsive design machine, I mean, it's awesome. It's a great way, visually, to create a website for ourselves, where we don't have to go in and work any code whatsoever. Of course we could bring code if we know what we're doing, you know, from different sites, that type of thing, but everything you do in there, Muse has got your back. It's gonna kind of create things, it's gonna optimize things, it's gonna work for you. So I hope you enjoyed this, and I really appreciate you spending the time with me. Once again, my name is Brian Wood, and I will see you next time. Thank you.

Class Description

Take a deep dive into creating a responsive website—without writing code—with this complete step-by-step walkthrough of Adobe® Muse. You'll walk away with a solid foundation for building a responsive website and see how easy it is to create a truly unique, expressive responsive website.

Join author, speaker, and web developer Brian Wood as you create a unique responsive website from start to finish, in Adobe® Muse.

In this Fundamentals class Brian will show you:

  • A typical web workflow, from start to finish
  • Best practices for setting up your fully responsive website and add pages
  • How to setup and work with master pages (and understand why you want to)
  • Adding master content like page navigation, logo, and more
  • How to ensure that your design content works across all screen sizes using responsive features
  • Best practices for adding image and graphics to your pages
  • How to add and style text using styles and fonts like Typekit and self-hosted
  • A deep dive into the powerful widgets available to you, including slideshows, adding a map, and much more
  • How to work smarter with your site content using CC Libraries
  • Add a form for collecting basic user information
  • Incorporate social content like a twitter follow and more
  • Best methods for Search Engine Optimization (SEO)
  • The different methods for sharing a trial site, and publishing your project for the world to see.

This course is for you if you need a deep dive into Adobe® Muse CC version 18.0.