2.2 Workflow, Breakpoints, and Do We Still Do “Mobile First”?
In this lesson, we’ll look at where you should start the responsive mockup workflow and how you should step through each phase of the design. "Do we still do mobile first?" is a question we’ll be asking. And whatever our approach is, why? Let’s find out.
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
2.2 Workflow, Breakpoints, and Do We Still Do “Mobile First”?
Hey, this is Kate, welcome back to responsive design in Adobe XD. We're kicking off our course with a quick refresher on responsive design. In part one of the refresher, we talked about what responsive design actually is. And that it just boils down to two things, and that is managing columns and content. In part two, this video, we are going to briefly talk about how to put that into action, so what you're actual workflow is gonna be inside XD. We're gonna talk about breakpoints, how you should be handling breakpoints, and the question of, do we still do the mobile first methodology? Right now, obviously, XD itself is not a website, it's not an actual website. So you're not gonna be able to create a fully functional responsive site inside the software. What you can do is create a series of artboards, and those artboards are going to deplete how the design should look at various widths. One approach that's very common here, and this is something that I do not recommend, is just picking out specific devices and only designing mock ups for those specific device widths. So for example, doing something at 1200 pixels wide to represent a desktop, 1024 to represent a tablet, and 320 to represent a phone. Even though this might seem like an intuitive way to approach responsive design, there are some problems that can arise from using that approach. The first problem with this approach is that it leaves a fairly high likelihood that your layout can break down at spots in between those arbitrary sizes. So let's say, like I said, you have 1200, 1024, and 320. Our layout then might just break down at, say, 1100 pixels or 800 pixels wide because there was just no design consideration for those in between widths. Secondly, if you think about it, it really doesn't make any sense to only be designing for device screen sizes. That makes the assumption that people will only ever be seeing a site at the exact size of the screen of their device. So what happens if someone's viewing your site on a desktop and they have your site snapped up into one of the corners of their site? So it's only using a quarter of their viewport. Or if somebody is on a mobile device and they're using a split screen mode, where they have one app on one side and one app on another. Now your site's only being viewed in half of the viewport size. So you can't assume that your site is gonna be viewed at sizes that correlate with specific devices. You need to cover every possible width in between your site's maximum width and its minimum width. And the maximum width is the widest point at which the content that your site needs to present is still legible. If the site becomes too wide, then things get stretched out too much and it becomes difficult to read. With the minimum size, you actually can think about devices because you can have a look at the tiniest device that you want to support with your site. So for example, it might be a watch. If you know that you wanna support watches, then you might need to take your site width down to, say, 270 pixels or thereabouts. Or alternatively, you can determine the minimum width of your site the same way that you determine the maximum width. You can have a look at what is the smallest possible width that your site content remains legible. So you set those two fixed points and then you cover everything in between. All right, so then if you know you've got these two fixed points, you've got your minimum width and your maximum width, where do you start? How do you actually start the design process? So if you've been looking into this questions already, then you've probably heard about the concept of mobile first. Mobile first is basically the suggestion that you start by creating a design that's catered towards small mobile devices, and then you progressively enhance your layout from there. This concept came up a fair while ago, but it's still something that we hear talked about a fair bit. And for that reason, you might be wondering if you should start your design at the maximum size end, something that you might hear referred to as your desktop layout. Or if you should start it at the minimum size end, which is something that you might hear described as your mobile layout. The real truth is that it doesn't rally matter anymore whether you start with a thin layout or you start with a wide layout. I'll explain why. The whole mobile first design philosophy came about as a way of overcoming the fact that mobile-friendly designs used to be sort of an afterthought. People would focus on creating a wide layout, thinking only about desktop machines with no touch controls and often with minimal concern for load speed or performance. Then when they'd done this, quote, unquote, desktop version of their site, they'd make another version, which would be a kind of a watered down, shrunk version of their desktop site. That added in some support for touch and direction, but would often be too bloated to run well on low powered mobile devices. So that mobile first philosophy comes from a point in time when you had a fairly clear distinction between mobile and desktop devices. Mobile devices were low-powered, small-sized devices, and desktops were high-powered, large-sized devices. But now it's very common to find a mobile device, like a iPad, for example, that has a lot of processing power and it has a fairly high screen resolution. On the flip side, you can have a desktop device that's quite small and low- powered, like a Chromebook, for example. So it really doesn't make sense anymore to have this idea of large layouts that are at desktops, and think that they don't need touch controls or performance. And conversely, it doesn't make sense to think that small size layouts are always gonna be on touch devices and are always gonna be on low-power devices. So now everything at every size needs to support touch control, and mouse control, and they all need to be performant. All right, so then if we know that touch controls are necessary at all sizes and that optimization and performance is necessary at all sizes. Then the only thing left that you could really be trying to apply a mobile first methodology to is the layout itself. And then that really boils down to a question of, do you start by designing your wide layouts first, which is what we would previously have thought of as desktop layouts? Or do you start with your narrow layouts first, which is something we would previously have thought of as a mobile layout? But realistically, it doesn't actually make a huge difference anymore whether you start with your narrow layout or your wide layout. Because you're going to be needing to think of all sizes of layouts as you create each element of a design. If you start a design thin and as you're adding in each portion of that site, you're going to need to be thinking about what it's gonna look like at its maximum width. And the same thing goes in reverse. If you layout something in its maximum width, then you're gonna need to have an idea in your mind about what you're gonna do with that content when it's shrunk down to its minimum width. So you can do either. You can start at whatever end you want as long as you're thinking ahead about how you're gonna handle each piece of content as you create it at various sizes. But for me personally, I prefer to start with the widest layout. The reason is the narrowest layout is pretty much always gonna be the same thing, it's pretty much always gonna be a single column. Like we talked about before, when there's no enough room to have multiple columns, everything has to go into a single column, stacked one top of the other. So there 's not really many variables there to consider. Your thinnest possible layer is always going to be relatively similar to every other thin layout. But with your widest possible layout, there are all kinds of different ways that you can be handling your content. You have to consider how many columns you're gonna have in each section, you have to consider the width of those columns. And you have to consider how your content is gonna be laid out inside your columns. So because there's more to think about there, I typically start with the widest, and then crunch down to that thinnest point, where I pretty much already know how everything's gonna need to be. But that said, you can totally do it the other way around if you prefer. As long as you have a plan for how you're gonna expand things out, that's totally fine. So do you need to make sure that your thin mobile-friendly layouts are awesome? Yes, of course you do. But do you need to make your thin layouts before your wide layouts in order for that to happen? No, you can make awesome layouts that work across all kinds of devices at anytime you want, in any order that you want. Just do whatever works for you. Just make sure that whatever width markup you're working on, you're always making sure that it's both touch and mouse friendly, that it's going to be performant when it's deployed. And that you know how that element is gonna look at all the different widths that you need to cover. All right, I just gave you a quick summary of what you need to think about with your workflow. First up, when you're creating your artboards for responsive design, don't just go with arbitrarily selected device screens. Instead, create an artboard that's gonna show every major layout change that you need to show in order to indicate how you're gonna keep your content legible at every width in between your maximum and minimum layout size. Don't just think about mobile first, think about mobile always. There should always be touch controls and there should always be optimization. Start with your thinnest artboard if you want, start with your widest artboard if you want. It doesn't matter as long as you're thinking ahead about how you're going to handle all the different widths that you need to accommodate. All right, so that is our responsive refresher done. Now we're ready to actually get into working with XD to create with responsive mock ups. In the next section of the course, we've got seven lessons that are gonna cover all of the XD specific functionality that you'll need in other to produce responsive designs. And in the section after that, we're gonna go through a practical example of actually creating responsive artboards for a design. So in the next lesson, we're gonna start with the quick overview of what you actually can do for responsive design in XD. XD is not a be-all and end-all for everything to do for responsive design, but there are some things that you can do really well with it. So we're gonna cover what those things are in the next lesson. I'll see you there.