7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 27Length: 4.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Designing the Homepage for Medium Screens

In the previous lesson, we finished the homepage design for a desktop screen or a screen with a very large width. But what about smaller screen devices like tablets and smart phones? Well, we have to create designs for those as well. If not for all pages, at least for the more essential parts like the header, the footer, and kind of figure out how the element, how the content will fit inside these smaller screens. So that's what we're gonna do in this lesson. We're gonna start by creating a new artboard, or actually, you know what? Just to make things easier for us, we're gonna duplicate this existing artboard. And I'm simply gonna change its name here from Desktop to Tablet. And the size that we're gonna design for is actually a tablet width, 768 pixels. So what I'm gonna do is drop a guide at 768. Pixels, something like that. There we go. And that's gonna allow us to resize some of these elements so they fit a smaller screen. Now, first things first, the top bar. The top bar, if we're gonna bring in the navigation like this, you can see that it does not fit. Let me just zoom in here. Yeah, so the navigation does not fit. So what we're gonna do on screens the size of a tablet, which is 768 pixels and below, we're gonna get rid of that navigation. And instead, we're gonna use an off canvas navigation. So, I'm sure you've seen it before. You tap a button, and navigation just slides out, normally pushing the content to the right or to the left. But there are cases when that panel that slides out is kind of an overlay, it goes over the content. In our case, it's gonna push the content to the side. So, what we're gonna do is get rid of this menu. I'm gonna resize the menu background. And I'm gonna center the logo right here. And then I’m gonna create the toggle off canvas navigation menu button right here. So for this, it’s actually quite simple, we're going to use a button that's 45 by 45. I'm gonna position it in the middle, vertically. And I'm gonna leave 15 pixels from top, bottom, and left, like this. Next, we're gonna create a symbol. I'm gonna call this Hamburger button, or actually let's call it Button/ Hamburger, because we're going to be using a hamburger icon. And inside, we're simply going to place an icon. So for the icon, we're gonna go back to our Icon Font, Ionicons. And I'm gonna search for, lets see, navigation, or nav. Okay, so we need to use this one, ion-navicon-round. So I'm gonna place that in. I'm gonna convert it to outlines. I'm going to choose just a pure white. Let's say I'm gonna scale this, so its biggest side is 20 pixels. I'm gonna center that and see if it's perfectly centered or, not quite. There's a bit of a gap here, so I'm just gonna do that. And I'm just gonna nudge it a little bit like this. So now it's perfectly in the middle of my hamburger icon. So I'm going to just add a background color, so we can see this better. I'm gonna hide this layer. You can delete it if you want, but I'll leave it there just in case I want to add a background color in the future. Yeah, so with that done, we've actually finished the hamburger buttons, that simple. Now with this, I'm going to create a symbol, I'm gonna call it Top bar small screens. And there's actually a little bit of adjustment that we need to make. First of all, this logo, what we're gonna do is, just to make sure this is always in the middle, we're gonna set fixed width and fix height. And also for this button, we're gonna pin it to the left, give it a fixed width and a fixed height. So now, I can very easily resize. This entire group and the items are gonna stay exactly where they need to. Next up is this page header. Now the page header will also be smaller but we're starting at 768 plus 120, sorry, minus. So 768 minus 120, and that's gonna give me the correct size width, 60 pixels of margin on the left and on the right. Now, I'm simply going to align these in the center. And because we're on a tablet, because we're dealing with a smaller screen, I'm gonna reduce the vertical padding that I have here. Currently, it's 120, but I'm gonna decrease it by 30 pixels. So, now we have. 90 pixels on the top and 90 pixels on the bottom. Next, is this content. Now, because we're gonna use a very smart grid, this content will automatically wrap on the next line. So if we say, I want three columns on the large screens but only two columns on a medium screen like a tablet, then that content will wrap automatically. So just to make thing easier for us, I'm gonna delete some of these items. And I'm just gonna show you, using four items here, because we want to organize these in two columns. Now, the spacing between columns here is also 60 pixels on tablets. So we do need to make a different calculation for the size here. So, for the size, we take this as a base, 648 pixels, and also 648 minus, we have 30 pixels on the left, 30 pixels on the right. So that's 60 minus 60 pixels which is the gap between the two, that gives us 528. We divide that by 2, and we get the correct width of one column which is 264 pixels. So we're gonna apply this on all the elements. So 264, I need to apply to these. Here, we have to push these down a little bit more, because we have three rows there of text now instead of two. And we'll do the same for these. And then finally, we'll push these down, so we have a total margin bottom of 60 pixels just like on the desktop sites. Okay, now the content, we're gonna place it at 90 pixels from that separator over there. So now, we should have a distance of 90 pixels from the edge of this link to the edge of our page. But it seems we do not. We have 13 extra pixels. So I wonder how that happened? Let see this. Okay, so this is actually nudged 76 pixels. This should be 90 here. I probably just nudged it by mistake. Okay, let's do another test, 89 pixels. Okay, that's close enough. One pixel here and there, it doesn't really make a difference. And for some reason, this was launched, let's see if that's also the case here. And yeah, it is, yeah, I must have accidentally nudged it a couple of pixels. Okay, so now we have a margin of 87 pixels on the side instead of 90. No big deal, don't waste a lot of time trying to get this pixel perfect because you're gonna get, actual pixel perfect when you do the CSS. Now, let's see about the footer. The footer, first of all, I'm gonna bring it up until it's 90 pixels away from the actual content. And I'm gonna start by resizing some of these rectangles here. So I'm gonna grab all of them, I'm gonna set their size to 768. And then I'm gonna bring the social icons to the left. And actually, you know what? I'm gonna center these, well, like that. I'm also going to center these links. And just to make things easier, let's group them together, group and then center. And also, I'm going to increase the size of this footer, because these icons are gonna be at the bottom. This logo on the top, and this, below the logo. And this is natural behavior for a grid, right? So we have, on the big screen, we have logo, one column, text, another column, and all the way to the right, we have the navigation icons. But when these columns become stacked, they go from left to right. So this will be stacked first, then the text, and then the social icons. So let's actually align these. Okay, and let's set proper distances for these. So I'm gonna use, I think, 15 pixels there. Or, no, let's use 30, give it a little bit more breathing room, and also, maybe 30 from that, and 34, the icons. And finally, increase the size of this bit, so we have 30 pixels of padding on the bottom. And then just. Nudge this back in place. Finally, all we have to do is select this entire artboard, change its final width to 768 pixels, remove that vertical guide, and also remove this space here at the bottom. And now we have the tablet screen for the start page. Now, we have to recreate this page but for a smaller screen. That's coming up in the next lesson.

Back to the top