Transcripts
1. Introduction: Hi. I'm Spencer. I'm a web designer here at Skillshare. I'm actually part of the team that designed the video that you're watching the scene right now. So, when you're browsing, looking at your own profile, uploading your project, that all was touched by the design process that I and the other designers do here. In this quick class, you're going to learn the basics of creating an adaptable grid. Adaptable meaning that this grid is going to contain all the elements of your design and whether you're looking at it on a laptop, a tablet, a phone, everything is really going to adjust accordingly to a grid at any screen size that you pull up this website. With a few tweaks, you can usually adjust the design you already have to fit within a new grid that you make. But you can also just use the skill set that you have for any fresh designs you may come forward. This really be put into a grid. You may hear grids and think that grids are limited, that they are going to constrain your design, but that's really not the case. Grids are an underlying visual system. They're not the visual representation of what you're creating. So, a really simple grid is going to work for anything that you create whether it's clean, complex, whimsical, even your snow flake of a design. Not that long ago, Skillshare was not responsive and not looking good on phones, which is a problem because nowadays a lot of people are accessing the web on their phones, on their tablet. What you see in this class is it's not that unapproachable, it's not that hard to do. So, I'm actually going to show you the process of what we did of taking the home page and adjusting it to fit into the grid that we created for Skillshare.
2. Preface: Why Responsive is Important : So, here we have the Skillshare marketing homepage from sometime last year, and this is shown right now at 100 percent and that's the only way it was designed. It was designed for the desktop, for a laptop. Rightfully so, it looks pretty good at this size. You've got your shear at the top, main call to actions, wants you to become a member from here, or you can click to learn more, and get more details. Then we have some sub-sections below. So, those are mostly made up of images, text link, which is the title, some sub copy below that, and even the same for the community section, video, press, and we've got a footer at the bottom with a bunch of links in it. If we zoom out a little bit and let's say that we're pretending that now this is scaled down and fitting on a tablet. It's not that bad scaled down at this size, it's not ideal, but none of the elements really are that small. So, you can still read the text, the button still feel pretty big, images are still nice, you know what you're looking at. So, overall, it kind of worked, not a deal breaker. But if we go over here and look at mobile, so this at 100 percent. So, what I did here is I just took the previous design and scaled it down, which is what would happen. So, you've got your design which is about a thousand pixels here, and I think it's a little bit more and we scale it down to about 400 pixels wide, which is going to depend on the phone that you use but just the way that illustrator renders it, it's even harder to read, but you can kind of get the idea of button size and the text size, that text is really small and hard to read. Those texts links before and the buttons, no longer very legible, can't really tap them very easily, and it's really hard to understand, you need to zoom in to really do anything or read anything on this page, which is not an ideal landing experience. So this, the homepage, was actually our most visited page on mobile. Almost 20 percent of our visitors to the homepage were coming on a phone. Kind of rightfully so. This page from Mobile had over 40 percent bounce rate and what that means is that, people who were visiting the site from a phone were immediately leaving at a much higher rate than desktop. With that, the amount of people who were doing what we wanted them to do from this page which is become a member was really low. Much lower than desktop and that's because you don't really see the call to action very well, you don't come here and really understand what you should do or what Skillshare's trying to tell you. So, we really knew that we needed to optimize this page for mobile or you guys would keep leaving. So, we embarked on creating a responsive grid system throughout the site, that would be adapting all of our old pages, like this one, to new grid and use as a basis for every new page that we designed moving forward. In the next video, I'll explain a bit more about what a basic grid is.
3. Project: Design a Homepage Responsively: So just briefly, before I get into talking about grids and breakpoints, I want to talk about the quick project you'll be creating here, which is to fit or design one page of a website into a responsive grid. So, if you have a website right now that's not responsive, let's fix that, let's do that project here. But if you don't have a website, or you don't really want to work on your website, I understand that, we could pick the website of your favorite restaurant. Most restaurants have websites. They're pretty simple but there's surprisingly not responsive. Even a big chain like the Olive Garden. Sorry, Olive Garden, not my favorite restaurant, has a simple website, not responsive. Step one is so easy. You should just do it now. Five minutes tops. Grab a screenshot of the website you're doing as is, whether it's your own website, the website of the restaurant you want to do, or a design that you've put into place but haven't even built yet. Grab that screenshot, upload it to the project gallery, and that's step one. The final project you're going to share for this class is going to be to take that one screen you decide to do and you're going to upload it at three sizes. So, there's going to be desktop, tablet, and phone, and it's going to work within that grid.
4. What is a Grid System? : Here, I have a pared down design kind of a wireframe. Actually it totally wireframe. As you can see I put a grid on top of it. So, this is the 12-column grid that we use it Skillshare, and it divides the space horizontally into these units called columns. The columns are the white wider bits. In between them we have the gutters. So, these 10 lines and gutters really just are there to provide even spacing between columns. Of the content that you see which is the text and the images, those are contained within the grid but can vary by width. So, obviously, they're going to take up more than a single grid column. This text here goes all the way across all 12 and these images are broken up into smaller units of four columns each. That allows them to have three images fit into one row. These columns are going to shrink proportionally with the content inside. So, as we move out here, as we get to a smaller screen which intel makes a smaller tighter grid, so doesn't make a huge noticeable difference of how it works. So, you'll see a lot of the texts has dropped to this third line, because the text size hasn't changed just the amount of space we can display it in has changed. But it's a bit more obvious when you look at these smiley faces side-by-side, how these smiley faces in the smaller screen still taking up four columns, but the four columns are now not as wide. What happens with the text below as this is contained as one unit is text similar to what we saw before drops down. It's actually dropping from two lines to three, which means that all the content that would sit below that will just get pushed down even further. Now it happened that the page so generally when you take a page like this, and you make it a little bit less wide in a grid, the page becomes a longer scrolling page. So you may be wondering how do you decide on your grid system. What size, and how many columns and that is a good question. So, let's scroll right over here. This is just a display that shows that generally the more columns you have in your grid, the more layout options you have. So, right now, this is a two column grid. So, if we look specifically at the smiley face objects, you can see that you have two layout options, four items within a row. You have a full width which is going to take up both columns or you can put an item in each column. So, what you have here at half size. If we turn this through column grid into a four column grid, you're going to get a lot more options, because as you can see, you keep the same options of full width which is now across four half, which is now across two, and we get these guys. So, now you have individual columns which are half the size of what it is in a two column grid, and when you have multiple columns, you can make things bigger and smaller within the same row. So, whether you want to treat it as a primary section with something secondary side or mix-and-match the layout a bit, you have that option. So, this is going to grow exponentially as you add columns into your grid. We ended up going with a 12 column grid on sculpture, we played around with a lot of different options. So, this what we have here is actually a grid with 12. We knew we wanted design that was divisible by two, three, and four. So, here we see it divisible by three, so that we can have rows with family items and have variety of if we wanted smaller items, we could put four images across and have them be three columns each, and so on. In the next video, I'll show you how we tweaked one of our designs to fit into this new 12 column-wide grid system.
5. Creating a Grid: So, now let's look back at the homepage design that we saw before a few videos ago, and on top of it lay the grid that we saw in the last video. So, what we're going to do now is show how we can tweak an existing design. Sometimes pretty easily to this grid so that we can make it work responsively, and at smaller screen sizes which as we saw this homepage doesn't currently do. So, the top two sections are actually pretty good. We actually designed this grid based around these existing pages which are at 9:30. So, it's going to look at first glance like everything fits within it pretty well, how stuff aligns to the outer grid here, and here on the right. We don't really need to adjust these buttons or this text, I'm not going to. I don't think that every button needs to be up into a gutter and that everything needs to be spaced the width of a gutter, I think that would actually look a little bit weird in this case. So, going to leave that alone and just know that as text wraps, we'll hit a break-point, which I'll talk about a little bit later, that I'll adjust the buttons when it gets to a certain size. So, this we can leave alone at this size and the same for this. So, this we looked into but because we have a grid of 12, and we have a row of three, it already works. It fits within the grid, they're spaced 30 apart which are these gutters. So, this section for right now kind of already done. However, when we get to this piece, we have a row of five items. Which doesn't work because, 12 is not divisible by five. So, because these items don't have gutters between them, when this grid were to shrink, they wouldn't be spaced correctly. So, we have a couple options here. We're seeing this, we can say that we can go to a row of six projects, at another project here which would mean making this guy smaller and having it be two, but that creates a bit of a problem. So, aside from being pretty small, you can see that with certain names and followers, it's going to create a problem. I really don't want this to flow to the next line and go much taller than these images. So, I don't think having it be two cons y is going to work. But, if we go to three, then we actually have more room than we have now for names and metaphors. As this grows in this pushes down, this will push everything else down below it. For speed sake I'm not going to go ahead and do that, but as you move things down just to make sure that everything moves accordingly. But as you see here, with this being three, we can't fit five items that are three columns wide. So, one's going to have to get cut. So, we're going to go down to four, which in this case, I think is okay. If you don't think four is enough but want to keep it this wide, you can say that you're going to have two rows of projects and have eight projects. So, I'm going to go ahead and delete this, and through TV magic, I'm going to pull this which I made before, and are ready to go. I'll do drop it in like so. There you have it. Now you can see that they're spaced by the gutter, and you can imagine as this shrinks, gutter stays same. These will all work proportionally together in this tighter grid. We're going to go ahead and do the same for this row of five. So, again, let's just say that four is good enough for us and we're going to take one out. So, sorry TechCrunch. Like you a lot. But you just don't fit right now. So, we would go ahead and make these all rows of or three columns wide. There you have it. This section now fits within the grid. For this guy below, we have five. In this case, and in all of these cases you might want to discuss the UX of what's important to keep, you might want to reconfigure things to fit within this grid, make a larger change, but I think for us right now we're okay taking out subjects, because those live within the schools. Now, even as links the same way that as these cons get smaller, this is going to close in on it, and they're just going to get closer together. So, let's have these align to these grids. It doesn't have to all be aligned under the same grid when you have four columns, but I think it looks nice it keeps it pretty simple. So, that's how I'm going to make it work here. There you have it. Now what once was not contained properly within a grid, with a few simple tweaks. This might have been easier than some other pages that are out there. It fits really nicely within the grid. Everything is contained in the column, space by a gutter that needs to be. Like I said before, these are not. I think that if this had a gutter space between it, it's actually too much. I think that much space between the image and the name, looks bad. So, under the unit, I'm really not that worried about it getting smaller. There we have it for this. In the next video, we're going to talk about breakpoints. Breakpoints are how grids adjust when necessary based on the width of the screen that you're viewing.
6. Live Breakpoint Demo: Now, let's do a little live demo. So, on the Skillshare site, Skillshare.com/classes, I'm going to show you, just by changing the width of the browser, this grid shrinking in action and break points. So as I make it smaller, you could see we're still in breakpoint one, but images are getting smaller proportionally, gutter stays the same and is keeping them separated. You can see the text below in these units starts wrapping. Pretty soon, you see it wrapped to a third line. So, none of this is really considered a breakpoint, but it is still pushing content below. If you were to come to the site with this big, it looks good. If your window is this wide, it still looks good. So, the content is really fitting itself to the window that it's in. Once we start looking at some breakpoints, so you can see quickly, it drops to a second line, so that's a minor breakpoint you put in there, because we didn't want the belt to overlap with the search bar. But here, you see it going to tablet. So, in tablet, the menu changes. We have hamburger menu in both places. So before that, we had My Classes and the bell there. It goes inside and it may seem a bit early but it's still generally good to keep as few breakpoints as possible. It really simplifies the design, it simplifies the development of it, and it works all the way across to mobile. So, moving into tablet, we see a couple of other changes happening like the rail that existed on the left side, which had all these hovers. Now, it's removed and put on the top. It just made links, which makes sense because you don't need rollover states on a tablet because you're just tapping it, so you can actually get the rollover state. You also notice that the gutters change to 20 pixels. Because these items are smaller now, we generally like to keep them a little bit closer together and think it looks a little bit better as a grid. If we continue even smaller, we will soon hit mobile. So, mobile there are a couple other changes that happen. So, we have made that at the break point, the title smaller, and we've center-aligned it. So that's a small change that we made there. We've also made these options wider. We made it full width which is nice and mobile. You want things that we want you to tap like buttons or menus to be a bit bigger because your fingers are a bit fatter than your mouse cursor. No offense. We've also moved to a one-column grid. So, these images are actually quite a bit larger now, but it's a much simpler view which really suits itself much better for mobile. So, now, we could look at another website example, which is The New Yorker. I just found a random article about sea turtles. If you scroll down, you'll notice, we know that there are much more columns, and two, but they have generally two sections so they have the article and the images, and then the right section which has their advertisements and links to discover different articles. So, if we start making the window a bit more narrow, you can see a small break point where the nav items become smaller, so that they fit comfortably in this new thinner window. The title is a bit smaller, and it gets smaller still so that it fits with the advertisement there. But generally, no major changes have happened to the grid seemingly. Once you go a little bit in more, then you see it turn to a major break point which is one long column. So menu has gone away and become a hamburger, similar to what you saw in Skillshare. They handle it differently. The title is now center-aligned, simplified from what was across two areas now brought into one. This feels more like one general section. So, the stuff that they had in the right, like the advertisements, they now include in that main content section. So, if you see it even gets smaller still. They just have the text wrap as these columns get smaller. They generally keep the advertisement the same. I guess, that's just the constraints of the images they have. They don't want to get this text to get too much smaller because it's an image. Where this, they have a little bit more wiggle room with how it gets treated. Scrolling down, before, where we saw on the right side the most popular section, they took it out and added to the bottom. So, that again, pretty major change within a break point, you can do small things like change some sizes, keeping it in place, or you can do major changes like cutting it out of one section and adding it to another. A lot of this is going to be judgment call based on the content. I wish that I could say there is a right rule and a right way to handle this, but it really depends on what you're doing. So, I recommend you to actually, if you're doing this project on your own website or when you do this project in the class, to go to different websites, play around. It's as easy as widening and making smaller browser and see how a bunch of places do it.
7. Determining Breakpoints: Breakpoints are widths that you set in your design. So when your browser becomes the width of your breakpoint, it gets thinner, you load it on a tablet, you load it on a phone, or even if you expand your browser to be wider. This is going to force a larger change in your greater layout to make it fit the new width better. So, example changes can be changing the size of your gutter. So, in the desktop version 3.1, we have and 30-pixel gutters and in the tablet version, we have 20-pixel gutters. Part of that is just proportionally we thought that it looks a little bit better so you can see the smiley face images. The images are larger than they are on this tablet size. So, when you have a larger image like this, giving it a little bit more space between makes sense. But, when things are sized a little bit smaller, if they were 10 pixels farther apart, it might actually look a little bit too far apart. But that also comes a bit out of need for us, and we just set a rule that in our grid, the columns are never going to be less wide than the gutters. So, with this 12-column grid and having gutters of 30 pixels, the grid has a minimum of 750-pixels wide before these columns start to become thinner than the gutters, which we don't want. The same thing happens at breakpoint two which is our tablet version, but that's at 500-pixels wide when the columns become the same width as the gutter which we don't really want and then we break down to mobile. On mobile, we actually reduce the number of columns and we make it a six-column grid, and that also just tends to lend itself to mobile screens where and mobile things are just really simplified. So, we've actually made the buttons larger so that it's easier to tap. We've simplified the layout from this row of three to one single column piece. With that, you can even see that you have six here and it takes up a nice size at two rows, but when you lay them all out singularly, six becomes super long. So, another thing that you could do at a breakpoint is actually update or remove content. That could be whole sections or it could be images. So, and something like this if we add six here at these first two breakpoints and moved it to breakpoint three, I would probably actually cut three of these out and say, we're only going to show three images. I think that a length like this, for mobile, fits more appropriately because presumably, you might have content below that this is going to push down and you don't want your mobile page to be too long of a scroll, but, of course, that depends on what your content is. Other changes are navigation. So, here you can see we have a lot of room between the search bar and the community tab. But as it starts to gets smaller, when the search bar closes in, we can set a breakpoint to say, "Okay, at X-pixels wide, let's say, it's 800-pixels wide, the search bar gets too close to community so, let's drop this down to the second line." We could say, "When this gets too close so we probably wouldn't want it any less than this and this right now is- what is this at? This is at 610 wide". So we could say at 610 and under, let's move to a hamburger menu which is this collapsed state. So, all of these items would just be hidden under here and then that can get as small as it is shown here. With all of these changes, you can have different breakpoints. You have multiple breakpoints in one design to say that, at a different breakpoint, you're going to drop to a second line of navigation then you would change to 20-pixel-wide gutters. Generally, it's good to keep them to as few breakpoints as possible. It's just generally a great guide to not have to keep track of too many, but really it depends on your content so, I guess talk to your local developer about what's possible. For our next video, going deeper into breakpoints, we're going to take a look at some live breakpoints in action. So, that's going to be a Skillshare site and a site difference at Skillshare.
8. Conclusion: Just wrapping up. I remember when I was researching, learning about grades, the difference it made when I was actually creating them and playing with them versus reading about them. So, I really encourage you to take a stab at this class project. Take a look at the project guide, I've even posted an example of what are Skillshare Grid is. Not saying you have to follow it or necessarily you should follow it based on whatever content you have. But, that could be a really easy jumping off point just to see how we do it and how you might want to do it also. Don't hesitate to ask questions in the discussion section. Also, it's a great place to leave links or share any insights you have from doing this yourself or you've done in the past or learning it for the first time through this class. I really look forward to see what you guys come up with. I'll be in the project gallery, poking around, leaving comments, so show me what you got.
9. Explore Design on Skillshare: way.
Spencer Schimel, UX/UI Designer, Teacher, and Mentor
