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

2.1 Responsive Design Is Just Two Things

It can be easy to get so caught up with the ins and outs of responsive design that it seems overly involved and technical. However, if we really boil things down, we get to just two key tasks—and if you do those things, you’ll have a perfect responsive design. We’ll cover those two tasks in this lesson, so you’re in the right frame of mind to approach your responsive mockups in XD.

2.1 Responsive Design Is Just Two Things

Hey, I'm Kezz Bracey for Tuts+. Welcome to Responsive Design in Adobe XD. So before we get into actually working with XD, I just wanna give you a couple of quick videos to refresh what it is that we're actually talking about when we are discussing responsive design. What does it actually mean? And when you're reading up on this topic, you can find all kinds of different theories and recommendations, but It really boils down to just two relatively simple things. When you're creating a responsive design, all you really need to think about are columns and content. And even content itself is really just more column management which is something that you're gonna see as we move on through this course. So what do I mean when I say that responsive design is just columns and content? Isn't it to do with mobile devices and making sure things are touch friendly and all those sorts of things? Well yes and no. The reason that I say that you only really need to think about columns and content is because at this point in time, mobile devices are so ubiquitous that you should always consider that every single site that you create needs to be workable with mobile. So everything needs to have touch controls, but at the same time things need to work for desktop computers as well, so everything needs to have mouse friendly controls. So you can take that as a given and sort of put it off to the side. So then in that case we're really talking about layout when we talk about responsive design. So how is it that layout can all just boil down to columns and content? Well the reason is that all websites, at least the vast majority, scroll vertically. And because we have vertical scrolling, really nobody cares how high your site is, you can just keep scrolling your content through as much as you need to to get through it. So your content being a non-specified height, it doesn't really matter, it's not really important. However, what is important is that we have a fixed width. Any given device, any given viewport is at one time a fixed width. But you don't know what that width is so that is the part that you have to manage. And when we manage width, we do it via columns, so that is why responsive layout design is first and foremost a matter of controlling columns. Inside those columns you have all of your content, so that's why the second point is making sure that the content that you have fits well inside the columns that you have. All right, so if responsive design basically comes down to columns and content, then what do we need to think about in regards to columns and content? Well, the first thing that you wanna think about is making sure that, as far as possible, your columns are fluid width. So for example you might have a column that can start at 1,200 pixels wide and it can shrink all the way down to say 300 pixels wide. That column is then useful across that entire spectrum of width. Obviously in some cases you'll have more than one column, so you might have a three column layout. Those columns can be flexible, and typically the process is gonna be that as the columns shrink in width, you leave them as they are until the content inside those columns is no longer legible. At that point, you're gonna discard one or more of those columns. So you might go from a three column layout down to a two column layout or a one column layout. That gives your content more room to retain its legibility. So the essential process with any given responsive layout is you're gonna start with multiple columns, and you repeat that process of shrinking and discarding columns until you end up with one single column and all your content stacked vertically. But in the same way that you can have fluid width columns, you can also have fluid width content. So an obvious example is you can have a block of text that's easily able to expand or shrink its width and then the text just reflows accordingly. You'll also want to make sure that your images can have flexible width wherever possible so that they continue to fit inside whatever space they have. Some content is more difficult to make completely fluid. For example, a navigation menu, a horizontal navigation menu, often has a relatively fixed width. And where this is the case, where you can't just sort of easily squash down content, then you need to think about where it's positioned, relative to the edges of your viewport, as you start to shrink down that width. So using that navigation menu example again, let's say you have a horizontal navigation menu. It's in your header, on the right side. You need to make sure that, as you're shrinking down the design, that navigation menu stays pinned on the right side of your layout. And here is where content is in a lot of ways just like your layout columns. When you don't have enough room for your content, you often need to collapse it into a single column. For example, when you have a horizontal menu layout, each one of those menu items is basically an individual column. And when there's not enough room for them anymore, you collapse those columns down to a single column and you stack your menu items one on top of the other. So, it's that same process. You start with a certain number of columns, you shrink them down when there's no more room, you collapse these down to a single column. And then the last major consideration in regards to adjusting your content responsively is changing font size to work well at different viewport sizes. Typically, this just refers to reducing the size of headings. And that's something that you're gonna see in action as we move through this course. So let's bring that all back to a couple of simple key principles. So all you need to think about when you're doing responsive design, whether it's in XD or any other platform, is just inside columns and the width of those columns, adjusting your content so that it fits inside those columns. And when there's no longer enough room for the content to fit inside the columns, reducing column counts until you end up with one single column and all of your content stacked vertically. And then boiling that down even further coming back to our key point, responsive design is all about columns and content. And if you think about those two things, you're gonna end up with a perfectly responsive website. All right, so that's Part 1 of our Responsive Refresher. In Part 2 of the Responsive Refresher, we're gonna talk briefly about implementing those two tasks that we talked about. What is the overall workflow that you should step through when you're creating your responsive design? How should you handle working with breakpoints? And do we still use the mobile-first methodology? We're gonna talk about that very quickly in the next video. I'll see you there.

Back to the top