Join Dani Beaumont for an in-depth discussion in this video Responsive Composition widget, part of Muse CC New Features.
- [Instructor] When Adobe Muse released support for responsive design in February of 2016, it included the pinning and fluid resizing of text and images, along with the ability to define multiple break points. But the update did not go as far as delivering fully responsive complex native widgets like composition, slideshow, and contact form. I'm happy to say these features are finally in place. Let's take a closer look at these features in action. I'm here in a web browser, and I have two tabs open.
One is an old version of the Matcha Goodness homepage, and the second tab is a new version of that homepage using the responsive composition widget. In the original design that I did, I have this nice background video that's playing and a simple call to action, basically to click on the buyer's guide. The downside of a design like this is if I have viewers of the website coming back on a regular basis, I have no way to alert them to things like a newsletter I might want them to sign up for, or a workshop that's happening in the Matcha Goodness Cafe, or just a promotion that I might be doing from a pricing standpoint.
If I switch to the second tab, here's a new version of that landing page, and it has what's known in the web business as an ad rotator, so it's rotating through advertisements. I can set the speed with which it rotates through them. This is built using a composition widget. The viewer can always click on an individual tab to jump to one of those pages, in essence. There's then, inside of that composition target area, things like scalable vector graphics.
I've got text up at the top. I've got a call to action with a rollover state to sign up for the newsletter. When I click on Starters, notice that the text is in an entirely different area. This allows me to draw the attention of the viewer to the content inside the container. Workshops, the text is in a totally different location with a different call to action. And the best part, of course, is that it's optimized for devices. So here I am on a desktop design. I can press and drag down to more of a tablet device where I have a breakpoint defined and the content optimized for that tablet.
Press and drag one more time. And here I have more of a smartphone class of devices. Smartphones tend to be much smaller in size, so often when you're designing for that, you'll want to make the text larger, the images larger to make it more readable on that smaller device. Let's take a look at how I went about building this responsive composition widget back in Adobe Muse. Here I am on the homepage of the Matcha Goodness website, and I wanted to replace this landing video with my composition ad rotator.
I do want to point out, though, if you have old Muse content with old contact forms, slideshows, or composition widgets, you don't have to throw your old design away. You can open up those older files and just apply the same responsive features that I'm going to show you in this video. Now, for the sake of time, this is just a what's new video. I'm not going to break down how I'm going to build out the composition widget. You can leverage in the library the Essentials Training to learn a little bit more about that.
So bear with me for a moment while I build out the widget, and then I'll talk to you about the responsive feature set. I'll come on in and delete the old video. And I'll build out a new composition widget. Well, now that we have all of the content for our composition widget in place, we can start to actually focus on the responsive feature set. If you've worked with responsive Muse in the past, you'll see that the same controls that we've used before now work within these complex widgets.
The design that I have here has a master page with navigation that's been optimized for desktop at 1,400, tablet at 1,250, and smartphone at 900, and the actual homepage has those same breakpoints. So the work that I'm doing here I'm going to need to apply to each of the breakpoints as I go along. What you'll want to do is make sure that in your own work, in the tool panel, if you want to have different text attributes on each of your breakpoints, that you've toggled the ability to format text on each individual breakpoint there in the toolbar.
So here on that 1,400 pixel width breakpoint, I'm going to click on the composition widget once, click a second time to select the composition target, and start to look at the attributes here. I've got responsive pinning. You'll notice that it's disabled for that target area. In the resize dropdown, it's set by default to Responsive Width. That is how composition widgets have worked in the past, and that's just fine. I'm now going to click on each element, my text element, for example.
So, in general, I want the text to resize within the container or be fluid. So when I click on it, notice that it's pinned to the left by default and set to not resize. When I come in and select Responsive Width, Muse is disabling the ability to pin that object. That's because it kind of knows what to do in the browser that would be appropriate. It's going to use percentage-based pinning within the container to make sure that it stays positioned where it needs to be. The next element is button here, and I hate when buttons resize.
I think they should always remain the same height and width. So although it's pinned to the left here, I'm going to go ahead and leave that alone for now and set it to be None for resize so that it stays its same size. The SVG element that I've placed, I do want it to scale. So with it selected, I'm going to come to that resize dropdown and select Responsive Width and Height so that it scales. Now, Muse on the design canvas has a breakpoint scrubber here, and this allows me to see how the attributes that I've defined will actually play out within the breakpoint.
So I'm going to come to that breakpoint bar and just press and drag and check out my elements. Looks like everything's scaling pretty appropriately, so I'll jump back to the largest part of that breakpoint and go to my next tab. The Starter tab just has text that's centered. So with that selected, I'm going to go ahead and set the resize to be Responsive Width, and we'll leave that alone. I could grow the container a little bit, make sure it stays centered, but I'm pretty happy with that by default. I can grab my breakpoint bar and scrub to see how that will work.
Looking pretty good. I'll jump back out to the largest part of that breakpoint, and we'll jump to the Workshop tab. In the Workshop tab, I'm going to do some of the same settings. For the text, I'll set it to be fluid width, or Responsive Width. And the Register Now button, I do want it to be set to None. And, again, we'll go ahead and leave it pinned there to the left. As I press and drag, notice how it's not a good idea to keep that Register Now button pinned to the left.
Let me explain that for a moment. When you pin an object, it's as though you're putting a crowbar between the object that you're pinning and the container that it's within. It's defining a fixed distance that no matter how large that container is, it will not be reduced. So that's not a good implementation for this button that's all the way here on the right. What I'll do is go ahead and select it again. And I'm going to unpin it so that it uses percentage-based placement, similar to what the text object will be above it.
As I press and drag now, I'm getting a really nice behavior. The button will move down as the text above it flows. Now, what I need to do is go ahead and copy some of these attributes that I've defined, so I'll jump out to the largest instance of this breakpoint. I'll come on in and select the composition widget. And I'm going to right-click and select Copy Size and Position to the next smaller breakpoint or all of the breakpoints, depending on where I'm at. That'll allow me to leverage some of the decisions I've made on this breakpoint to the other smaller breakpoints in the design.
I've just been able to touch on the responsive feature set and some of the elements with this composition widget, but we have to move on to all of the other new amazing Muse features in this update. So I'm going to encourage you to experiment a little bit more using some of the same techniques that I've shown you in this first breakpoint.
Skill Level Intermediate
Q: This course was updated on 08/22/2017. What changed?
A: New videos were added that cover August 2017 updates in Adobe Muse, including anchor tags within Accordions, productivity enhancements, and code improvements.