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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Creating Breakpoint Artboards

We’re about to run through some practical examples of using XD to show how a layout should respond at various sizes, indicating where breakpoints should be used to keep the site legible. Before we jump in, we’ll have a quick overview of the types of things we’ll be looking for when deciding where to put breakpoints, and what will need to be adjusted in the layout for each.

4.1 Creating Breakpoint Artboards

Hey, welcome back to Responsive Design in Adobe XD. In the last section of the course, we went through and covered all of the things specific to XD that can help you with the responsive design workflow. And now in this section of the course, we're gonna run through some practical examples of how you would use this in implementation. So I already talked about how it's not necessarily the best idea to just pick some specific device sizes to try to target your markups for. Rather, you need to cover everything between your maximum and minimum site width. And the way that you do this is by, if you're starting with your narrowest design, then you expand it. And you adjust as you expand the design, in order to make things work properly in the layout. Or if you're starting with your maximum width like this, then you shrink the design and you adjust things as you go along when you see that the layout is no longer working at that width. So you're gonna be creating a series of art boards, and each one of those art boards are then gonna represent where a breakpoint should be used in the CSS for the site when it's coded up. So the way that we're gonna do it, is with each art board, you will select the art board itself by clicking on the name of the art board. You make sure that the responsive resize is active, and then you're just gonna start shrinking until you see that something is looking wrong. And you can watch the width parameter up here so that you know at what width that breakpoint is, where it's starting to break down. So for example, I think that the first part that we're starting to see things looking a little cramped is around here. Because at this point, now this sidebar is starting to look a little too narrow, the content in here doesn't fit that well and we're gonna fix that up in the next video. But I just wanted to show you an example of what kind of things that we'll be looking for. And as we continue to shrink down, we're gonna see things like the menu not having enough room here. And eventually, it won't be enough room for all of these columns, so we're gonna correct for that as we go along. So just a couple more things to mention. One is that even though we've got a whole bunch of things automatically adjusting themselves on their width, we're still gonna need to manually update the height of certain elements. So as you can see, when I shrink in this art board, these images are keeping the same height. So you're gonna have to go in and manually reduce the height of those elements to make sure that they're retaining the same aspect ratios they started out with. So that's just something you're gonna have to do manually. Maybe in the future, there will be the ability to lock aspect ratio of elements when they're shrunk, but it's not there just yet. And another thing that you're gonna have to do, as you're changing out the width of your layouts, is you're gonna have to get into your text boxes here. And you're gonna have to expand the height so that you can see all the lines of the text. So there's just a couple of things to think about as we're going through this process. As I mentioned before, I'm not gonna actually go through and show you the process of resizing every individual box and making every individual change because that's gonna get pretty boring for you pretty quickly. I've already done these all in advance, so what I'm going to do is show you the process of identifying where the layout breaks. And then I'll jump forward to showing you how the solution to that breakage is implemented in a breakpoint art board. So the next video is gonna be our first breakpoint, which is gonna be at about 1,000 pixels wide, where we're gonna fix up the width of this column here being a little too cramped. So we're gonna deal with that in the next video, I'll see you then.

Back to the top