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.7 Smallest Breakpoint

Hey, welcome back to Responsive Design in Adobe XD. In this lesson we're looking at the very smallest break point art board that this design is gonna need. As I mentioned in an earlier lesson, you can determine your smallest size either by picking a really tiny device that you wanna target. So in this case we're gonna go with the Apple Watch at 272 pixels wide, which is very, very narrow. So if you can make your site work at that width, then you're doing pretty well. Or you can look at the actual content of your site and decide, what is the minimum width that this content can still actually work for? And then just say, well after that it's too narrow and we're not really going to focus on trying to support anything smaller than that. So there's actually not much that we need to do at this stage, because everything's all ready in a single column. So I'm just gonna duplicate this art board. We all ready know what size we're gonna tag it, we want to go with 272 pixels wide. So as you can see, because of the way we set everything up, everything already looks pretty good. All that really needs to happen in here is just tweaking and tidying up of text boxes, correcting of aspect ratio on images and things like that. But there is one thing that does need to be fixed and that is that this button is now too large to fit in this space. If you have a look up here, you can see this is the icon that represents a symbol, because I've been using a symbol to place this button throughout all of my art board so far. But as long as this button is still a symbol, I'm not going to be able to resize it. So what I'll have to do instead is right-click and choose ungroup symbol. And then that's going to completely separate these items that comprise this button. So you also are probably gonna want to hit Ctrl+G to group them back up again, just to help you keep things organized. So that this is still visible in your layers panel as a button. And then we're gonna be able to shrink down the button to a size that fits for this layout. So that is pretty much it for what you're gonna need to do at this size. The rest, as I said, is just the little tweaks and adjustments. And when those tweaks and adjustments are done, you'll get this. So here a button fits well, everything is all stacked in one great big column, everything fits pretty comfortably, and no element of the layout is broken. And with that, all of our break point art boards are done. So we started out with just a basic layout, we added in the content. We then created a base art board that would be the full width of our site. Then we produced gradually narrower art boards so that everything between our minimum width here at 272 and our maximum width here at 120 is completely accounted for. So now there should be no surprises, there should be no point in between break points where anything falls over and the layout doesn't work. And the coder has all the information that they need to make the site look in the browser how you've designed it in XD. So that's all of the break points covered, in the next video I'm gonna show you how you can also make device-specific art boards. Because sometimes that's just easier for communication with a client or whoever you're building the site for. It's probably not gonna be terribly meaningful to them to say, he're the 900 pixel break point art board. But you can definitely say to them, here's how this is going to look on an iPad or here's how this is gonna look on a Nexus 7. And because you've got all possible widths covered with these art boards here, it's very easy to then pick any size device that you want and quickly just adapt one of these art boards into that device size. So I'll show you how to do that in the next lesson, I'll see you there.

Back to the top