XD is Adobe's contributions to
the world of design mockup software. And in XD,
as with any concept design tool, it's really important to be able to
illustrate how your layouts are going to respond at the different widths that
they're going to need to be functional at. In this course, you'll learn about the
specific elements of XD's functionality that can be used to help you with
your responsive design processes. I'm gonna show you a couple of tricks for
XD to help you with your layout, both in general and
with responsive design. And then I'm gonna show you through
a practical demonstration of creating a multiple artboard mockup of
a responsive wireframe site. By the end of this course, you're gonna know exactly how to produce
a complete responsive mockup in Adobe XD. So let's go ahead and get started
on responsive design in Adobe XD. I'll see you in the first lesson. 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. 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. Hey, welcome back
Responsive Design in Adobe XD. In the last section of the course, we just
had a quick refresher on Responsive Design so that we know what we're actually
trying to achieve as we work in Adobe XD. Now, as we're getting into using the
software for this purpose, I'm just gonna start with a quick overview of what you
can actually do in XD and what you can't. And first up,
I also wanna mention that this isn't gonna be a course on using
XD as a drawing software. It's gonna assume that you're comfortable
with doing things like drawing out rectangles, and creating groups, and
setting colors, and things like that. If you need a primer on the basics of
working with XD then check out the links in the notes below this video. I'll give you some links to some courses
that can help you with the initial getting started with XD. What we're gonna be focusing on is
specifically responsiveness in XD. So as we go through we're gonna skip
over the process of actually laying out the shapes and text and what have you, so
we can keep that focus on responsiveness. And anyway, some of the actual process of
what we'll be going through can be a bunch of tweaking of sizes. And to be honest, you would get pretty
bored watching me do all of that, so I will be jumping forwards from time to
time to keep the focus on the pertinent points for responsiveness. All right, so
about responsive design in XD. So the first thing that you need to
be aware of is that you can't make a design in XD that is
itself fully responsive. So if we have a look at this mark up here,
this is all just done in wire frame form, by the way, rather than trying to
focus on a fully fledged design. I can preview this design, and I'll get
this that looks like a live website. But I can't shrink down the window and
have it actually respond like a regular site,
so it doesn't work like that. What you can do, however, is create
a series of art boards that show how the design is going to look at every stage
of the layout, where something needs to change in order to keep everything fitting
nicely in the design and looking legible. So the goal of this process is twofold. One, you want to communicate with the
person who is gonna be coding up design exactly how want this design to function. By creating a series of art boards like
this, you have complete control over exactly how it's gonna look and
whatever width it's being viewed at. So as I was saying before, if you only
produce a 10/24 mark-up for a tablet and a 320 mark-up for a phone, then the coder
is gonna have to guess what you want to have the design do at 500 pixels. By doing this multiple art board approach,
there's no guesswork and you communicate to them exactly what should be happening
across the whole size spectrum. And the other thing that you're gonna
be able to do to these art boards is communicate with the client how things
are gonna look at different widths. Something that I'm gonna show you later
is once you've created a system of art boards like this,
you can take one of these art boards and you can adapt it in about 30 seconds to
any type device preview that they want. So if a client says hey, show me how
this is gonna look on the latest Samsung Galaxy that's at a resolution
that nobody has ever used before. You're gonna be able to cover that,
because you're prepared for any width that the site needs to work at. There's something that's important to
remember as you're going through this process is that this is not
responsive development. This is not responsive coding, so you're
not gonna be able to do everything in the mark up exactly as it's
gonna be in the browser. You're probably not gonna to have spacing
that's absolutely perfect to the exact pixel width that it's
gonna be in the site. And some dimensions might be slightly out, compared to what they're gonna
be once the site is deployed. So don't feel like you have to get
caught up too much with making things absolutely pixel perfect. Because the amount of fine tuning that
you're gonna have to do to get that point is gonna take you more time than
it's really gonna be worth. In reality, when this is
actually coded up in the browser, it's not going to be exactly the same
pixel for pixel no matter what you do. So don't worry about that too much. You have three main goals that you wanna
focus on when you're doing responsive design in XD. And that is through your collection of art
boards, you wanna convey what you want to happen to the layout at
various sizes to the coder. You wanna be able to convey it to
a client, or whoever you're designing for how the layout is gonna look on any device
that they might wanna see a preview for. And you wanna do both of these things in
the least time-consuming way you can. So achieving those three goals is what
we're gonna step you through in the next lessons of the course. And the first place we're gonna look to
make that happen is XD's Responsive Resize functionality. This is a fairly new addition to XD, and it's designed primarily to help
you with that third goal of making this work flow move alone in
the least time-consuming way possible. So in the next lesson we are gonna check
out what Responsive Resize actually is and how you can put it to
work in your mark ups. So I'll see in the next lesson. Hey, welcome back to
Responsive Web Design in Adobe XD. In this we're gonna check out Adobe XD's
responsive resize functionality. This is a tool that you can use to help
you speed along the process of adapting new content from one artboard
into the next size artboard. So let's take a quick
look at what it does. So I'm just gonna draw just a regular
square, then open the right side by here. You'll see that we have this
responsive resize sections, and it's automatically turned on by default. So the first thing that you'll need
to know, is if you wanna turn it off, just click that little
toggle there to turn it off. So to show you what it actually does, I'm going to switch from
automatic mode into manual mode. And in here you can see that what we have
is basically a system of constraints. These constraints are pretty much the same as constraints that you
would see in other software, if you've worked with constraints before,
it's really not that different. So in a nutshell, you've got constraints
that control how far the object is from the edges, so that's these ones here. And you've got constraints that control
the width and height of the object. So, you have the ability to fix
the width to a set width, or fix the height to a set height. So the easiest way to communicate what
these actually do is gonna be to show you with some example shapes. So, here we go. For example, we've got here two objects that both have
responsive resize activated on them. And now if I shrink down the parent here, you'll see that the object on
the right stays on the right. Or if I shrink the other way,
the object in the left stays in the left. So if we go into the responsive settings
for each of these by hitting Manual, you can see here, this one is being told to maintain its
position relative to the right-hand edge. And this one is being
anchored on the left side.. Both of them have fixed width and height. And you'll also notice that these
constraints were automatically applied. The object on the left was automatically
told to anchor itself on the left, and vice versa with the object on the right. And that automatic application of
constraints is what makes responsive resize different to
constraints in other programs. In other programs, you need to manually
apply constraints depending on what's appropriate for each object. But with responsive resize, XD will do its
best to try to guess which constraints are appropriate for different elements. But sometimes it's actually
gonna guess wrong, and when that happens you're going to
need to turn off responsive resize. So just bear that in mind that if things
are not responding how you expect them to, you might need to either go in and
change these constraints, or turn off responsive
resize all together. All right, we'll have a look at another
couple of examples to show you more about how to work with responsive resize. I talked earlier about the fact that you
want to have flexible columns wherever possible. And you can actually set up your artboards
in XD, to simulate flexible columns, which is something we're
going to go into more later. So I wanna show you how responsive
resize operates in relation to having those flexible columns. So by default what we're looking at
here simulates having a single column, so the dark rectangle
inside a parent container. Now, when I resize this element,
put responsive resize on, everything resizes quite well. So we've got basically the same as
a flexible percentage based div in a website lab for example. Where it doesn't work so well, is if you
wanna have true columns side by side. Now with responsive resize switched on,
if I shrink things, you're gonna get this issue where the boxes are protruding
outside their parent element. So if you wanna have a layout like this
where you have two boxes inside or however many boxes inside, and
you want them to stay flexible, you want them to retain
the ability to be resized. Then you actually need to turn
responsive resize off like I have here. With responsive resize off,
then when you shrink the parent, you can see that the internal
shapes are shrinking down as well. And with that, you can simulate
having those fluid with columns. Another thing to consider when you're
setting up for a fluid layout like this is, how the box is going to respond,
if you resize the whole artboard. It's probably gonna be
working towards is artboards, where everything inside them can respond
when you shrink the artboard down. So right now if I turn on responsive
resize on the artboard itself and shrink things down, so you can see that
our little two-column layout Is shrinking down nicely, but that the amount of space
on the left and right is also shrinking. So you can see here this amount
of space is being preserved. That may be fine, depending on whatever
you're wanting to do with your layout. You might want to have spacing that
adjusts along with the size of the parent. But if you don't want that,
then what you can do instead is turn on responsive resize on
the element like I have up here. Go into manual, and turn everything
off except for the anchors for the left and right side. So what that says is to
preserve the amount of space that's on the right side and
on the left side. So now if I resize the artboard, Now this container is shrinking down and
its internal columns are shrinking down, but it's keeping the same size
spacing at the outer edges. So that may be something that you wanna do
when you're working through creating your artboards. Now, one of the things you might need to
do as you're going along is to vertically shrink some of your elements. So you might need to vertically shrink
elements like images, for example, so that you can maintain their aspect ratio as
their width is going down in your design. So with this example here, I just have a rectangle with
a little place holder image here. And at the moment if I resize this image, then the little thing that I have got
inside is shrinking down as well. And that's gonna happen whenever you have
any object that's nested inside the object that you're shrinking down, so that's
with responsive resize switched off. This is an example of where having it
switched on can be really helpful. So this example,
I have responsive resize switched off. I'm just letting it automatically apply
the constraints that it wants to apply. And now with this image,
if I shrink it down, then the internal object is
keeping it's size and shape. And then there is just one more
thing that I wanted to show you, and that is that right now responsive
resize doesn't work on the symbols. So this is just a couple of objects
that I've converted into a symbol, so you can see these little symbol arc on
here shows us that this is a symbol, not just a regular group. But if I try resizing the artboard now, you'll see that that symbol
doesn't respond in any way at all. And it won't matter what
I do on the symbol level, I can turn off responsive
resize on that symbol. And then if I shrink the artboard it's
still not gonna make any difference. So what you actually need to
do is ungroup the symbol, so that you end up with the same shape,
but no longer in a symbol. You do that by just right clicking and
choosing ungroup symbol, and then when you resize the artboard, then that shape is gonna respond just
like any other shape in your layout. So for the moment that is probably
gonna slow you down a little bit. The whole point of symbols is that you
can reuse them across multiple artboards. You are gonna have to regroup them for
now, if you want to use
responsive resize on them. But Adobe have said that
in a future update, responsive resize is
gonna work on symbols, so you'll just have to hold tight for
a little while to get that functionality. All right, so
when should you use responsive resize? So you should use it at the artboard
level like we have here, so that you can shrink down an artboard and
have all the content inside respond to it. Similarly to how when
you resize a browser, you can have the content inside respond. You can also turn it on when you have an
element that you don't want to change size when the parent changes size. And another great place to use it is
when you have an element that you wanna anchor according to one of the edges. So you want it to keep it's position
relative to one of the edges. And you wanna turn responsive resize off, when you want to simulate
a fluid width column. All right, so that is the essentials
of how responsive resize works. Now you know what we're doing as we use
it throughout our output correction. And process and speaking of artboards,
the next thing that we're gonna cover is how to use artboards in XD
in the context of responsive design. So we're gonna step through
that in the next lesson. I'll see you there. Hey, welcome back to
Responsive Design in Adobe XD. In this lesson, we're just gonna touch on
artboards, the basics of using them, and how they relate to responsive design. There's not that much to cover, so
this is gonna be a fairly quick lesson. All right, so the first thing that you
need to know is the artboard tool is here. So you could just grab an artboard tool
and you've got a couple of choices. You can either draw out an artboard
at the size that you need it. Once you've drawn it out,
you can specify width and height here. Or the other way that you can create
an artboard is you can select one of the presets down here for
a specific device size. So let's say that you want to show how
it's gonna look on iPhone 6, 7, or 8, you just click the button here, and it's gonna automatically create an
artboard for you at the appropriate size. It's actually going to automatically place
that artboard wherever it feels like it doesn't really matter where your
cursor is at the time that you hit one of these selections here, it's just
gonna line it up next to another artboard. So you might just need to move
things around after you create them. Once you do create an artboard, you also have the ability to switch
it from portrait to landscape mode. So this can be really great for creating
mockups to show clients on how a design is going to look in different orientations. And then the other most significant part
of XD artboards is the scrolling settings down here in the view
port height settings. So of course usually a site is going to
be bigger than the amount you actually have it in view port. And you're typically gonna
need to drag out the height so that it can fit in all the content. XD will give you this little dotted line
along the bottom here that indicates the bottom of the view port, so I'm just
going to just put a big rectangle in here just to demonstrate what
the purpose of this is So now if I preview this artboard by
clicking this play button here, it's going to allow me to scroll down
past that point that I specified with that little dotted line along
the bottom of the viewport area. And I can actually drag this
to a different spot, And that's gonna change how much of the design
is visible in that preview before you need to scroll to see more of the content. So as I've already mentioned
a couple of times, even though you do have all of these
different device sizes here as presets, don't start your design with
picking sizes out from this list. Rather, what you wanna do instead, Is create a series a of artboards based on
the layout itself, what the layout needs. So these, which are examples
we're gonna go through later, these are all the points at which
they layout needed to change in order to keep the content in it
readable and fitting comfortably. So you wanna go through create
a series of artboards like that. And then once you're done then
you can take these artboards, take the content from these artboards, and then you can quite easily fit that
content into device specific previews. So then you're gonna have
all of these breakpoints, this is the information that the coder
needs, but you're still gonna be able to go to a client or whoever it is that
you're developing an interface for. And you're gonna be able to say, this is how it's gonna look
in this Android tablet. And then you'll be able to show them
the preview so that they have a clear understanding of what you're
actually doing with the design. So as I said, that's just a quick lesson. There's really not that much to artboards, but I wanted to cover those points because
they are so fundamental to the process. And speaking of things that are
fundamental to the process, we've talked about how fundamental working with columns
is, and how you should try to have your columns be flexible so that you can get
as much life out of them as possible. So in the next lesson I'm gonna show
you how you might set up a LAN in an XD art board that simulates flexible
width divs in a production design. So we're gonna go through
that in the next lesson. I'll see you there. Hey, welcome back to
Responsive Design in Adobe XD. In this lesson, I'm gonna show you how you can use Adobe
XD to emulate flexible width columns. As I mentioned,
I'm not gonna go through and show you square by square how
to draw all of this stuff out. I'm gonna keep the focus on showing
you the most pertinent points of actually implementing
this into your own workflow. So I've got a demonstration here, if I
grab this outer element here and then I shrink it down, you'll see that everything
inside shrinks down along with it. So what have we got? Let's look a little bit closer. So I've got a section that's
set up to be a header. We've got another section that's
set up here to be a hero unit. And inside the hero unit, there is
a left column that's 50% width and a right column that's 50% width. Under that, we've got another
section which is gonna be used to display a features type of area, this section here that's gonna be
used to display an image slider. Then we've got an area here for
main content. What we've got inside here is
a representation of a left column and of a right column. And these actually have spacing
around the outside as well. So this represents a sidebar that would
be about 30% the width of the site, minus spacing and a main column
that would be about 70% width. And then we also have an area for
the footer. So then you saw as I shrunk down
the wrapper, the column that is suppose to represent 70% stays at about 70%,
and same thing with the 30% column. And the same thing is true
with the 50-50 columns. They're both shrinking down automatically
to go along with the parent. So there is a couple of things that go
into creating a top of a layout shell like this. One is using rectangles and
groups together. So a group in Adobe XD like,
let's take our hitter for example. You can see that it has a width and
a height setting. That width and height setting is determined by
the content that's inside that group. So inside this group, I've put
a rectangle and I've named it header div. And I'm giving it a specific height and width to indicate what size this
part of the site should be. So if I was to increase
the size of this rectangle, I just dragged it out to
be a little bit higher. It's gone to 380 height. Now if I look at the group,
now the group is also 380 height. So what you can do by putting rectangles
like this inside groups is you can make it really easy for the coder to come along
and look at each one of these sections. So we have a group representing
each section of the site. And they can have a look up here and
see what the dimensions should be for each one of these elements of the site. And the other function of including
rectangles that represent divs is they're gonna give you something to
snap your content elements to. They're gonna work like guides basically. Right now,
Adobe XD doesn't actually have any guides. I'm sure they'll be coming
in the future but for now, you can use this system instead. So for example, if we go into our hero
unit group, you can see that I've got a main rectangle that's representing
the whole section of the site. Then inside that,
I have a group for the left column that has its own rectangle inside it, and
the same thing goes for the right column. So now, when I wanna start adding
content into this area of the site, let's say I just wanna include a rectangle
and I do it inside this left column group. Now when I move it around, now you can
see that it's snapping to the edges. And it's working in basically
the same way as it would if you had guides running down each edge of each
one of these parts of your side. You can then also use these layout rectangles that you're putting
in place for alignment purposes. So if I select this rectangle that
I have representing a div, and I select this rectangle that I
have representing some content. And I use these alignment tools,
now I can align this shape relative to the aspect of
the layout that I'm working with. So it's a great idea to go through and set up rectangles like this to define
each part, Of the layout of your sign. So you can see all those different
rectangles there that give dimension to the groups that contain them and
give you guide-like functionality. So the next thing to consider when
you're setting out these layouts. That always stand again, is when you should have responsive
resize turned on and when you shouldn't. So if you remember, you wanna have
responsive resize turned off. So if you read from a quick
overview on responsive resize, you can have it turned on when
you've got a single column layout. But if you have a multi column
layout that you want to reflex but you're gonna wanna turn it off. So I have responsive resize turned on for
the header, which is a single column. But I have it turned off for
this hero unit. Then the same thing goes down here,
these are both single columns. So section one and section two,
I have it turned on, but then for the main section here,
double column, I have it turned off. And then finally the footer,
I have it turned on. So just bear those things in mind. And then, when you resize the parent item, then everything is gonna be able
to shrink and expand to fit. So there's a couple of extra
quick tips I wanna give you for setting up a layout like this. One of the things that you can consider
is while you're drawing things out, you might want to turn borders on, just so that it makes it a bit clearer,
what you're working with. Another is that you can use
mathematical functions inside Adobe XD to help you set up
the right dimensions here. So this one's fairly easy. We've got two columns here, and we want them to be 50% of
the available width for each one. So we just look at our overall width. I have a site width here of 1200 pixels,
so that's all pretty straightforward. But let's say for example,
you want to layout a five column grid. In that case, you could create a rectangle to represent a div,
left align it, it will snap to the outside of one of the rectangles
that you already have in your design. Set it to the full width. In this case, it's 1200. And then you can actually do
maths inside these fields. So if I know I want this to be
one-fifth of the overall width, then I can just enter and divide by 5. And then it would automatically
do that calculation for me and shrink down the width. So an example of where I've used that
is to create these elements here. And you wanted this to be 70%
of the available width and I wanted this to be 30%. So I drew out a rectangle,
snapped it to the left, set it to 1200, I wanted it to be 70% so I multiplied it, put in a little star to do
multiplication by 0.7 so that gave me an overall 70% width. I then knew that I wanted to have 40
pixels gap on the left side here and 20 pixels on the right. So then I just subtracted that 40 and
20 pixel amount. So I subtracted 60,
that gave me the width that I needed and then I was able to offset
it from the left here. So the exposition up here determines
how far from the left this element is, so I knew I wanted it to be 40
pixels really to the right. So then I could add 40 pixels and
hit Enter. And then that gives me
the alignment that I need. Then I can hold down Shift while I'm dragging the shape to keep it
stuck on the axis that it's already on. Snap that up to the top and then I can do
the same thing to offset it vertically. And in to the Y position,
I want this a bit further down. So I'm gonna add 60 pixels, and
then I've got my alignment. So that is how you can layout a series
of rectangles that were like divs. And that's how you can get flexible
with columns, that simulate being based on a percentage with, like they will
be when they're coded up for the browser. That covers how you can
create columns manually. But one of XD's coolest features is its
ability to create a column system, or a grid system, rather, automatically,
using the repeat grids functionality. This can be really really helpful for
quickly laying out content. But after you use it, you'll need to
follow a couple of extra steps to make sure that the content that you've laid
out is still gonna be responsive. So we're gonna check how you can
use repeat grids when you're making responsive markups in
XD in the next lesson. I'll see you there. Hey, welcome back to
Responsive Design in Adobe XD. In this lesson, we're gonna talk
about using XD's repeat grid function to help you out content quickly. But then also make sure that it's set up
in way that's still gonna be conducive to all the responsiveness that
you're trying to design for. So I've taken the layout that I
showed you in the last lesson and just added in some placeholder content. As I mentioned, I'm gonna be skipping over
the actual design part because it's not really pertinent to responsiveness. There's nothing here that I've yet done specifically to help
make this all responsive. I've just added in some rectangles and
some text, and you'll get this file so
you won't have to do this manually. You can just pick up from this point and
follow along with what I'm doing. I'm using a couple of placeholder elements
here that have come from Envato elements. So using this logo,
these little image placeholders for the images in the wire frame, and
a couple of these social media icons. So they won't be in the actual file cuz I
don't have the right to share those, but if you do wanna grab them, the links
are in the notes below this video. So I'll just quickly run through
the content that I've added here. So in here, we've got a logo and
title on the left, and just a straight up text menu on the right. In here, we've got a placeholder image,
and just like I showed you before, this is centered inside
our sort of fake div. All right, we've got some text and a button that
is left aligned in our little fake div. Here, we've got just a heading and
this little column. There are gonna be three of these, which we're gonna create with
the repeat grid functionality. And I set up the width of these using that
math function that I had told you about in our previous lesson. This section is simulating a slider
of images that are gonna move from left to right. So we just got one place
holder image in there. We'll repeat that out to five with
the repeat grid functionality. Here we've got the main section. This would be sort of a blog area with an
article on the left, with image, text and read more button. And on the right, we'll just have a little
widget with a couple of different links. And then finally, we've got our footer
down at the bottom with a just ordinary text navigation bar, little copyright
message and some social icons. And just to quickly show you as well,
because of the way that this is all being set up, the way that we set up that layout
in the last lesson, if the wrapper group here, the parent group, is selected,
this is already pretty responsive. There are some things
that start to break and that's what we're gonna address
as we go through later lessons. But you can see that that's already pretty
well responsive to get the ball rolling. All right, so now, let's expand
this content, this content, and this content out to multiple
items by using repeat grid. So I'm gonna come up here, and
I'm gonna grab this item here. It can be difficult to
select things in XD. Sometimes an easy way to directly
select an item that's nested inside other groups is to hold down Ctrl. And then you can hover and it'll show
you which item you're going to select. So then you click to select and it will
sometimes drill you down too far, but then at least you're in
roughly the right place. So what I actually want to select
is this column group here. Now with this column selected, I can hit
the Repeat Grid button, up here, and now I can just drag this out so
that I get three of these columns. By default, it's always gonna give you a 20 pixel gap
in between each one of your grid items. In this case I want a 40 pixel
gap between the items so I'm just gonna hover over the gap so
that it goes pink and then I'm just gonna drag the right
edge out until I hit 40, And so now that's that grid,
it's all set up and good to go. We're gonna do the same thing down here, Ctrl + click to get into the roughly
right place in the last structure here. So I'm gonna select the column itself,
hit Repeat Grid, and then drag out until I get five items. In this case the 20 piece square is fine,
and I can also do the same thing
vertically with this item here. So once again Ctrl + click to get
into roughly the right place and then I'm gonna select the sidebar snippet,
hit Repeat Grid, and then drag down so
I get six of these items. So now that is most of
that content all set up. But right now, if I grab that wrapper
again and I shrink down the sides, you can see that the grid stuff is not
shrinking along with everything else. So basically, responsive resize is
not going to work on elements that you've laid out using
the repeat grid functionality. So to make that work, what you're gonna
have to do is come in and select, The grid,
then you're gonna have to right-click and choose Ungroup Grid, or
you can do the same thing up here. Now if we try resizing, you can see it's still not working because
there's another step that we have to take. We have to select all of these columns. And they have automatically had
responsive resize activated on them. So you remember I said that sometimes it's
gonna try to guess what you want with constraints but it's gonna be wrong, and
then you're gonna have to turn it off. So we're gonna turn it off because we
want our multiple columns to be flexible. And now when we shrink down now,
everything is shrinking along with it. So then we wanna do the same
thing also for our other section. So in here,
we're gonna need to ungroup this grid. And then again, responsive resize has
been switched on, but we don't want it. So we'll turn that off. Now if we select the parent,
These items will shrink down too, and then the same
thing goes here with our sidebar. We're gonna need to ungroup, in this
case responsive resize is already off. It's guessed correctly this time,
and now when we resize the parents. Sidebar items are resizing too. Now there's gonna need further
adjustments that we'll have to make to get everything working fully responsively. But that's one of the first things that
we need to do to lay the foundation. And that is how you can use the repeat
grid function to quickly get columns of content later in your site. But then you're gonna
need to go through and tinker around with the responsive resize
functionality to get everything responding to the parent size the way
that you want it to. And this one more thing, you'll notice
that when we resize this parent, the images and
a place holder go a bit funny. These are just place holders,
so it's not a big deal. But if you want to deal with that and prevent that sort of funny resizing
from happening, then you can go in and select the image place holder, turn on
responsive resize, switch it to manual. Make sure all the edge constraints are off
and fixed width and height are both on. I'm just gonna do that with all of them. That's all good. Then when you resize the parent, Then
those little place holder images are gonna keep their size, so that's just gonna
help you to keep everything looking neat. All right, so next up, you probably just noticed then that this
text went funny when I resized everything. And there are actually a few different
areas where the text is going a little bit weird as we shrink things down. There are a couple of different settings
that you can use in XD to help your text stay more responsive. You're still gonna have to make
some manual adjustments, but these little changes are gonna help you to
minimize the number of manual adjustments that you need to make. So we're gonna go through handling text
in responsive design in XD in the next lesson. I'll see you there. Hey, welcome back to
Responsive Web Design in Adobe XD, I just wanna touch on a couple of quick
points that are gonna help you with handling text when you're creating
responsive artboard mockups. Now, a lot of the time, when you add
in a heading, like you've got here, it's going to automatically be added in
Point Text mode as opposed to Area mode. And the result of that is that when
the parent is resized, so like this, the edges of the heading are gonna
protrude outside the edges of the parent. But what we would be better off with is
something that can automatically keep itself inside the bounds of its parent. So one of the things that you can do with
your text to help make the responsive process quicker and easier is,
after you've added it all in, go through and
set it all to Area mode instead. And then, what you wanna do is widen
this container out to the outer edges of the parent, or at least to where you would
have your padding around the outside. So here, I can drag the left side out to
line up with this edge of the content and the right edge here. And now when I resize the parent, Now the text is always gonna stay inside. So then the only thing that we'll have to
do later is just increase the height of this box and gradually decrease the size of the text in
order to make it fit vertically as well. But by making that one change, you prevent
it from flowing outside horizontally. So I'm gonna do the same thing
up here with this heading, switch it into Area mode, and
then drag out the right side. This setting here is already in Area mode,
so that's already handled. So just check each one of our headings. That's in Area mode, so that's fine. And you just wanna make sure that
the outside of those bounding boxes is lined up with the outermost points that
you would want that text to exist at. So then what you're gonna do, as you
go through and you create narrower and narrower artboards to represent
different breakpoints, is you're also going to reduce the size of
this text to make sure that it fits in. And as you do that, it's a really
good idea to save out each one of your sizes,
In the Assets panel here as a style. So for example here, we have a 60-pixel
font size, and a 73-pixel line height. And that is saved up here. So that gives you two advantages. One, you can then easily reapply anywhere
else you need to have the same size font. And the other thing is,
As you go through and create your different size mockups, your heading
text is gonna get smaller and smaller. So by saving out each one of these
different styles in this list here, when the coder comes along,
they're gonna be able to see exactly which font sizes they need to
have accounted for in the style sheet. And then there's just one more
thing that I wanna point out. And that is that unless you
have a very good reason, you shouldn't shrink your normal text
to a size any lower than 16 pixels. It can be tempting to start
to try to shrink this down so that your normal text will fit
more comfortably in your layout. But that's generally speaking a bad idea. If you go lower than 16 pixels, you might be able to read it comfortably
on say a medium-sized desktop monitor. But small text is gonna be really hard
to read on a little phone screen. And it's also gonna be really hard
to read on a large desktop monitor, where it's such a small
fraction of the overall space. So even though you're gonna be
changing your heading sizes down, you pretty much wanna leave your
default font size the same at the largest size as it
is at the smallest size. And then there is just one more
tip that I wanna give you, and that is that no matter how
small your headings get, try to make sure that they're always
a bit bigger than your normal size text. Because otherwise you can get to
a point where it's hard to distinguish between a heading and regular text. If you absolutely have to bring your
heading size down to the same font size as your text in order to fit it in
comfortably, then at a bare minimum, make sure that it's a heavier weight
than your default-sized text. All right, so that is pretty much
everything that you need to know to handle text in your responsive design process. Just a couple of quick tips. Now, we're just gonna do one more thing
before we move on to actually going through a practical example of
creating breakpoint-based artboards. We're gonna take this layout that
you've already been working with, and we're just gonna trim off the left and
right sides so that we have an artboard that represents
our site at its maximum width. It's only gonna take a couple of minutes,
so we're just gonna go through that
really quickly in the next video. I'll see you there. Hey, welcome back to
Responsive Design in Adobe XD. This is just gonna be a really, really
quick video to do the last thing that we need to do in order to move on to creating
a series of breakpoint-based artboards. And that is, we're gonna take this layer
that we've been working with so far, and get rid of the empty space to the left and
right of it. And get it prepared to
work as the base for all of the other artboards
that we're gonna produce. All right, so the first thing that
we wanna do is select the artboard, which we can do by just
clicking on the name up here. We know that 1200 is the maximum
width of our site, so I'm just gonna enter 1200
in here on the artboard. Then you're gonna need to
correct this alignment. So we select the wrapper group that
contains everything that's laid out here. And we're gonna go up to the X
position and set that to 0. And right now if I resize this artboard, it's just going to clip the edges of
the content that we have laid out. That's because at the artboard level,
Responsive Resize is deactivated. Content has Responsive Resize
turned on by default, artboards have it turned off by default. So we're gonna need to flick that switch,
turn on Responsive Resize, and now when we shrink things down,
all of the groundwork that we've done so far is gonna start kicking into action. And the reason that we do this is because
here we're gonna be able to duplicate this artboard, shrink it down, and look for the first point at which things
start to break, the layout says to break. Then we'll be able to
make an adjustment there. Then we will be able to duplicate it
again, shrink, duplicate, adjust, shrink, and so on. So now you're across everything that
you need to know on the technical side of things to use
the functionality that's in XD. Now I'm gonna step you through a practical
example where I show you how a collection of artboards for breakpoints is actually going to look
when applied to this wireframe layout. So in the next lesson we're gonna have
just a really quick introduction to what it is that we're actually
gonna be looking for when we're producing
breakpoint-based artboards. And a couple of little things to be aware
of as you're going through the process. So for
that I will see you in the next lesson. 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. Hey, welcome back to
responsive design in Adobe XD. We're now about to go through a process of demonstrating what a series of Bright
Point app words can look like in practice. So we're just working with our Y-frame
layout that we've been looking at so far during the course. And as I mentioned in the last video,
what we're doing is just gradually shrinking down
the layout and then looking for the points at which the layer is no
longer really working very well. And the first place that it jumps
out at is around this width where there's really not enough room for
these elements in the sidebar anymore. And for
the sake of just keeping things round, I'm gonna say that that's 1,000 pixels,
cuz that's near enough. So I'm gonna undo that width change, and then the process is gonna be just
to hold down the Alt key and then drag this art board over so
you can duplicate it that way easily. Rename it, we know this is
gonna be 1,000 pixels wide. So then that will help to
communicate to the coder that that's where that break point
needs to be in the CSS. And then we can make sure that
responsive resize is active and change the width to 1,000. I accidentally shrunk that too much,
I'm just gonna put that back to 1,200 so we're preserving that
Bright Point layout too. So now here is where we can start to
implement those adjustments that we talked about. So down at the bottom here in order
to make more space for this sidebar, you wanna increase the size of this column
and decrease the size of this column. And because we set up
our fake divs over here, the process should be
relatively straightforward. So now because of the way that
we have everything set up, what I can actually do is just select
the group for this left column. And I can just reduce it's width. So I can just shrink
that down to 600 pixels. And then that's to reduce the size of
everything inside the group as well, then I can do the same thing
with the right column group. We took 50 pixels away
from the other column, so we're gonna add 50 pixels to this column,
bring that to 300. And then to move 50 pixels to the left
I'm just gonna hold down Shift and hit the arrow key five times. So then that has given us a lot
healthier amount of space for these items that are on the side bar. So this is the main thing that needed
correcting at this first break point, just a pretty simple adjustment. And then the other thing that's gonna
have to be done is just going through and making adjustments to things like
the aspect ratio of this image so that we square it off again. We need to make sure that text boxes
show all the text inside them, fix up these images, their aspect ratio
and then the same thing down here. Just making sure that all of that
text is showing in there as well. So when you've gone through and done that you're gonna end up with
a result that looks like this. So if we go this is our 1,000
pixel break point art board. We've got our wider sidebar, and
everything else has been updated and corrected. All the text is showing. The aspect ratio of
the images has been updated. So now that shows the coder everything
that they need to see to know how this design should look
at 1,000 pixels of width. Now we're ready to move on to the next
break point which is gonna be required at 900 pixels, and
I will show you why in the next video. I'll see you there. 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. Hey, welcome back to
Responsive Design in Adobe XD. We're carrying on with our process of
setting up art boards to represent each one of the break points that
need to exist in our layout. This is our 900 pixel art board,
the last one that we made, and now if we start to continue
shrinking things down, you can see that things are getting a bit too
cramped down here in the main section. At this point, there's really not enough
room anymore to have these two columns and have the content of them be
legible in both those columns. So what needs to happen here is
we need to discard a column and start stacking this content
one item on top of the other. So what we wanna do is
take Our left column, expand that out to be full width and
then take our right column, put that down underneath and
expand that out to be full width as well. So we're gonna do that
at about 700 pixels. In this case actually we'll just
reset this art board back to its 900. And then we'll repeat that same process,
hold down Alt, drag the art board out, and set its width to 700. Now if we take a look at
our main section here, we'll just temporarily
hide our right column. And what we're gonna do here is just
drag the width of this column out. So that's basically the easiest way that
we have to just turn this into a full width column. And then we're going to need to
actually increase the height. I'll just rename this
to 700 while I'm here. Turn off responsive resize, and
I'm just gonna drag out the height here so that we've got more room. And now we can grab the footer and
just move that down out of the way for now so
that we can turn our right column back on. And move this down here, so that it can be placed underneath
what was the left column. Now you can see that that
looks a little bit funny here. We probably don't need a whole full-width
column for each one of these items. So instead, what we're gonna set up is
a two-column layout for these items, with three items in the left column and
three items on the right column. And to do that, what we can actually do is
use that repeat grid functionality again. Just jump in here and delete all of
these items except for the first one. And we're also going to drag out
the size of our div to make more space. Make this about half of the width in here. This is just a rush job just
to show you the general idea. You'll need to do this little bit
more carefully in practice and then you can just use repeat grid. You get your, 2 by 3 layout. And then like we went through before,
you'll need to ungroup those and turn off responsive resize to make
sure that they work properly. Then once you've adjusted everything here
then you can bring the footer back up to sit flush with the bottom
of the section of the site and you can adjust the overall height of
the rapidive rectangle and the art board. When you've done that, you're gonna
get something that looks like this. Okay, we've got our main
section is full width now, and photo is back aligned with everything. And then I've also gone through here and once more adjusted all the aspect ratios,
the text boxes, etc, etc. And the other thing that you'll
notice here is that compared to the previous break point, the text
size has been adjusted because once we started getting down to this
700 pixel width, you can see that this heading here is a little bit
too chunky for this amount of space. It's taking up too much area,
and the same with this text here. Most of these headings
are a little bit too big. So we've gone through and reduced the
heading sizes of all of the headings and, like I mentioned before, each one of those text sizes has been
added in here as a character style. So that finishes up
the 700 pixel break point, I'll see you in the next video for
the 500 pixel break point. Hey, welcome to back to
Responsive Design in Adobe XD. In the last lesson, we set up this
700 pixel break point art board. Now, let's take a look and see where the layout starts breaking
down at a width narrower than this. So if we start shrinking down,
And round about here. Now, this is really starting
to look too cramped. I don't think that there's enough space
to really warrant two columns in the hero unit anymore. So what needs to happen, here, is this
image needs to be taken and put at the top of this hero unit area, and then this
content should be put underneath it. We're also starting to get a little too
cramped with this image slider here. There's not really enough room here for
five of these images to be shown. In this concept, the idea is that the
images will be sliding from left to right. So, instead,
we're gonna change this up, so that it shows three images
in this row instead of five. And then we're also going to treat
some of the heading sizes as well. So you can this text here is looking
a little bit too cramped for the amount of space in
the section one heading. These column headings are also a little
bit too cramped in, and this heading size, here, is looking a little uncomfortable,
too. And we're also getting to a point where
these columns that are in Section One are too thin. The text lines are starting
to look really skinny. There isn't enough words per line. So we're gonna collapse that down as well, so that we have just one
column in Section One area. And then the last thing that needs to be
adjusted here is that at 500 pixels this is probably starting to get a bit cramped,
too. And that could do with being
collapsed down into a single column. So, as we did on all the other ones, you
just need to duplicate the art board and make those changes. And when you do, you'll end up with
an art board that looks like this. So we've got the image for the hero unit
on top now with the content below it. So that makes it a little more
comfortable for that content to fit in. We've got the reduced size heading here. And, now,
we're stacking each of these features or whatever would be in this
space one on top of the other. So now there's a lot more words per line,
and that's gonna make that a lot
more comfortable to read. And our images, here, we've reduced
these down to having three visible in the row at a time, decreased the size of
the heading text in the main section. And we've collapsed our two columns
of little snippet items here down into a single column. So interesting to point out as well,
you can see that at this point, except for these three images, here, almost the
entire layout is now into a single column. So that's what we were talking about
before where as you have less and less width you're going to have fewer and
fewer columns until you get to the point where everything is just stacked
one element on top of the other. So now we've only got two
more break points to go. The next one is going to be at 400 pixels, and I'll show you what we'll be
doing there in the next lesson. I'll see you there. Hey, welcome back to
Responsive Design in Adobe XD. What you're looking at here is the 500
pixel break point art board that we prepared in the last lesson. We've only got a couple
more break points to go, so let's see where they need to be put. So once again, we're shrinking this
down to see where it starts to break. And I'm gonna say that it
starts to break fairly soon. This is something that happens
as the width decreases. You're going to need a few more break
points closer together at narrow widths. So here there's a couple of things
that I think need to be adjusted. One, if you look at the logo here,
this is now starting to be cramped, so we need to shrink this logo to make
sure that it can fit comfortably. We'll fix up this alignment and everything, that's just as the
housekeeping task that we talked about. There's also no real reason to
keep this in two columns now, so we're gonna take these images and
put them above this content. So everything in this section is
all collapsed to a single column. Here, there's not enough room for
three images, but I think that we can still fit two
images side by side fairly comfortably. We're gonna need to make some adjustments
to text sizes, again to the headings. And then if we look at the bottom, we're now actually starting to see
these elements overlapping one another. So we're gonna need to take
this copyright message and put it in the middle of the footer. And take this social icons and
put them at the bottom. So with all that done, we end up with
an art board that looks like this. So we've got our shrunk logo, everything
in this section has been adjusted. Just that house keeping type of thing. We've got all of the content
here is centered. So we've got the images centered,
and the heading is centered. And now everything is in one big stack so
that there's more room. Everything just here being reduced
to two columns instead of three. And one other adjustment is here. I've centered this button instead
of putting it to the left. And the reason is at this size
if this button is on the left, it actually just kind of looks like
it's supposed to be centered but it hasn't been done very well. So it looks a little bit more natural
if it's centered at this width. And then looking at our photo, everything
here is now stacked in a single column, with all of that content
also being centered. And now, we are just about done. Now we're getting down into the smallest
sizes that anyone is realistically ever gonna see your site at. We're already smaller than some fonts. You could arguably stop catering for devices at about 320
pixels if you wanted to. But what we're gonna do in this case is
you're gonna have a look at these sizes here and pick out the smallest one which
is the Apple watch at 272 pixels wide. So we're gonna put that final, smallest break point together in
the next lesson, I'll see you there. 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. Hey, welcome back to
Responsive Design in Adobe XD. We just finished producing a whole
range of break point based art boards. So that we have our layout fully
controlled whatever width it needs to be in. However, sometimes you're still gonna
wanna be able to create previews for clients or whoever else to show how this
design is gonna look on specific devices. So I've got the Apple
tool selected here and really I can pick any
one of these presets. So let's say, for example,
we might start with the Surface Pro 3. Now, I'm just gonna grab that and
move that around here. So as you can see, this layout is
already wider than our widest, so there's no really any
challenge to make that fit. So I'm just gonna turn
this into portrait mode. We can see here that
the width is 960 pixels, so what we wanna do is choose the bright
point layout up here that is just a little bit bigger than
the device that we wanna preview. So in that case,
this would be the 1000 pixel layout. So we wanna get into that layout,
select the wrap element and copy. And go into our device specific preview. And paste that content into the art board. Then we can just shrink it down to fit and because we've made everything
to be flexible and adaptable, that's all we need to do to get
that to fit into this art board. And the only remaining thing is to make
sure that the art board itself shows all the content that we have in here. So for that we just need to drag out
the up board to the right height. And now, if we hit this Play button. We have a preview of how this
is going to look on Surface Pro. So this is actually, little bit too large,
so I'll just shrink this down to show you. So that's giving us a preview
of our whole site at this size. And we can do that for any size of device
that we wanna show our preview for. So let's pick another one,
let's go with say the iPhone 6, 7, 8, and we're gonna flip
that one around as well. This one is 667 pixels wide, so let's see which of our layouts
would fit best into it. The 700 pixels layout out would go
pretty well, just a little bit bigger. So, we're just going to go in the layout,
select the wrapper, copy the content and then just
paste it straight into the iPhone. Shrink it that tiny bit to make it fit. And then just expand the art board so that it contains the whole design. And now, We have a preview of how
this would look on an iPhone. So that is all you're gonna need to do
whenever there's any requests to see how it's gonna look in any device at all,
you're ready to go. You haven't just designed for a couple of
devices, you've designed for everything. So now, you're really adaptable, and whatever anybody wants to see you can put
together a demo at a moment's notice. And that wraps up our course on
Responsive Design in Adobe XD. There is one more video I'm gonna quickly
summarize everything you've learned so you can come back and watch the final
video anytime you need a refresher on how to do responsive design in Adobe XD. So I will see you in the final video. Hey, welcome to the final video
in Responsive Design in Adobe XD. I'm just gonna try to cram everything
that you've learned into a nutshell. So whenever you want a refresher, you
can just come back and watch this video. All right, so first up, we covered a quick refresher on
what responsive actually means. It all boils down to just two things. And that is controlling your columns, and controlling the content
inside those columns. As for your overall workflow, you're gonna
really need to think about mobile first, because you really have to be thinking
about mobile always across all sizes. And you always need to be making sure
that you include both touch controls and mouse controls. And everything needs to be designed with
optimization and performance in mind. So of your overall workflow, figure out
the smallest fit that you're gonna have, and the widest width that you're
gonna have, and start at either end. But just make sure that you cover
the entire spectrum of widths in between those two ends. As far as the specifics for
Adobe XD, remember that this is not responsive development,
it's just responsive markup creation. And so you can't make things pixel
perfect like they are in the browser. So your job, your goal is that
you're trying to focus on by communicating to the coder where
the breakpoints should be, and how you want the site to respond
at every different size. You wanna also be able to communicate
to a client how things are gonna look on various devices. And you wanna do both of those things
in the most efficient possible way. One of the things that you can do is
use the responsive resize function. Which is a lot like
constraints in other programs, with the difference being
that XD will try to figure out which constraints you
wanna have applied to which elements. Sometimes it'll guess correctly,
sometimes it won't. So you just have to keep an eye on it and
tweak the settings as necessary. Basically, you wanna have responsive
resizing switched on at the artboard level, so you can have fluid rescaling
content inside the artboard. You wanna have it turned on whenever
you've got elements that you wanna have anchored on the right or the left, or when
you have things that you need to stay at a fixed size when their
parents are changed. And you wanna turn it off
when there are child elements of whatever it is that you're resizing,
that you want to remain flexible, like with a flexible column layout. In XD, you can use artboards to
represent multiple different widths. And you can also use those artboards to
test where a layout breaks, by setting them up so that the whole design will
shift as you resize that artboard. Within an artboard, you can set up an emulation of
flexible percentage based columns. While you're doing that, you can also use
rectangles inside groups to simulate all of the divs that are going to
make up the actual design. And these can also serve the function
of acting like guides, so you have something to snap to as you're
trying to position your content. And you also have something that you can
align your content relative to as well. You can use the repeat grids functionality
to quickly produce multi-column and multi-row layout elements in your site. But you'll then need to ungroup that
repeat grids area that you've set up and turn off responsive resize,
if you want that space to be able to stay flexible when you're
resizing the artboard that it's in. When it comes to working with text,
often you wanna take point text and turn it into area text, and expand the
bounds of the area that that text is in. And that will help it to resize
with the width of the page. And it's a good idea to add
a text style to your document for all of the different sizes that
you're gonna have your text at. That helps you to be able to easily reuse
that style in multiple places throughout your markup, and
it also helps to communicate to the coder what font sizes need to be
used in the style sheet. So then with that information about how
to use Adobe XD in a responsive context, you can go ahead and create a series
of artboards that represent each of the breakpoints that your
layout is gonna need to have. So wherever the layout needs to be
adjusted in order to stay legible, that's when you create a new artboard. So if you're starting from a wide layout,
as you go along, you're going to gradually need to collapse multiple column
layouts into single column layouts. So just keep going through, adjust
the artboards until you see a break. Make a new artboard, change up the layout. And then keep going until you've
covered the entire spectrum from your widest possible layout,
down to your thinnest possible layout. And that is everything. So I hope that helps make
the process of responsive design for mockups in Adobe XD a lot smoother and
straightforward for you. Maybe you even picked up a couple of new
things about responsive design in general. Thank you so much for taking this course,
and I will see you in the next one.
