Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:19Length:1.5 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.3 900px Breakpoint

Hey, welcome back to responsive design in Adobe XD. We're now going through the process of setting up art boards to represent each of the breakpoints that needs to happen in this design in order to preserve the legibility of the layout. In the last video, we created 1000 pixel wide art board. And now, we're ready to find the next place where the layout starts to fail and breakdown. So just like we did before, we're gonna to select the art board and start shrinking in until we see things starting to break. So as we start to shrink this down, you can see if you watch the menu up here, that it's starting to get pretty cramped. There's not a lot of room in there. And that's starting to happen at around about 900 pixels. If you wanted it to be really up against the margin, you could probably close it down a little bit more. But you also have to remember that menus can contain different types of items in them as they're changed over time. So to give it a little bit of slack, I would say we wanna kick in an adjustment to that menu at about 900 pixels. And the other thing that we're seeing around here that could be adjusted is the width of the columns in the hero unit. It's starting to get a little bit cramped for the actual written content here. So it's probably gonna be a good idea for us to shrink the size of the column that contains the image to make more space for this written content instead. So then once again, just be a matter of resetting the width of the current art board that you're working on back to 1000 in this case, duplicating the art board and shrinking it down to the width that we've identified it needs to go to, and then making your adjustments inside this art board. And one thing to bear in mind here is that as you start to push down some of this content, so we're gonna take this horizontal menu. And we're gonna turn it into a vertical menu where all the menu items are stacked one on top of the other. And the increasing height of these text boxes is gonna to start to push things down. So what you're probably gonna end up needing to do is increase the size of the artboard vertically. To do that, you're gonna need to turn off responsive resize. Because at the moment, if you drag down the height of this art board, everything is gonna stretch. You don't want that, so you need to flick that switch. And then you'll be able to drag out the height of the art board without anything else inside being updated as well. And don't forget that as you go along, you also want to update the height of the wrapper_div rectangle, So that it matches the height of your artboard, or vice versa. One of the things that you might also end up doing is expanding the height of each one of these elements as you need to, then pulling out this wrapper_div rectangle for the right height, wherever it needs to be to match up with all the other content. And then, looking at its readout here and using that to tell you how high the art board size should be. And as you can see, I have a version of the 900 pixel art board that I already completed earlier. So the horizontal menu has now been replaced with a little hamburger icon. And we've just got individual menu items stacked one on top of the other. In the hero section here, We've now increased the size of this right column, so that there's more room for the text content, and decreased the size of the left column, so that it's not taking up so much space. And then, we just went through and did the other housekeeping tasks that I described earlier. So the aspect ratio of the images has been adjusted to keep it fully consistent. And the text boxes have all had their size increased to make sure that we can see all of the text that they contain. So now, that is everything that we needed to do for the 900 pixel breakpoint. In the next video, we'll move onto the next breakpoint at 700 pixels. I'll see you there.

Back to the top