Join Paul Trani for an in-depth discussion in this video Creating a tablet layout, part of Designing a Responsive Mobile Website with Muse.
- Currently, we have this site created, and it looks great. If we preview the site in a browser, it's going to look pretty good for desktop. Because that's what we have created so far. As we start to scale this down, we can see this content. Actually, it's pretty good as we go larger. Even as we go smaller it actually looks pretty good. But honestly, we really need to be actually even more concerned about mobile and tablet devices. Because more people are viewing content on mobile and tablet than even on your desktop. So let's just see where this design breaks. We're going to let the content determine where we want to add another breakpoint for tablet devices.
As I scale it down, a couple things are happening here. This is way too tight, okay. Scale it down some more. Okay, this gets cut off. This gets way too tight. This isn't looking very good. And let's just check some of the other pages. That page is fine. Experience page, that's just a lot of content as we dive into tablet devices. Not very good. So lots of formatting that needs to happen there. Even this content gets a little small. So those are the pages we need to worry about.
Mainly Experience, Home. Contact page looks fine, but lets dive on into it. Now, biggest issue is with the navigation. So let's go into the Master page. As we take a look, as I scale this content down, you can see how it starts to scrunch up. Well, that's not going to work for us. If I select it, you can see right up here that the width is set to Responsive Width. That is what's making it scale, because it's saying here, I'm only going to be 50%, regardless of the width of the browser. And I'm going to change that to None, okay.
So I'm going to change that to None. And then as I scale it down, you can see it actually looks good until it hits right about there, okay. So at that point, well, maybe that's when I need to add another media query. So let's come up here, adding a breakpoint. Technically, it's a media query that gets created in the back end. Creates it right here, this blue bar. I can double-click on that little square. And I can change this. Instead of it being 759, I can make it, you know, 760, something like that. Clicking OK. Perfect.
So it's going to look great. It's changing, changing, changing, and then right here, boom, that's when I want to change this element. Change it from this Fixed Size to the Responsive Width that we know and love. And we can start to see that content scale down. And we can always adjust it a little more. I'm going to shrink this up a little bit, say right about there. And we can see how far this will carry us in. Looks really good to right about there. And then I'll make further decisions at that point. But let's also take a look right down here. Because, honestly, I'm not a fan of how this looks.
Even across the board. I think it should be gray, and we need to make it smaller. So I'm making a couple changes, changing it to 10 point, gray. And what I just did is I've changed it for this media query. And then it's white for this media query. And the reason that is happening is because right over here, this is selected. Format Text on Current Breakpoint. When actually, what I need to do, is I need to format this text across all breakpoints.
So if I change this, say, let's make it nine point. You know, let's just make sure that's gray. And now I can change that, and you can see it's actually changed across all of those breakpoints, okay. So that's how you want to deal with that text. Even this element, by the way, I'm just going to scoot this over. It's a matter of just making sure content looks good at these different sizes. So that looks good, until we hit that point, and we can change it. Let's take a look at our Home page, because that was the other issue. As we scale it down, this was the issue where we have this line right here.
That actually, you know what? It needs to change as we scale it in. Even before that. In fact, I'm just going to make it 760, just like the last one, okay. Adding a breakpoint. Double-clicking on that box. 760, that's pretty good. At that point, what I want I want to do is rather than it set to None, a Fixed Size, let's Stretch it to the Browser Width. And, honestly, let's change this. We need to make sure this is changed, okay. Any time we format the text, I want to make sure it just changes it for this current media query.
So at this point, let's change it down to about 24 point. And now that looks good, and it'll even start wrapping. That's what I want, and everything's looking good until we hit almost our mobile size. Okay, so far so good. Last page, the Experience page. As I scale this content down, to be honest with you, it's kind of just a mess. There's too much text going on here. And let's just take a look at what's going on. If I select this box, actually, look at what happens. There's more space on this left side, than there is on this side.
So this is a fixed width. So we know fixed widths. Because if I select a box, right up here, it's pinned to the side. And there's a little bar over there. If I increase the size to about 100, you can see there's this little bar, saying hey, I'm a fixed rod that's always going to be that type of space. I'm going to turn that off. And make sure those are turned off for these different elements just like that. All right, so that's what I want. Take this down to 50%. Scale it down.
And for mobile, we can start to see, as this now starts to hit that dot. I'm not a fan of that. Now, I can start to adjust it in here all I want, like scooting this over. But really, since we get smaller, I actually just want to eliminate that entirely. So I'm going to create a new breakpoint, based on the content. We'll make it 1088, sure, that's fine. And for this element, as I select it, this is great. Because you know what I'm saying, Hey you know what? I want to hide this completely. So I can Right-click. And right over here, let's hide this element in this breakpoint.
And now it's disappeared. Because for this tablet, it's much better, just easier to see. I'll adjust that content, and you can see it's still there. But when we scale it down, now it goes away and it makes that page just much more clean. And everything looks great as we, you know, scale it down further. Last thing I might do, actually, for this area is just select these three. And if I group them, I can kind of scale them all up at once, just by holding down the Alt key.
Just making them a little larger as well. And then let's ungroup them. But just a couple changes to this page so it looks good as we start to scale that content down. I can see it looks great across those media queries. For breakpoints, we'll preview the site in a browser. And, really, I didn't have to recreate any of this content. It's just a matter of adding a breakpoint, and then adjusting either the size or spacing or whatever, of this content to make sure it looks good as we get into the smaller size, okay. We didn't have to make a whole new site like you'd have to do in the past, to be honest with you.
It looks good, even as we go from this size this size. It looks good. And everything is nice and clean, okay. So the power of breakpoints and media queries in Muse is really powerful when you're creating for tablet and mobile devices.
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