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.