Join Justin Seeley for an in-depth discussion in this video Creating a new fluid-width website, part of Muse: 2015 Creative Cloud Updates.
- View Offline
- If you're an Adobe Muse user, this is a day you've been waiting for (laughs) ever since the product was developed. That's right, responsive design is finally a part of Adobe Muse CC, and in this movie I'm going to walk you through creating a brand-new fluid width website. So, let's go to this little start-up screen here and just create a new site. And inside of this new site dialogue box we have a couple of options that we've never had before. For instance, we have this little drop down, which enable us to choose between fluid width and fixed width.
Now it will tell you here when you hover over this that when you choose a fixed width, you're creating static layouts that will not resize. When you're creating a fluid width, you're creating a layout that resizes with the browser window. This choice will affect initial pages and it's the default for all new pages that are being created. This is, of course, editable after the fact inside of the site options, but it's my recommendation that you choose the one that you think you're going to need for the entire website. You don't need to be changing this down the road, because you either start with responsive or you start with static.
And, for the most part, I don't know why you would start with a static website nowadays, because fluid width, responsive web design is all the rage and it just makes for a better experience for you and your users. So, we'll choose fluid width from this. You can also choose the maximum page width. Basically, what this refers to is how far out your last breakpoint is going to be for responsive design. Now, we'll talk about breakpoints in another movie, but for now, let's just increase this a little bit to something like, 1,280 pixels.
Then, we'll also be able to add columns in here if you want. So if you're working on a grid system, for instance, you could create as many columns as you like. For instance, a very common form of columns is eight columns and you can also give them a gutter of something like 25 pixels, again, totally up to you. In the Advanced Settings dialogue box, you can drop this down and check out the minimum width, minimum height, you can also add margins and padding, and of course, this is also where you change the resolution from standard to high DPI. This is all been around for awhile now, so if you're a Muse user, you're probably used to all of this.
We'll just go ahead and hit "okay". Once that is done, I have now created my fluid width website. And, as you can see, when I double-click on the master page, it takes me into this new-looking environment. It's still the same design view that we had before, but there's a notable difference: this big bar that goes across the top of the screen. This is your responsive ruler. So as you are creating content inside of Muse, you will need to keep an eye on this, because as you start to move in, the design should automatically change with it.
And you can see here that my columns just shrink up as they keep going. They're all fluid width, nothing is static. And you'll notice up here that we have 1280. Well, that's as far out as it's going to go because that's what I set my maximum width to inside of my Site Properties dialogue box. Now, can I change this? Absolutely I can. I can click right here when I get the double arrow and I can drag this in. So let's say that I only wanted this to be at 1000 pixels. Well, I can just drag that all the way down until I get to 1000 pixels, and once I do, just let go of my mouse.
That way I've got it right there, and now I've got 1000 pixels wide right there on my home page. You can make as many changes to this as you want, but for the most part, I just wanted to show you how you create this brand-new document and give you some insight as to what this thing is. So this is, of course, like I said, the responsive ruler. You will see different colors and different areas up here based on how many breakpoints you actually have in the design. By default you have two breakpoints: the maximum, and then the minimum. Awhile ago we looked at the minimum size inside of that dialogue box and it was 320.
320's the basic minimum size for most mobile devices, so that's why they set it there. This one was initially set to 960 inside of that dialogue box, because most people design around a grid system similar to the 960 grid system. Now I would argue that that has progressed a little bit over the last couple of years, and that you're probably better suited to do something like 1280, 1360, you know, something like that. Something that caters to some of these bigger screens, because not only do we have to think about mobile screens now, but we also have to think about the super-big high DPI screens as well, and creating an experience that looks good on each of them.
And now that Muse has responsive design, we're well on our way to achieving that.
For more complete information on Muse, see our full selection of Muse training.