FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Ensure Content Is Collapse Friendly

When you design some content to work at the site’s full width, you also need to think about how that same content should look at a narrow width. Can it be collapsed down, or does it rely on having space that won’t always be available?

In this lesson, we’ll cover some “gotchas” that can make your designs incompatible with responsive functionality, and we’ll look at how you can solve these issues.

Related Links

3.5 Ensure Content Is Collapse Friendly

Hey, welcome back to card friendly design with Adobe XD. In this lesson, we are gonna look at a couple of things that you need to be careful of when you're creating designs to make sure that they are gonna be able to collapse down to smaller widths. As I mentioned in the last lesson a coder can take care of most things. They can adapt most things in a site so they can collapse down pretty easily but there are some things that can't really be worked around after the fact. So we're gonna go through a couple of those things now and show you the kind of approaches you should be using to make sure that your designs can be adaptable. As I show you these stuff, I'm gonna be using a couple of mark up images. I'm gonna be using this tablet here and this laptop here form this responsive device mark up from Envato Elements. There will be link to this mark up in the notes below video. So if you're a member of elements, you can go ahead and download that file and use it as a part of this lesson. Otherwise, there's some pretty great mocks-up available at GraphicBurger, just to the Mock-ups category. So we've got things like this phone here and what have you, that you can use instead of the responsive device mock-up. Okay now let's look at an example of what not to do. I wanna set up a panel here that's going to have a tablet on the left side, some heading text and button on the right side. And then I want us to have a nice radial gradient behind both the tablet mark up and the text content. The way I should not achieve this is by using a raster based image that I've created in another application. For example, like this, so here we've got just one image, The gradient is built in and the tablet has its position set on the left hand side here. Now I already created, Heading text and button earlier. So if I had this position say about here, and these are just copied and pasted from the topography sections that we did earlier. Now this all looks very nice in the design, it'll look nice on a preview, but it's not gonna be possible to properly collapse this down. So as we get down to a size that's, say, about this wide, with our view port. You're gonna be able to take this text and squish it down so it fits inside this amount of space. That's no worries, but you're not gonna be able to take this background image and do anything with it. Because if you try to shrink this background image down, now you've got this weird thing where you've got this teeny tiny little image over on the left hand side with a big space on the right-hand side. The text and the button that we have over here, they can't sit over the top of this anymore because they won't be visible with this little tablet behind. And even if you could set the text over here, it would look really weird that the gradient in the background here just cuts off. So this background approach is not going to work, it's not gonna be possible to collapse this down into a single column so that it can function properly in a responsive way. Not only does this is not work, it's also completely unnecessary to use a raster-based image like this as a background. All we had here is an image, in the left of the tablet and we have radial gradient in the background. We can achieve the radiant gradient with CSS and this tablet image can just be free floating. So that when the design is collapsed down to a smaller width the tablet can be shrunk down and sit at the top of the column. And then this text can be shrunk down, sit below it, and this whole gradient can have the ability to stretch to fit whatever size this panel ends up needing to be. So let's go ahead and draw that out manually, so we're gonna need a panel of the correct size. Make that 760 high, we just drag this down here. We'll call it six_bg, turn off the border. And we'll just start by setting the background to dark so that we can see what we're doing. We'll change the filter a radial gradient. We'll set this grey to the dark color that we want to use as well. Now, we're gonna set this first stop, this is the one that's in the middle here, to a light blue. So that would be 395871, that looks a little overpowering right now, but we're gonna tone it down. We're also gonna drag this gradient down and we're going to increase its size so it looks a little bit more like a spotlight. Now we're gonna add in another stop, actually, I'm gonna drag this out a little bit larger. And we'll set our second stop to the color 2C4A61. We'll have another stop around about here. We'll set that to 243D51. And now you can see that we have the same sort of radial gradient that we had in our raster image, but now this is going to be able to adapt. So you can see, as we move that around, we keep our radial gradient, but we also keep that adaptability. Now, we're gonna bring in a tablet mock-up over on the left here. And something cool about Adobe XD is you can actually use it to open up PSD files. So if you have this mock-up file, or if you have something from here, you can go ahead and open that PSD up. Then you can grab the tablet, copy it, paste it directly into the design. And I was just gonna open up this group where it says yours image here, we don't need that. And now for the image is gonna fill in this tablet. Just gonna be use another copy of the image that we used before for our first panel. So I'm just gonna input that image again, Shrink it right down and then we're gonna mask it, just like we did before. So we'll draw a rectangle the same size as the tablet window, bring our image across, shrink it down a little more, so that's a better size for our tablet. Select the two shapes and choose, Mask with Shape, so there's our screen. Now we're just gonna drag it behind this group here, mark Glare On/Off. So now we've got a cool tablet mockup. And we can just shrink it down to the size that we need and position it where we want. I'm actually just gonna grab the measures again. Just drag at 120 measure all the way down. And we used a good position for this tablet. And that looks pretty evenly spaced. And this layout is one that can be collapsed. So I'll show you what I mean, I'm just gonna grab a selection of all these elements. We've got the background, the image, the heading text and button. Just gonna group those up and duplicate them. I'm just gonna hide this first one. So now what the coder would be able to do on a smaller width is I'd just be able to grab the tablet. Shrink it down, so you could see at the top of the column there would be able to take this text, Also shrink it. And then they'll be able to take this background with the CSS gradient in it, And make a single column. So all this would be aligned, this is just a rush job to give you the idea of what I'm talking about. But now this layout is something that can be collapsed, can be turned into a thin layer. Whereas our original raster-based graphic, if you try to resize it, you're stuck with what you've got, you really can't do anything with that. All right, so let's just hide that group, turn back on our working one, and we'll just actually delete that one that we put in for demonstration. All right, next up I'm gonna show you a couple of additional examples of things that might get you stuck. Okay, so now in this section what I wanna have is another panel, not too dissimilar from this one, wanna have a lot background with text, heading and a button. And I wanna have a laptop over on the right, also I wanna put a photo just faded off in the background. I'm gonna be using this photo from Unsplash, there's a link to this in the notes below this video. And to save a little bit of time I'm just gonna paste in the background that we're gonna be using. Cuz you're already seen how to do what I've done with this background. So let me just make sure that's dragged to the right spot. Okay, so what I've got here, just to run through it with you. Have a mask here, got a rectangle that's 1200 by 725, that's masking the image that I showed you from Unsplash. And that's a little bit too bright to have any text over it. So on top of that we've got a rectangle, it's using our light blue from the pallet and that's faded off to 92% opacity. So you can make that background image stronger or weaker by changing that opacity. Now we can use this background image is the first place where I'm gonna show you something to be aware of. And this column needs to shrink down, something's gonna need to be done to handle this image here. So imagine again, that you have a column that is a little something like dish-shaped. And you need to get all of the content that's laid out like this into a column about this wide. So I'm just gonna move that rectangle, but that's just to give you something to visualize. So with this background image that we put in here, if we shrunk this down to be the right width for a narrow column. We will probably also want to move it up or down vertically, but we'd still need to fill in, there is this space that would now be appearing either above or below this image. And we can do that just by having a flat color fill in the rest of that space. However what you might not realize when you have a technique done like this is they can be variations of color. So this color here might be a little bit different to this color here. So when you're filling in the gap with a flat color, you can see seams will come up in between. So I'll show you what I mean. If I draw out a rectangle at the top to represent filling in space above. And I set it to our light blue color, just make sure that that's lined up properly. Then I do the same thing below. Then you can see that when we look close, we have this differences in the color. So it makes it look like there's a join here even though we're working with the same color, so it's the same at the top. So it'a not gonna make it look smooth like you'd want it to look. So you can see it there, that same is fairly apparent. So I'll show you a way to work around that. What we can do is make a copy, Of the rectangle we're using to fade out the background image and now we're gonna set it to have a gradient. The gradient is gonna be a flat color at the top, then it's gonna go to being fully transparent here all the way down to here and then back to being a flat color. So we'll set this to be a linear gradient, we'll set both ends to a light blue. Make sure to put our opacity back up to 100%. Now we can add in a couple of extra stops. So you can do that by just clicking in this line or by clicking on the gradient line on the canvas. Now we're gonna drag the opacity slide up all the way down to 0. We'll add in another stop tool at the end here, drag that all the way to 0 and then we can adjust as is necessary. So what that does is just fades out this image to the flat color so that when we shrink it down, we're not gonna see any seams. So now when we zoom in, You can see that we have a much better graduation. We don't have that really, really obvious seam any longer. So there, that's one technique that you can do to help make sure that your background images can transition into a collapse state more easily. So now let's bring in our foreground content. Once again, I'd already picked this content earlier. And now I also wanna put a laptop over on the right side of this panel. What I've got here is a rectangle that's clipping this area off to be the same size as a panel. And then we have the MacBook Pro from the same set of mock-ups that we grabbed our tablet from. And that's clipped inside this panel, so that we get this half image. And once again, by itself that looks pretty cool, however when this needs to collapse down to a single column, it's gonna look a little bit weird. What you'll end up with is this clipped laptop sitting at the top of a column like this and looking a little bit off balance because now you have something in a single column that's weighted to the right side and looking a little bit odd. So there's a simple solution for this. All you need to do is include another copy of this image in this area. Just name it laptop full width and just turn it off. So I'll explain why that's useful. When the coder opens up this design in Avocode or whatever else they're using, what they see on this page is what they're going to be able to export. So they're only going to be able to export a clipped version of this laptop. Once this design is out of this editing software and into the hand off software, they're not gonna get the opportunity to drag this laptop to a different position and move it around. But if you give them this image now, they can export this whole image instead. Then in code they can move this laptop off to the side of the screen to achieve the same result as you're showing in your design. But they'll still have the whole image intact so they can then shrink it down as necessary for a single column layout. So there's nothing very technical to that solution. It's just a matter of being aware of these types of issues, and thinking through solutions and including them in your design. So, of course, you can hide that laptop, and it's just sitting there. So the code can activate that layer, export that image and use it when they need it. All right, so now we've just got one more lesson to go in this course. We're just gonna clean up and organize our layers a little bit and we're gonna talk about leaving notes inside the document that are meant for the coder to help them understand what you want them to do with the things that you've included in the design. And this will just be a demonstration of something that's a good idea to do at the end of any design process before you hand it off. So we're gonna go through that in the next lesson, I'll see you there.

Back to the top