Join Dani Beaumont for an in-depth discussion in this video Pinned and fluid breakpoints, part 1, part of Muse Essential Training.
- In the first half of this course, we built out a complete 1440 pixel width desktop design. In these next lessons, we're going to start to build out the responsive instance for everything from desktop to smartphone. Part of the interesting skills with responsive design in Adobe Muse really has to do with understanding how the browser is going to behave and how you control certain behaviors in Adobe Muse. The file we're looking at could use some optimization, let's say, before we convert it to responsive.
Rather than, me, updating that separately, I've saved the work to do together with you because I think it's important for you to understand how I go about that troubleshooting process. As usual, before we get started, let's go to the finished site and talk about some of the goals, some of the features, we're going to implement in these next lessons. I'll switch over to the web browser, and here we have the finished Matcha Goodness site. Now, I use a number of different free Chrome extensions to help me with responsive design, and I'll show you some of those a bit here.
One of them is something called Breakpoint. It's a free extension. It's a little difficult to see, actually, when it becomes larger than 1000, but it does show you the value, the width of the browser as you're working. So, if I press and drag this browser here down to about 880, I can see the exact readout, the exact width of the browser. That allows me to test where my breakpoints are hitting. I can even use the arrow keys to crawl a little bit here. So hitting option and the left or right keyboard commands allows me to get right on the browser and see when a breakpoint is being applied in the design.
So it's a nice tool that we'll work with that I'll refer to as we go along. There's another tool I tend to like to use. This is called the Responsive Web Design Tester. And it allows you to come in and configure attributes for your favorite devices and get a quick preview of that height, width, and resolution of a particular device right here in the Chrome browser. So it's just a simulator of that device, but it can be handy. There's a few other tools we'll get into as we start proofing the work that we're doing, but I thought I'd mention those few.
So, here I am in the browser with the largest breakpoint. And you'll notice I start with some white borders at about 1400 pixels. And there's no real easy way for me to show this to you, but if I were to drag this browser window to something larger than 1400 pixels, the content to the left and right stays fixed. So it only grows to a certain amount. I'm going to simulate that for a moment. If I come under View here and I Zoom Out. It's as though my browser resolution, my screen, just got larger.
So everything is about 90% of actual size. And notice how, for example, the Matcha Goodness logo, although it's aligned and pinned to the left side of the site, it does not extend any further than that 1400 point. Preorder is going to stay here on the right hand side, and this white space is going to continue to grow but the page will not. I believe that supporting large monitors is a good idea, but to a certain extent, if you loaded this website on a 54 inch display, it's not going to load well at all.
You'll have very, very long bars of things that are set to full browser width without any meaningful content. You'll notice here I can refine my design a little bit. I have my container growing to a certain width and my image is not going that far, so this allows me to troubleshoot my design a bit. Let's go back to the normal view on that browser, so I'm going to come back to Actual Size. So this is the true 100% browser size at 1400 pixels.
And as I scroll down, I'm going to show you the behavior of individual elements. So I've got Sit, Drink, and Chill. And in the largest breakpoint, it's not set to be fluid width. When it comes to text, you don't scale text using Adobe Muse. You can scale the width of the container and reflow the text within that container, but the Muse application does not allow you to actually set the type to scale. So what I've done in this breakpoint is really just centered it at a certain size until I hit a breakpoint.
So you saw that when I just resized here a little bit. I'm going to jump down to my first breakpoint, and you can see very quickly two things happened in this header area. Sit, Drink, and Chill has been made smaller in this smaller breakpoint, and the background image is no longer a video, it's a static image. Let me show you that again. I'm going to jump to the other side of that breakpoint. My navigation is full here. If I come into that first breakpoint, it jumps up a bit, so I've got to scroll to get there, but I'm now in the tablet breakpoint where I have smaller text and a static image.
The reason why that background video is not on a tablet is tablet devices, iOS devices, do not support background video in the browser right now. So, I disable it and put a static image. As we continue to roll down here, let's look at the next section of content. I'll bring it up to 1400 pixels. You can see that the edges stop. And I've got a three column structure. As I press and drag down to a smaller breakpoint, in this breakpoint, each of the containers you see here, each of these columns, is fixed in height and width, and it is positioned on the page so that it's moving closer together, but the containers are not actually getting smaller or flowing.
If I keep going a bit longer. Notice as I do that a second time these containers, once again, are still fixed in height and width. The text is not flowing. Until I get pretty close to running out of room. And as I jump in this example, notice the difference in the text. The text is now not scaling, but the container is reducing its width, and the text is flowing down in that container. So pretty subtle difference, but it's important to, in your own mind, differentiate here.
So this text is flowing in a container, and that container is becoming smaller so that the text is flowing into a smaller container. And that's the behavior that we have for our smallest breakpoint on this page. Another thing you'll notice is on the smartphone layout, our navigation changed. So let's go back up to the tablet so we can keep an eye on that. So you'll notice up here I've got tablet navigation. These are nice large buttons. With my finger, I can press the Buyer's Guide if I need to, but as I get to that last breakpoint, I jump to a different form of navigation.
And this is known as a hamburger menu or a mobile menu. When I click there, with my finger in this case, I can come to what's known as a lightbox. This lightbox is going to remain centered both horizontally and vertically. So if I move this up to more of what would a mobile device, I can tell that my navigation's going to be present and visible. I'll bring that back down again. And if I change the width, that navigation remains centered. The viewer of the website on a mobile device can now click any of these navigation items or just click off to go back to the page that they're currently on.
We've already talked about the fact that this text now is flowing within the container. And if we scroll all the way down to the bottom, our footer is centered there on the smartphone. If I jump out to tablet, you'll notice it's left a line, that footer content, along with the desktop design, if I come on down, I see that it's centered again. So, showing off different ways of aligning that footer content.
- Creating a site plan
- Working with master pages
- Adding elements from CC Libraries to master pages
- Adding web fonts
- Creating and overriding text styles
- Placing images
- Working with image blocks and hyperlinks
- Configuring slideshows
- Adding new sections
- Creating a contact form
- Adding breakpoints
- Creating a responsive master page
- Publishing and exporting your Muse site