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.