Hello, beautiful people. And this tutorial we're gonna make our mobile version. You can see it's a little bit different. We've done lots of left aligning and columns in mobile. We're gonna break it down. We're gonna remove some boxes.

You can see we're, we're missing  some, we're missing some lines. And we've gone for some centered bits. And probably the main bit is our lovely okay. Mobile menu or our nav sandwich or our hamburger menu. So let's go and build that stuff. Okay, so similar process is the tablet we're gonna work on.

I'm gonna lock the artwork and unlock background  so I can move this across. Okay? And, um, I'm going to select all of these pieces,  hold alt, copy them across, try and get them to snap. If they don't, you're gonna have to work at it afterwards. So I'll select all three of these and try  and get 'em to snap in the corner. Still not wanting to snap.

I always find if you zoom in, it wants  to snap a whole lot better. Okay? My problem is, is a couple  of these aren't quite lined up now. They're looking good. Cool. All right.

So, um, what's probably gonna be,  it's gonna be a lot shorter. Um, um, I know this  'cause I've already kind of mocked it up  for this tutorial, right? Because you are probably gonna do this  on the fly as you're working. I'm just gonna make it a little smaller 'cause I know. Now remember resizing, this one's a little bit weird, okay? If I just grab the corner, it's kind of actually gonna work.

In this case you can see it resizes it,  but if I do some weird stuff like  that, it makes it long and skinny. Okay? So what I might do is hold shift. So I get to about there, I want it to resize down. Then I gonna double click, click on the outside,  which is the kind of clipping frame. I'm gonna drag him in to match that.

And then I'm gonna grab the inside of this  and just kind of move it along. Um, yeah, so it fits. I'm gonna scale it down a little bit. Cool. All right. Double click the background to come out.

And we've got our nice little faded background. This guy needs to be adjusted. Okay? And this one's gonna be a lot longer, I assume. Ah, we'll have to adjust  that when we get down to the bottom there. Go lock the background, unlock artwork,  let's start shuffling it across.

Probably the biggest change in this case is going to be  how the menu's gonna work. We've only got two buttons, so we probably get away  with just having buttons,  but not many people have just two buttons. Okay? So we're gonna use, uh,  a hamburger menu or a nav sandwich. I need to turn on my guides. Now remember, we're using only two of the columns instead  of the whole 12, just so that it's not going crazy.

Um, when we're trying to, you know,  we haven't got columns everywhere. So what I'm gonna do is, a couple  of things is the logo's gonna have to shrink. It stayed the same at tablet,  but I'm making the decision to shrink this down at mobile. Okay? So it's gonna have to get smaller. How smaller, just so I can fit my nav sandwich in here  so it doesn't get too, um, yeah, too bad.

You can switch out logos to different formats. That's, that's totally possible. In HTML you can hide one kind of logo  and you might have a different stack. Maybe a, maybe a, um, you know,  something stacked on top for mobile. Okay? But for the moment there's my little nav  and we're gonna draw our nav sandwich.

Now the nav sandwiches is those three stripe lines. It's become the like universal, um, you know, thing  for doing nav sandwiches, okay? Or mobile menus. So it's just three stripe lines at this case. Um, your developer  or you as a designer when you're building it in say  Dreamweaver or something else, can  manipulate this pretty easily. So I've drawn a line, I'm gonna make sure I'm gonna use my  off white, okay?

And I'm gonna make sure it's nice and thick. How thick. Remember go command one  to look at it at actual size rather than trying  to zip be zoom. You see, I thought there was an okay size at  that size when I was zoomed in. That's obviously too, too wide. So I'm gonna do three pixels.

I'm probably gonna tighten it in. And again, it's really hard to do that from way out here. So we're gonna zoom in again and I'm gonna tighten this line  in holding shift while I'm tightening it in. Just make sure it stays in a straight line. Okay? Oh, and with it selected, I'm gonna hold alt,  drag 'em down, drag 'em down.

Okay. How's that looking full screen? Yeah, it's about right. And,  and what I might do while I'm in here is just  to make sure they're all equal distances apart, okay? Is the distribute vertical okay? And they're all fine.

Nice. Put it in there. Great. You might like this one. You might like the rounded corners at the end. Okay?

So this one's got kind of flat ends and that's what I want. 'cause it kind of fits everything else  that I've done in square ridges. But see, you're a roundy edgy person. What you can do is you can select on these  strokes here, okay? Open up your stroke panel. Where is my strokes if it's not open, okay,  there's my one there, but if you can't find it, go to window  and go down to strokes.

Okay? And what you're looking for is this caps here. We've, at the moment, it's on the  unfortunately named butt cap. Okay? But you can switch to round cap  and you'll notice that it just kind  of like makes them look roundy hamburger menu up deep. Okay?

All right. So mounts great  and I can probably get away with  my logo being a little bigger. Okay? On mobile, don't want it to be too small. Actual size guides off. Yeah, looks fine.

Okay. Next is, I'm gonna do something quite  different in terms of the layout. So I'm gonna grab these, well, I'll grab,  I'll grab this group first, okay? And I'm gonna copy 'em across. And what I'm gonna do is I'm gonna group them together  and I want it to be centered on this art board. Okay?

So we kind of looked at it a little earlier, okay? So we're gonna go to our window,  we're gonna open up a line, okay? Move it down here. And I want it to go center. But what I want do is I want you, my friend show options  and I want it to align to the art board. So I want you to be center to the art board.

If I hadn't grouped them first, watch what happens. I group them, they all kind of go centered. That's not what I want. So I group them together. So command G or control G on a PC or right click group  and just make sure I'm gonna learn it  to the outboard center. Cool.

He's gonna go at the top there. I'm gonna keep the font size the same. Mm, I think so, uh,  this bit here, I'm gonna copy him across. Okay? And I'm gonna bottom up to the edges,  but what I'm gonna do is I'm gonna make  sure the font size comes down. It's very easy to change the font  size when you're a web designer.

Okay? So I'm gonna do that. I'm gonna make it centered and I'm gonna grab my black  arrow line tool. Don't need a line this. 'cause I've used a line, um,  with the text up here, so yep,  he's gonna be the center there. And how small?

Yeah, maybe just a tiny bit smaller. There we go. Nice. All right. Uh, next bit the line  and I'll, I'll bring this whole little gang in at once. Hold down alt, drag him across  or you can copy and paste them.

And what I'll do is actually  what I might do is turn this line off for mobile. It's one of those weird quirky things  where I've, I played around with it before. I didn't like the line. Okay? So I'm gonna group all this together, all see,  all three of these are grouped. Um, and then I'm gonna make sure it's a line  to our board center it  turn my columns off.

Yeah, I feel like this is maybe a bit too big a font. So I'm gonna select it all  and maybe move the font size down to something  a little bit smaller, little changes like that. The, um, the, the web developer  or yourself will be able to kind of check it,  but if it doesn't look visually different,  they probably won't go and check. So you might have to make a note to go, um, to make  to yourself to make sure you indicate to them that  that's actually just a font size smaller, okay? And they'll complain. They have to write extra CSS just  for one little font size, but  that's why you're a designer, okay?

You get to make the big or tiny font decisions. Alright, great. Um, I probably trimmed this up a little bit at the bottom  mainly because it's not lining up. So I'm gonna unlock the background. Grab him. Yeah, there you go.

Nice. All right, so, um, next thing I want to do is save it  and let's look at how we're gonna do with these thumbnails. Okay? Now, up until now, we've done, we did stacks of,  we did three columns, then we did two columns. And this one we're gonna do one column  as per our wire frame. Now I've got my wire frame printed off next to me  and I'm just kind of copying that as I go.

Um, so what I'm gonna do is grab one of these guys,  move 'em across, turn my guides on and line 'em up, okay? Stretch 'em out. And the weird thing is, is  that he's actually the biggest he's ever been,  um, on mobile. Weird, huh? Like desktop. He's actually the smallest and he is a little bit bigger on  tablet and he's the biggest on mobile.

And now, um,  you can see there's lots of decisions being made on mobile. A lot of people will design first for mobile. It's not my, been my experience that it's, yeah, it's better  to work with the most used, uh, screen,  which is in case desktop. So we've worked him out and he is how wide? Okay. Three, nine.

Nine. Okay, so I'm gonna grab him  and I'm gonna go, oh, actually I'm gonna bring all  of these guys across so I'm shift clicking them  all, all come across. Might jam them over here in the art board. Gonna grab these two, okay? And because they're linked 3 9, 9 0.5, awesome. I know we did them separately before,  but when they're all lined up on top of each other,  you can change the width  'cause they're all lined up next to each other.

All right? Now it's a matter of stacking them. We gotta copy that stack from tablet. Nice. Uh, you next, who's next? You are next.

We're totally running outta space. And what we're gonna do, just  'cause I'm gonna turn this into a web design tutorial  as well, we're gonna use Dreamweaver to make this,  rather than just designing it,  is we're gonna actually turn these two off just so  that the page is not like this epic scrolling  massive mobile version. And so that it loads nice  and fast on a mobile in case people aren't in  like wifi range. Um, and I do it mainly so  that I can do it in our web tutorial  to show you how to turn things on and off. We'll turn that line on and off and we'll turn these guys on  and off using CSS. Okay?

So, okay, so we've got these adjusted  and we'll bring in our, um, footer over here. So we might have to extend this down a little bit. You how far? Not sure my background. Oh, background wasn't locked. Naughty camera a bit lower.

Lock the background. Grab you three. Okay. Bring 'em across. And  what I'm gonna do is I'm gonna get the social ones  to, I'm gonna group them together. So command G or Ctrl G on a pc, it's line to outboard.

I'm gonna send to them. So they're send it in there  and I'm gonna stack these. Okay? That's something I can do easily in, um, H TM L  as well, is I'm gonna maybe group these guys. I'm gonna group them so that I can send them on the app  board and then I'm gonna drag 'em down. I'm using my keyboard  shortcuts just to get it down in this case.

Um, oh, they weren't grouped,  so they're all just kind of overlapping each other. So undoing back, back, back, undo, undo, undo. There they are. Okay. Now, right. Click them and group them.

Now if you centered them, they shouldn't  stumble on top of each other. Nice. Tidy up the art boards  and that, my friends,  as our mobile version unlock him. Okay. When you are doing this, it's probably not gonna,  like, this is something I've  designed previously for this tutorial. You'll spend, like, I do an amazing amount  of time nudging this up, moving this across,  changing those colors, playing with that font, okay.

To get it all looking how you want it, okay? So don't be afraid if you've got three  or four versions of your mobile  because it's the hardest one to do. Um, but that my friends is, yeah,  our little responsive web design. All right, let's move on to the next video.