Join Paul Trani for an in-depth discussion in this video Creating a desktop layout, part of Designing a Responsive Mobile Website with Muse.
- Now, when it comes to creating a layout for the desktop, we need to keep two things in mind. One is the average size of a desktop and the second thing is just our content size. In fact, what I want to do is I actually want to change the size of my Master, my A-Master page right in here to the size of a common desktop. So right here it's set to 960 right now, so I'll just double-click on that little square and that's going to bring me into my Breakpoint Properties, change 960 to 1280.
As I talked about earlier, this is one of the smaller sort of resolutions for a desktop, so I know it's going to fit across multiple desktops. Select OK. You could see how it expands out. Kind of hard to see, so if you just change your zoom level down to 75%, you can see your content just like that. Since I've changed it on the Master page, if I go to Website, dive into the Home page, you can see that says 1280 there, so on and so forth as I dive into the Portfolio page and then even the Experience page.
So it changes across the board. Now, just so you know, I can actually have different media queries per each individual page if I wanted to change it. So I can change this to something else if I wanted to and make it different per page, but I don't need to so all I'm going to do is just start adding some content because look how things have changed. If I go into the Home page, this is the new size. I actually have a room for some more content. Now, rather than having you type up a bunch of content, I actually have some for you.
If you have access to the Exercise Files, go to File, Open Site. In your Assets folder, you'll find this Content.muse file, so just open that up. In here you'll have a Home page. You just select this text, copy it, go to your Home page of your current site and then Paste in Place just like that, and you might need to reposition it accordingly, but just drop in some text there, just some text that we don't have to type. Obviously you're going to replace this with your own information. I'll go back into that Content.muse site, the Experience Page has more content, so if I select all of this, copy it, going into my current Experience page, Edit, Paste in Place, there's all of that content.
So it fits pretty well. In fact, I'm going to change this down to 75% and we can see how that content starts to fit in here and I want to make sure the size fits appropriately. So for each element, I'm going to start positioning things a little bit better for the desktop. So, for this box back here, if I select it, and if I go up here next to Resize, it's going to be set to Responsive Width and that's what most items default to, okay? So, even all of these graphics as I Shift select them, I might need to scoot them over, but they're set to a Responsive Width and Height.
This text, I just center that. We'll just kind of get some of this squared away like that. And that looks pretty good so far for the Experience page. In fact, I'm going to close this Content.muse site and I'm just going to check out to the other pages. Portfolio, since I've resized it, I might need to scoot this over just like that so it is centered. The Home page, same thing for this content. Now that we have that new size, we just need to start adjusting content accordingly. And Contact as well, just like that.
All right. So now we can check this out and I do want to point out one last thing really fast. As I scroll over, it says 1280 right here, and this arrow pointing this direction, pointing to the left, says, "Hey, you know what? "It's going to be constrained to this size "even if you expand out further," okay? And that's what I typically want, okay? If I click that arrow to expand, that content is going to stretch out even further, okay? Which I'm personally not a fan of because it's not a good practice to read lines that are this long.
In fact, they shouldn't be longer than, say about five inches roughly or about the width of a US dollar bill. So in general, I'm just going to click right there and make sure that is forced inward just like that and that looks pretty good and I can save this site and just preview in a browser really fast, Preview Site in Browser just so we can expand it and contract it. Here it is. Again, we'll go wider and you can see how it stops at that point. I can go into Portfolio section, Experience section with all of this content and I can see that content scale down.
Next thing I need to do actually is it looks like there's something happening right here to where one of the boxes actually of the text is not scaling down appropriately. So I'll have to fix that. And then the Contact page doesn't have much content. So I'll just fix this Experience page really fast and then we'll also talk about diving into more specific content and I could have easily just check that out if I would have scaled it down like this. We can see right here, this is where it started to break, if you will, so it's this box.
If I select it, this box, it's actually a text box that's filled with white and that's what's happening. So in this case, I probably just need to make this box smaller and double check the responsive width because it's always going to be roughly about 85% the width of the browser, okay? But 85% becomes smaller and smaller. That's why I had to make it a little smaller than where it currently is. But now I have this site set up for desktop. The media query or breakpoint is set appropriately.
The content looks pretty good even as we start to scale it down. There are some other things I want to do and really, my next step is really to start control these individual elements on this page, including like a header and footer.
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