Smart phones and mobile devices recently passed desktop computers in worldwide usage. That means you must develop a mobile version of your website or risk missing out on new users. This Muse essential training video will show you how to create a mobile version of your site, and rapidly deploy layouts for a wide variety of mobile devices. Learn how to build collapsible navigation menus that allow users to move around your mobile site quickly.
Once we've got our tablet layout all created, it's time now to start thinking about adding a mobile version of our site. And that means for mobile phones. And that's what I'm going to show you how to do in this movie. So, first thing we're going to do is we are going to go right here and click on Add Phone. And, when I do that, it's going to say Add Phone Layout. And it's going to say, okay, what do you want to copy this time? This time I want to copy the tablet. And I'll copy the site plan and page attributes and hit OK. Now this is just going to create a standard phone version of the site. Doesn't let you pick what size the phone is.
But don't worry. It's going to serve up the right one, just depending on what type of mobile site you create. Now, I'm not going to bore you with the reconfiguring of the content and all that kind of stuff like we had before. But what I am going to show you how to do, is I am going to show you how to do what I call a mobile navigation bar in here. And so, this is going to be something that is a little tricky, at first. But, once you get the hang of it, it's actually pretty easy to do. So, here's what we're going to do. I'm going to go to the master page. And on the master page, what we want to do is we want to get that same background that we had at the top.
Then we're going to add something to it. So here's what I'm going to do. I'm going to go to the Add Mobile site plan and then we're going to go back to the tablet versions. And I'm just going to go into the master page for that. And I'm going to steal this top thing right here. I'm going to steal that by copying it. Go back into the phone layout from the master and paste. And then we're going to take this up to the top and just put it something kind of like that. And make sure it is 100% width, you can just hit the 100% width button. If you want to.
There we go. And so the tricky part of course is we want to add a menu to this, but since the screen real estate is so limited here I don't want to have a big widget that takes up like 90% of my screen. That would kind of be a pain. So, how then do I create a mobile navigation that just sort of opens when I press something and then closes when I press something. Well we have to kind of do a trick, and that's what we're going to do. So I'm going to go to the Window menu here. And I'm going to bring up my Widgets Library. And I'm going to open up the panels.
And so in the panels, what I want is an accordion. And so we're going to drag out the accordion. Something kind of like this. And then I'm just going to select the bottom part of the accordion and delete it. Select this next one, and delete it. And I'm only going to leave this first top part of the accordion, just like this. And so what I'm going to do now is I'm going to come in here and we can actually delete the interior part of this as well. So let's delete that. And then what I'm going to do, is I'm going to bring out a menu, a vertical menu.
And when I bring out that menu, it's going to look something like that. And you can position this however you want. In this case, I'll just stretch it to fit, in here and you kind of get the idea of where this is going, right? And what we're going to do is, we're going to come over here and I'm just going to type out something like menu, just like that and then it's a matter of changing the states. Now, so, I'm going to come up here and grab the States panel. The normal state, just like this. I'm going to give it, No Fill, and, No Stroke, Rollover.
Same thing, No Fill, and, No Stroke. Mouse down, same deal. Active, same deal, No Fill, and, No Stroke. There we go. And so now let's move this up. And you can kind of see what I'm doing here. So I'm just moving this around. If you need to reconfigure this top part, just reconfigure it however you need to. There we go. Now I don't even need this Menu text, necessarily.
Watch what I can do here. Let's just delete this. And then what I'm going to do, is just have this selected. Go back over to this, let's go back into the master page for that and copy this. And let's go back over here, paste that in, let me make sure I'm inside of that. Let's double click to get inside and paste it. There you go. I'm just going to drag that up into there and we can just put that right there if we want to. There we go. So that's in there now.
And you know how to change menus and all that good stuff. Let's do this right here, let's put, Can Close All, on top of this and then let's collapse this up. Let's take a look at what this looks like now. Let me expand this a little bit. So that matches the edges. Draw that up, there we go. Okay, so now once we have all this configured, let's go to preview. And let's just check this out, watch this right here. You can collapse it up and expand it down just like a mobile navigation menu, which is really, really awesome. And so that's just a little trick to help you optimize your mobile websites.
You can play around with this and make it your own. I just wanted to give you an idea of how you can start to optimize this site for a mobile device. You've seen this probably when you're navigating any site on your mobile phone, they have that sort of expandable menu and unfortunately there's no widget for that in Muse but you can indeed create your own very, very easily just by sort of tricking Muse into thinking that it's using something else when in fact all you're doing is creating a mobile navigation. So there you go. How to get started creating a mobile phone layout for your existing website in Muse?
- Becoming familiar with the Muse interface
- Creating a sitemap
- Setting up master pages
- Working with headers and footers
- Importing and embedding graphics
- Scaling, rotating, and aligning page objects
- Wrapping text around images
- Working with web-safe and Typekit fonts
- Creating links
- Adding menus for navigation
- Inserting an interactive map
- Adding a Facebook Like button
- Building a Business Catalyst form
- Exporting the site to HTML