Design the mobile website

Alright in this one were going to look at mobile design and probably the most important part about looking at a mobile site, is probably the navigation, how you get around. Because the limited space, you cant have our big menus that we have on our desktop view. Knowing which one to pick can be difficult; a really good site here is this exisweb.net site. Its an incredibly long link so use the link on the screen now to go and find all the different useful links everywhere now were not going to have a chance to go through them because there are so many different ways of considering mobile menus, but lets look at the main groups.

This one here, we've got this thing called the burger or the nav sandwhich or the three horizontal lines whatever you want to call it. This thing here clicks and the whole site shifts to the right and this menu appears. There's another option here where they stack, you can see here the desktop view, but when it gets to mobile, they stack as nice big buttons on top of each other. Where’s some other ones? This one here I like just the burger by itself when it clicks there's a drop down menu from it. There are lots of different options, have a look through this site, there's a crazy amount to pick from, they're all flavours of similar things. The big thing to decide is whether you're going to do burger or no burger.

So smashing magazine we looked at this earlier, watch this, If I collapse this down, they're decided no burger, they’ve got this word menu and that’s totally cool but you can see in my chrome plug in they’ve used the burger. Lots do, lots don’t. It may be a fad I think its probably around to stay, as a nice new icon for mobile menus. So lets go and build one.

So what were going to do is were going to start with the mobile site, so were going to get started building a couple of parts of it, dragging parts to the desktop across and then re build the menu. So the things I want to 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 going to do is click hold and drag but holding down the alt key first click and hold and drag, move it across, get it centered ish over here. Line it up and you'll notice that they’ve all moved to my mobile version. So I'm going to zoom in, there's a lot of work to fix it up so I'm going to zoom in a bit. And what I want to do is I'm going to have to use this so I'm going to go to my navigation box and the bring your own laptop logo I'm going to move across, cant see it because its over this side here but I know if I hold shift, drag it across, it'll move it along in a nice perfect line. Perfect. My hero box needs to come up a little bit, lovely. Bring your own laptop is going to be there. I'm going to move it up to be centered. And this navigation is going to disappear because services just doesn’t fit so I'm going to turn that off, I'm going to draw my three horizontal lines. Its really easy, just use the rectangle tool, make sure your fill is set to white, I'm going to have my stroke set to none, and I'm going to draw. You could do it with the line tool as well if you wanted to. I find it’s just easy enough to use the rectangle tool, make them feel like lines. This bits big so I'm going to zoom in. you find if you're nice and close when you're working on it, it becomes a little easier to work with. If I'm far out and I'm dragging these little lines around they seem to snap but it’s a lot easier when we’re close in. so I'm going to hold down alt, and draw my burger. You can see here my smart guide is telling me it’s matching the distance away from that top one to the bottom one. Great, now that burger is quite big so I'm going to select all of them, transform them and scale them down a little bit, maybe make them a little shorter.

Okay so that’s my mobile burger menu, great what id like to do is when that button is clicked id like to overlay all of this stuff here with a new div tag that appears. So I'm going to use the rectangle tool and I'm going to draw a nice big rectangle for my menu and I'm going to put it inside, I'm going to give it a colour. I'm going to use purple and I'm going to use a little bit of transparency, there's no reason you have to. Just looks cool, so I'm going to change it down to 90% just so you're kind of faintly aware and see the stuff behind so that when it slides down, you know that it can be potentially slid back up and its not a new page. So, lets look at doing some naming, so lets put my bring your own laptop in the navigation menu, and this one is going to be box navigation. What I'm going to do is I'm going to start a second one and this ones going to be called mobile drop down. And I'm going to keep everything separate so I'm going to grab my rectangle tool, that’s it and well put him in there. I'm going to grab these three guys and these guys here are my burger menu. What I'm going to do is group them together or link them, the easy way to do that is to right click them and convert them into what’s called a smart object. I'm going to rename it and I'm going to call it burger menu and I'm going to slide that up into my dropdown. Great.

Now I've got that, I've got that, I've got that. What I'm going to do now is I'm going to switch out my burger menu so I'm going to have two so this is burger menu inactive and I'm going to have a second one which is going to be my burger menu active, because what I want to do is do what I've done in this site here. Where I scaled this down we get down, 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 lets switch back to that, alright to create it I could use a few different tricks, the easiest way I find to get a perfect cross is to click once, have a plus. I don’t use x because x’s don’t, they look like x’s they don’t look like a cross. So what I want is a plus on its side. So I'm going to use plus, some fonts don’t look great using this technique because they're quite stylized plusses, so Arial regular is great for this one and what I want to do is transform it. So I'm going to use my command t or control t on a pc. I'm going to rotate it around say, 45 degrees.

What you'll find is its, apply, it looks like a nice good cross. I'm going to scale it up a bit. Control T, make it a little bit bigger just to match my navigation burger, cool! And this is going to be, I'm going to copy that, I'm going to paste that here. He is going to be, active. So what’s going to happen is that’s going to turn off, they're going to switch between each other. Actually what I might do to make it clearer for the web designer is that, I'm going to put the burger menu in the actual navigation itself so that when people turn that on and off its behind there and this guys at the front.

Next thing I need to do is to add the text so I'm going to grab my type tool and I'm going to click and drag the box out and I'm going to type in my bit so its going to be services I'm going to put it in caps, I'm going to do portfolio, I'm going to do team, and I'm going to do contact. I'm going to select them all, select the font, dragging it down. I'm going to use my Roboto, I'm going to use Roboto light. Now what you want to do is make sure that there's enough space between these words, you don’t want to have people clicking one and then in avertedly clicking the other so a good bit of line spacing is great. Mines got it by default because I've been playing around with it already. If you grab your type tool and select everything what you want to be looking for is, lets click on this icon here, bring up your character panel, this option here. Yours is probably set to auto which is 28, its probably going to be about 30 in terms of the line spacing, I'm going to crank mine up to about 60. Depending on the font size you're using, what kind of font, its up to you. Now that’s going to work for me, actually maybe 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 going to be my nav drop down, and I'm going to scale it u. Lovely, so that’s going to be my drop down navigation now I need to go through and transfer all the things that I've been doing desktop and make them work on mobile and well do that in the next video.