All right, in this video we're gonna look at mobile design. And probably the most important part when looking at building a mobile site is probably the navigation, how you get round. Because the limited space, you can't have our big menus like we have on our desktop view. Knowing which one to pick can be difficult. A really good site here is this, um, access web do net site. It's an incredibly long link.
So use the link on the screen now to go and find all the different useful links everywhere. Now we're not gonna have a chance to go through them because there are so many different ways of considering mobile menus. But let's look at the kind of main groups. This one here where we've got this thing called the burger or the sandwich. The nav sandwich or the three horizontal lines, whatever you wanna call it. This thing here, clicks and the whole site shifts to the right.
Okay? And this menu appears. There's another option here where they stack. So you can see here, this is the desktop view, but when it gets to mobile, they stack as nice big buttons on top of each other and with some other ones. This one here, I like just the burger by itself. When it clicks, there's a dropdown menu from it and there are lots of different options.
Have a look through the site. There's, there's a crazy amount to pick from. They all kind of flavors. A similar thing. Um, the big thing to decide is whether you're going to burger or no burger. So like Smashing Magazine, we looked at this earlier.
I watched this, if I collapse this down, they've decided no burger. They've got this word menu and that's totally cool. But you can see even in my Chrome plugin, they've used the burger lots do lots don't. It may be a fad. I think it's probably around to stay as a nice new icon for mobile menus. Let's go and build one.
So what we're gonna do is we're gonna start with the mobile site. So we're gonna get started building a couple of parts of it, okay? Dragging parts of the desktop across and then rebuild the menu. So the things I wanna start with is the navigation here and the hero box. So I've selected both of these by holding command and clicking both of them or control on a pc. What I'm gonna do is click hold and drag.
Okay, but holding on the al key first click and hold and drag, move it across. Kind of get it centered. This over here, okay? Line it up and you'll notice that they've all moved to my mobile version. Okay? So I'm gonna zoom in.
There's a lot of work to fix it up. Okay? So I'm gonna zoom in a bit and what I wanna do is, I'm gonna have to use this. So I'm gonna go to my navigation box and the bring your own laptop logo. I'm gonna move across, I can't see it 'cause it's over this side here, but I know if I hold shift and drag it across, it'll move along in a nice perfect line there. You guys are there.
Perfect. And my hero box needs to come up a little bit. Lovely. Bring your laptop. It's gonna be there. I'm gonna move it up to be centered.
And this navigation though is gonna disappear 'cause services just doesn't fit. So I'm gonna turn that off. I'm gonna draw my three horizontal lines. It's really easy. Just use the rectangle tool. Make sure your fillers set to white.
I'm gonna have my stroke set to none and I'm gonna draw. You could do it with a line tool as well if you wanted to do it. I find it's just easy enough to use their rectangle tool and make them feel like lines. It's a bit big. So I'm gonna zoom in. You find if you are nice and close when you're working on it becomes a little easier to work with.
If I'm far out and I'm start dragging these lines around, they seem to snap, but it's a lot easier when we're close in. So I'm gonna hold down alts and draw my burger. You can see here my smart guides. It's telling me that it's matching the distance away from the top one, from the bottom one. Great. Now the burger's quite big, so I'm gonna select all of them, transform them and scale 'em down a little bit.
Maybe make them a little shorter. Okay? So that's my mobile burger menu. Great. What I'd like to do is when that button is clicked, I'd like to overlay all of this stuff here with a new div tag that appears. So I'm gonna use the rectangle tool and I'm gonna draw a nice big rectangle for my menu.
And I'm going to put it inside. I'm gonna give it a color. I'm gonna give it a color. I'm gonna use purple. Now I'm gonna use a little bit of transparency. There's no reason you have to, just looks kind of cool.
So I'm gonna change it down to 90% just so you can kind of faintly aware, see the stuff behind it. Um, so when it slides down, you know that it can be potentially slide back up and it's not a new page. So let's look at doing some naming. So let's put my bringer laptop in the navigation menu. Okay? And this one is gonna be Navi, uh, box navigation.
What I'm gonna do is I'm gonna start a second one, okay? And this one's gonna be called mobile drop down. I am gonna keep everything separate. So I'm gonna grab the rectangle tool. Is that my rectangle? That's it.
I put him in there. I'm gonna grab these three guys. Okay? And these guys here are my burger menu. What I'm gonna do is group them together, okay? Or link them.
The gee way to do that is to right click them and convert them into what's called a smart object. Okay? And I'm gonna rename it, I'm gonna call it burger menu. Okay? I'm gonna slide that up into mobile dropdown. Great.
Now I've got that. I've got that. What I'm gonna do now is I'm going to switch out my burger menu. So I'm gonna have two. So this is burger menu, um, inactive, active, and I'm gonna have a second one, which is going to be my burger menu active. 'cause what I wanna do is do what I've done in this site here, where if I scale this down, okay, we get down, okay, this is what I've done on my New Zealand site where I've got my burger and I click it and there's a little cross to know that you can click it and close it afterwards.
So let's switch back to that. Alright? To create it, I could use a few different tricks. The easiest way I find to get a perfect um, perfect cross is to click once, have a plus. I don't use X because X X's don't they look like X's? They don't look like a cross.
Okay? So what I want is a plus on its side. So I'm gonna use plus and some fonts don't look great and they're using this technique because they're quite stylized pluses. So er of regular is great for this one. And what I wanna do is transform it. So I'm gonna use my command T, okay?
Or Ctrl T on a pc. I'm gonna rotate it around say 45 degrees. What you'll find is that click apply. It looks like a nice good cross. I'm gonna scale it up a little bit. Control t, make it a little bit bigger just to match my navigation burger.
Cool. And this is going to be, I'm gonna copy that and I'm gonna paste that here. Here's going to be Active. So what's gonna happen is that's gonna turn off, they're gonna switch between each other. Okay? Actually, what I might do to make it clearer for the web designer is that I'm gonna put the burger menu, okay?
In the actual navigation itself. So when people turn that on and off, it's kinda behind there. And this guy's at the front. Next thing I need to do is add the text. So I'm gonna grab my type tool and I'm gonna click and drag a box out. And I'm gonna type in my bit.
So it's gonna be services I'm gonna do in caps. I'm gonna do Portfolio, I'm gonna do team, and I'm gonna do contact. I'm gonna select them all, change the font, dragging it down. I'm gonna use Myo, I'll use Roberto, Use Roberto Light. Okay? Now what you wanna do is make sure that there's enough space between these words.
You don't want to have people clicking one and inadvertently clicking the other. So a good bit of line spacing is great. Mine's got it by default because I've been playing around with it already. Um, if you grab your type two and select everything, what you wanna be looking for is, let's click on this icon here. Bring up your character panel. This option here, yours is probably set to auto, which is 20 eight's.
Probably gonna be about 30 in terms of the line spacing, I'm gonna crank mine up to about, uh, 60. Okay? You, depending on the font size you're using, what kind of font? Um, it's up to you. Now that's gonna work for me. That's gonna work for me actually maybe even a little bit bigger up to 70.
Just so there's a nice big gap between them. So big Fat Fingers can click on them really easily. This is gonna be my nav dropdown, okay? And I'm gonna scale that up using Lovely. So that's going to be my dropdown notification. Now I need to go through and transfer all the things that I've been doing desktop and make them work on mobile.
And we'll do that in the next video.