3.4 Emulating Flexible Width Columns
We saw earlier how important flexible columns are in responsive design, and with a little creative use of rectangles and groups in XD you can simulate their functionality. Learn how in this lesson.
1.Introduction1 lesson, 00:49
2.Responsive Refresher2 lessons, 15:28
3.Responsive Design in Adobe XD7 lessons, 43:13
4.Breakpoint Artboards7 lessons, 25:05
5.Conclusion2 lessons, 08:05
3.4 Emulating Flexible Width Columns
Hey, welcome back to Responsive Design in Adobe XD. In this lesson, I'm gonna show you how you can use Adobe XD to emulate flexible width columns. As I mentioned, I'm not gonna go through and show you square by square how to draw all of this stuff out. I'm gonna keep the focus on showing you the most pertinent points of actually implementing this into your own workflow. So I've got a demonstration here, if I grab this outer element here and then I shrink it down, you'll see that everything inside shrinks down along with it. So what have we got? Let's look a little bit closer. So I've got a section that's set up to be a header. We've got another section that's set up here to be a hero unit. And inside the hero unit, there is a left column that's 50% width and a right column that's 50% width. Under that, we've got another section which is gonna be used to display a features type of area, this section here that's gonna be used to display an image slider. Then we've got an area here for main content. What we've got inside here is a representation of a left column and of a right column. And these actually have spacing around the outside as well. So this represents a sidebar that would be about 30% the width of the site, minus spacing and a main column that would be about 70% width. And then we also have an area for the footer. So then you saw as I shrunk down the wrapper, the column that is suppose to represent 70% stays at about 70%, and same thing with the 30% column. And the same thing is true with the 50-50 columns. They're both shrinking down automatically to go along with the parent. So there is a couple of things that go into creating a top of a layout shell like this. One is using rectangles and groups together. So a group in Adobe XD like, let's take our hitter for example. You can see that it has a width and a height setting. That width and height setting is determined by the content that's inside that group. So inside this group, I've put a rectangle and I've named it header div. And I'm giving it a specific height and width to indicate what size this part of the site should be. So if I was to increase the size of this rectangle, I just dragged it out to be a little bit higher. It's gone to 380 height. Now if I look at the group, now the group is also 380 height. So what you can do by putting rectangles like this inside groups is you can make it really easy for the coder to come along and look at each one of these sections. So we have a group representing each section of the site. And they can have a look up here and see what the dimensions should be for each one of these elements of the site. And the other function of including rectangles that represent divs is they're gonna give you something to snap your content elements to. They're gonna work like guides basically. Right now, Adobe XD doesn't actually have any guides. I'm sure they'll be coming in the future but for now, you can use this system instead. So for example, if we go into our hero unit group, you can see that I've got a main rectangle that's representing the whole section of the site. Then inside that, I have a group for the left column that has its own rectangle inside it, and the same thing goes for the right column. So now, when I wanna start adding content into this area of the site, let's say I just wanna include a rectangle and I do it inside this left column group. Now when I move it around, now you can see that it's snapping to the edges. And it's working in basically the same way as it would if you had guides running down each edge of each one of these parts of your side. You can then also use these layout rectangles that you're putting in place for alignment purposes. So if I select this rectangle that I have representing a div, and I select this rectangle that I have representing some content. And I use these alignment tools, now I can align this shape relative to the aspect of the layout that I'm working with. So it's a great idea to go through and set up rectangles like this to define each part, Of the layout of your sign. So you can see all those different rectangles there that give dimension to the groups that contain them and give you guide-like functionality. So the next thing to consider when you're setting out these layouts. That always stand again, is when you should have responsive resize turned on and when you shouldn't. So if you remember, you wanna have responsive resize turned off. So if you read from a quick overview on responsive resize, you can have it turned on when you've got a single column layout. But if you have a multi column layout that you want to reflex but you're gonna wanna turn it off. So I have responsive resize turned on for the header, which is a single column. But I have it turned off for this hero unit. Then the same thing goes down here, these are both single columns. So section one and section two, I have it turned on, but then for the main section here, double column, I have it turned off. And then finally the footer, I have it turned on. So just bear those things in mind. And then, when you resize the parent item, then everything is gonna be able to shrink and expand to fit. So there's a couple of extra quick tips I wanna give you for setting up a layout like this. One of the things that you can consider is while you're drawing things out, you might want to turn borders on, just so that it makes it a bit clearer, what you're working with. Another is that you can use mathematical functions inside Adobe XD to help you set up the right dimensions here. So this one's fairly easy. We've got two columns here, and we want them to be 50% of the available width for each one. So we just look at our overall width. I have a site width here of 1200 pixels, so that's all pretty straightforward. But let's say for example, you want to layout a five column grid. In that case, you could create a rectangle to represent a div, left align it, it will snap to the outside of one of the rectangles that you already have in your design. Set it to the full width. In this case, it's 1200. And then you can actually do maths inside these fields. So if I know I want this to be one-fifth of the overall width, then I can just enter and divide by 5. And then it would automatically do that calculation for me and shrink down the width. So an example of where I've used that is to create these elements here. And you wanted this to be 70% of the available width and I wanted this to be 30%. So I drew out a rectangle, snapped it to the left, set it to 1200, I wanted it to be 70% so I multiplied it, put in a little star to do multiplication by 0.7 so that gave me an overall 70% width. I then knew that I wanted to have 40 pixels gap on the left side here and 20 pixels on the right. So then I just subtracted that 40 and 20 pixel amount. So I subtracted 60, that gave me the width that I needed and then I was able to offset it from the left here. So the exposition up here determines how far from the left this element is, so I knew I wanted it to be 40 pixels really to the right. So then I could add 40 pixels and hit Enter. And then that gives me the alignment that I need. Then I can hold down Shift while I'm dragging the shape to keep it stuck on the axis that it's already on. Snap that up to the top and then I can do the same thing to offset it vertically. And in to the Y position, I want this a bit further down. So I'm gonna add 60 pixels, and then I've got my alignment. So that is how you can layout a series of rectangles that were like divs. And that's how you can get flexible with columns, that simulate being based on a percentage with, like they will be when they're coded up for the browser. That covers how you can create columns manually. But one of XD's coolest features is its ability to create a column system, or a grid system, rather, automatically, using the repeat grids functionality. This can be really really helpful for quickly laying out content. But after you use it, you'll need to follow a couple of extra steps to make sure that the content that you've laid out is still gonna be responsive. So we're gonna check how you can use repeat grids when you're making responsive markups in XD in the next lesson. I'll see you there.