Join Paul Trani for an in-depth discussion in this video Introduction to working in Muse, part of Designing a Responsive Mobile Website with Muse.
- View Offline
- Now I'd like to start out with giving you an overview of Muse and an introduction to creating a new website. So, when you launch Muse, you're going to be greeted with this welcome screen. Just close that. That has plenty of helpful tutorials, by the way. But we want to create a new site from scratch. So go to File, New Site. Just like that. And this is great, because, it actually defaults to a fluid width site set to a certain size. This is great, because previous versions, they were all fixed width. But we want this to be a fluid width site.
Just leave the defaults. Click OK, and we'll dive right in. Now if you already have a Muse site, you can always change it to fluid width by going to File, down to Site Properties, opening that up. You can see there it is: Fluid Width. All right. And again, with that done, this is my website. I'm in the Plan View. I have a home page, a master page. I'm going to double click on this home page. Notice how it changes to Design view. Okay, so we can start designing. Now I'm not sure how you have Muse set up, so I just encourage you to go to Window, and select Reset Panels.
That will reset them so they all look the same. Yours is the same as mine. And then if you roll over there, since we need all the screen real estate we can get for responsive design, as you get those horizontal arrows, you can just kind of move that over so you just have this icon view of each. Now, since I'm on the home page, I first want to just add some text. So I'm going to use the text tool, selecting that, dragging out a text box, typing in some words, "Graphic Design." Just need an opening statement for my site. "Branding" and then "Web Design." Could be anything, just your opening statement for your site.
Okay, now, with that selected, notice my options bar. This will actually change based on what you have selected. So right up here, I can change the font size. I want to change to about 30 point, just like that, changing it appropriately. I need to resize it. I can use the selection tool and just resize it, something like that, and just kind of change this box. But I'm noticing the text actually does not fit inside this box well. It's actually not centered. So you need to actually sometimes go beyond the options bar, and if you open up your panels on the side, and locate your text panel right in here, here's where we have more options.
We can center that text, just like that. Now, the question is, how can we center this text within the page itself? Well, in order to do that, the easiest way is if you go to View and the turn on Smart Guides. Smart Guides will give you these various little lines as you start to move this item around. Okay, there we go. Center horizontally, center vertically, you get the idea just like that. It's perfectly centered and that's what I like. All right, there's my home page. That looks good. I'm going to click back on Website 1 back in my Plan View.
Now, I want to add additional pages. So check this out. Like right over here, I get this plus button. So I can click that plus button. It'll create a new blank page. I can always remove that page just by deleting it just like that. And here's a cool Power Tip: if you hold down the Option key, I encourage you to do this, Option Key or Alt key on PC, click and it will duplicate it. So now I can make my Portfolio page. I'm going to hold down the Option key again or Alt key, click again. We want this to be our Experience page. Just like that. Option key again, click.
And this is our Contact page. Just like that. Now I can dive in and start customizing each one of them. So Portfolio, obviously is going to say Portfolio. Just like that. Going back to our plan view. You get the idea. Experience and then lastly our Contact page. And what I'm doing here is just basically changing all the pages like an element on them so we know when we're on a different page. Just for now. Okay, but now I want to dive into the master page. Okay, so whatever I put in here will be on every single page.
So check this out. Double-clicking on the A-Master and introducing you to this next tool, the rectangle tool, selecting it. You guessed it. It draws out rectangles. So that's what I can do, I can start to drag it over . Watch what happens as I drag it over to here. It says Width 100%. So this is your introduction to responsive design and fluid layouts, because it says width 100%. It's always going to be 100%. Releasing there, my options bar up at the top is going to allow me to pick a different color, like black. And check this out, this is what it means as I drag to simulate the browser width, you can see that it always changes to 100%, okay.
Of whatever the width is. Really doesn't matter to me, I just know it's 100%. So you can drag it down and then if you click back on 960, it'll change it as well, okay. So that's how it's done. I can use my selection tool. I can select it and right up here, in case you didn't get that selecting, say 100%, you want Responsive Width usually for your graphics, just like that. Okay? And you can always double check items by going into your Transform panel, we can see the width says 960 pixels, and it's responsive width.
Since it's the size of 960, it basically means it's going to be 100%. And even going beyond that, for this graphic I'm going to change this to Stretch to Browser Width, okay? So even outside of that 960, it's actually going to stretch that much farther, okay? So if it was not set to that, just to responsive width, see how it doesn't extend out? And in this case, I do want it to be stretched to browser width. All right, so all I've done is put a graphic in there and we should see that across all the pages as I go to Website 1, we can see that bar.
Now, the last thing we're going to do in this Master Page, we want to link up all of those pages. And you don't have to worry about, you know, wiring up anything. You're not going to see any code. I don't even have to hardly point to any pages because all I need is a menu. In fact, a horizontal menu. As I drag it out, dropping it up here, you can see it knows those pages. It wires them up. I don't even need to worry about these options or anything, because that is done. Going back to Website 1, everything looks good.
In fact, I can click Preview. I don't have a page selected yet, by the way, but if I click Home page, there it is. Portfolio page. I didn't have to write any code. Everything just works as expected and you can see the power of Adobe Muse. So from there, I just encourage you to save your site. Just save it to your desktop as Website. If you have access to the exercise files, this is your 01 Final File as well. But just save this page or this entire site, actually to your desktop and we'll continue to work on it further.
These tutorials teach the basics of designing a responsive website in Muse CC 2015. The site you complete in this course will "respond" and look great across desktop, tablet, and mobile. You'll never have to create separate versions of your sites again! And the site is not just responsive. Author Paul Trani also shows how to make it modern and fully functional, complete with Typekit fonts, flexible imagery, a portfolio, social media integration, and even a contact form. All without writing any code.
Unlike creating and maintaining different sites for mobile, tablets, and desktops, with a responsive design you'll only have to update one site. That content changes and adjusts based on the screen it's on—whether it's on a laptop, tablet, or mobile phone. Follow along to learn how images, text, and other content can be made to respond based on the screen size, orientation, and other options. The end result is a gorgeous site that looks great regardless of where it's being viewed.
- Understanding responsive design
- Using images and text in Muse
- Creating flexible ("fluid") and fixed content and layouts
- Adding a portfolio, contact forms, and social media buttons
- Creating tablet and mobile layouts
- Using resolution-independent SVG images
- Uploading and testing the website