Production video - completing our mobile view

Alright, in this video were going to be at this one for a little while because were going to translate everything from our desktop to our mobile. You might be building mobile first, you might be doing the opposite, unpacking it and giving it space to work and use on a desktop. We’re doing it the other way around. So I've moved my first block along which is called box navigation and box hero so I'm going to get rid of copy, and I'm going to start working on this one here. There's lots of elongation that’s going to happen, there's lots of font sizes that I'm going to have to play around with and some alignment to do. So lets get into it.

So I'm going to zoom in, control plus. Use my space bar to move around, zoomed in a little bit too much. Great, first thing is I'm going to use, lets make this happen, go to the font size and drag it down. What I might do is get it to break onto two lines actually because its getting quite small there, I'm going to select it and bring it back up to a font size. It’s going to break down to that when its on mobile. This bit of lorem ipsum needs to come down and the box needs to get a lot smaller to fit in with some padding on the sides here. Its going to break to five lines, that’s okay, font size I'm going to leave as is, its set to 16 pixels which is a big enough font. When you're dealing with font size on mobile you need to really test, really. But as a guess, 13 is about as small as I want to go and 16 is quite a big font but quite legible and because this is a more sales kind of text so its happy to be that size. I'm going to make it just a tiny bit smaller, great.

Okay my more box is going to have to come down and this whole containers going to have to get bigger. So what ill do is, there's two parts to do, I've got my box which is the underlying, underneath my clipping mask there. Close that down to make it easier and I'm going to make this bigger first and you'll see that its actually way off the sides of the pages, its up to you, it doesn’t really matter for our mock up. But just to make everything a bit more useable I'm going to drag it in and its going to be about that much bigger. You might have to resize the bricks image as well or reposition it as well, depending on where you want it to be. Or scale it down. So I've used control T and I'm going to scale it down to fit so you can see a bit more. You'll notice that the blurs disappeared but when I click enter the blur will come back, eventually. Zoom in, I'm going to move both of these, I'm holding shift, click both of the more, move them around, that’s going to be the hero box moved across.

Next one is to deal with the who box, so I'm going to grab him, hold down alt while I'm dragging it across, move it across and where am I going to position it, I'm just going to start so I can see it all. So I'm going to put it up the bottom of the hero box I'm going to zoom in and how am I going to do this. What you're going to have to do is you're going to have to make some tough decisions when it comes to mobile. What’s going to make for a great experience and for me I've decided that I'm going to get rid of the word copy and I'm going to decide that actually these two are gone which is the rectangle and the image that sits over the top of it so I'm just going to use who we are, and the loren ipsum in there. So who we are needs to get smaller, so grab my type tool, click in here. I'm going to select it all and bring it down. Grab this one, move it in, I'm going to grab the loren ipsum, move it in. Use my type tool, shrink the sides in. and how close to the edge you want to get, I'm just doing it by eye, that kind of padding is going to work for me. Now this box is going to have to get a bit smaller, use my transform tool and what I might do is do what I did on the other box. Zoom out and just shrink it in so it’s a bit more appropriate.

Next one were going to do is the services box so I'm going to find my services box, there it is there. And I'm going to zoom out, I'm going to alt, drag it across, we may as well start, it doesn’t really matter where you start. Here we go, we've got lots to do in this one here. So I'm going to grab the purple box so its called box services, transform, that’s great. And were going to have to do some stuff with these icons. So first of all I want to get the icons to stack above each other then ill work on the text. So all my icons, there they are. Now these little boxes here, I'm going to twirl down just to make them tidy up. It’s the colour overlay so I'm just going to twirl it up. Its still there, it just means it looks a bit more prettier on my layers. I'm going to select all of them and what I might first do is actually just scale it down a little bit. So I'm going to use my transform tool. How big, that’s probably a little small because I want to stack them on top of each other, so I want them to be roughly about there. Enter, now what ill do is, you can see my ones are flown all around the place in terms of my document, where are they, there's one there, there's one there. It’s because I was dragging them around, they ended up in different art boards and that’s one of the common problems with this new art board system. Occasionally what you have to do is re-drag them just to get them back into the same place. I'm just going to drag them back where it was, they all group back.

So I've got my print, I've got my app there and my photography then the video. So the app one is going to go there, go underneath and the photography one, where is he. There he is, all the way over there. And then the video one. it’s quite good to be out this far when you are dragging icons that are a little bit lost in the art board because you'll notice before if I undo that before I started dragging it. It appeared up there and if you zoomed in too close you’d never see it and id never know which way to drag it.

In terms of lining them up, I'm going to go print is going to be about there and ill grab all of these guys and there's an option here that says align and they all line up. In terms of distribute centres there's this option here, now it never works perfectly distribute centres. You can feel if I zoom in, for me that feels like those gaps are even but this one here is a lot bigger so even though you have done that I'm going to just make them a little bit bigger. I'm going to make video, tap him down, go to photography, tap him down. I'm tapping them down using my keyboard and the app I need to tap down as well. Great, now comes the text.

So I'm going to keep print, I've decided in this case that the lorem ipsum down here, the text, is actually going to be too small to be useable in this field I'm going to be using just the high level bits of text. So loren ipsum, loren ipsum… I'm going to bin. So I'm just going to use these three. Sorry, these four and to try and get them all on screen, I'm going to left align them. There they all are, what ill do is print, move up, move to over there, photography move down, video, move down. In terms of the size, they're pretty much determined by this photography one, that’s the largest of the gang and he hangs off the side so I'm going to do a couple of things. I'm going to select them all, move them across a bit. I'm going to grab all my icons, push them across a bit. Back to my print, move these guys across and I'm now going to grab my type tool and because I have them all selected I'm going to be able to change them all the same. So, I'm going to click and hold and drag and I'm going to make sure they're all left aligned, go back to my move tool, line them all again on the left, go back to my type tool, in terms of font sizes. Actually back to my move tool, move them all across, that’s about me for the sizes. I'm happy with that, it’s at 23 pt. and it all lines up, it all fits, there are nice clear distances between them to be able to tap them, to jump to the services pages.

Next is going to be portfolio, now you'll notice in my desktop view, I've got quite a big set of portfolios so we've got 8 different blocks. What I'm going to do is I'm going to hide half of them when it gets down to mobile. To give it a good sense of what we do but not have this epically scrolling page because I'm going to have one box stacked on top of each other, you could try and do two, they're going to be quite small. I prefer in this case to do one so I'm just going to do four on top of each other and exclude the other four. So what were going to do is move them across to here.

So first of all what I'm going to do, instead of dragging the whole bunch of them across. I'm going to drag them over one at a time to make it a little easier on myself. This one here is up in my desktop view, this is under my portfolio and the first thing I want to do, I think its right down the bottom here, is here the box portfolio which is this coloured box in the background. I'm going to hold alt, if you drag it across, line it up, transform tool, get him in there. You'll notice that my mobile view is too short so I'm going to grab my artboard tool, click on it once, if that doesn’t work, you’ve got to click the edge actually. If that doesn’t work though, you just click the high level list here on the navigation. Drag it right down, how big is this going to be. It’s probably going to be a little longer than my actual desktop view. When you're finished just go back to the move tool. So how big should this coloured box be? Quite long. It’s going to fit all my portfolios in there. So lets go up, we've got, what we do is portfolio one, I'm going to drag him across. So I've selected the box underneath and the image that’s clipped to it and I'm going to hold down my alt key and drag it across. That’s that guy. I'm then going to grab two, I'm going to alt drag it across. I'm not scaling them yet, ill try and do them all at the same time. Three, ill drag it across and then four, ill drag him across. So they're all in here, now what we need to do is transform them all to be about the same size. So I've selected them all, in here I click the bottom one and hold shift and clicked the top one and it sets everything in between. Lets use the transform tool and hold shift to make sure its all perfect and I'm going to get them up to a size that looks like its going to fit. Around, nice and big to fit in mobile view. So now I just need to line them all up. So I'm going to grab number two, zoom in, and hopefully get them to snap together or at least line centered. I'm going to grab portfolio three, line it up to be centered and the same thing for portfolio four. Great. I'm going to make sure that this is a little bit shorter, so it fits everything. I've been moving them around quite mechanically, if you want to join them up so that you can do things like distribute centers, because if I select all of these and do distribute centers its not going to do what we want. It shifts the boxes separate from the images so what you need to do is select each of them, right click them or if you're on a mac or a macbook pro with no right click, hold control on your keyboard and click them and go convert to smart object. It sticks them together, its kind of like grouping but what you can do later on if you want them to be apart again you right click and there's one that says edit contents and what happens is watch, Photoshop edit it. It opens up a separate tab with these little two guys by themselves. That can be a little bit confusing when you're new so only use smart object when you're a little bit more experiences with Photoshop. Smart object, these guys, convert to smart object, great. Now they're all locked together I can now use that distribute centers.

Lets look at the next bit which is our teams. So I'm going to bring these across, so I'm going to actually bring the whole thing across, the teams box and I'm going to drag it across. Holding alt, bring it all the way across to mobile view. Start with this first one, moi. Then in our team box, what I might do is group all of these guys, so I've shrunk them all. I'm going to go to group and this one here is my box, call it box portfolio. And box team copy, and in here we've got, well grab developer, john smith and where’s our face, so there's our team circle two, I think that’s all the bits. Great, I'm not going to re size this because it fits nicely in mobile, although I'm going to have to make the page even longer, remember clicking the edge and zoom out and I'm going to make it really big. Go back to the move tool and what I want to do now is find Jane the designer, Jane smith and she was team three. Bring her across, there she goes. Zoom in, and make her little, looks like I've left off the bit of text for our man here so where is he. He is john smith, where is that text, bring it in. what I might do is make the text a little bigger, so were kind of stuck with Daniel being the longest one, well do Daniel Jane smith and john smith and well grab my type tool and drag them a little bigger. That works. Daniel still fits in there. Lets go designer, developer, founder and lets maybe make it up to 20, just to make it a little more legible on mobile and then grab all the twitter handles, lets grab and from 17 lets put it up to not 240, lets just do 24. Back to the move tool, tap them down a little bit just to make it a little easier for mobile.

Great, everything is in its little boxes, lets have a look at our contact form so I'm going to select contact form and in desktop view, I zoom out hold down alt, drag it across and start with all of these guys, okay. Grab the green box, green box needs to get bigger and less wide. Now all of these guys, so there is form name, form email, form iPhone, I'm going to transform them and zoom them in a little bit. What I might do is bump them across just so we use as much space as we can. I've selected them all, transforming them all in one go means they're all going to line up and then what are we up to. Were up to form message, so I'm going to have to grab form message. Drag it down, transform him, to line it up with these guys. Grab message, he’s around there somewhere, line it up with these guys. These are all probably a little too far to the left now. So I'm going to grab you, email, name, phone drop you across, there and last thing is the submit button, I forgot to name it, this is going to be my button click the submit, and what I might do for this one is just make it the full width. So, select just the button, make it wider. Submit button across, shrink down the green bit. Awesome, that’s going to be my form.

Last bit is the footer, if I zoom out I've got my footer there. So I'm going to grab my footer, there he is there. Alt drag it across, ill start with that side, grab these icons, move them across. Great, make the footer a little bit taller and not so wide. And what else have we got, social icons and there was something else, there it is there the privacy and pieces. So I zoom in, great. So I'm going to make that, I might break that into two lines and make the font look more legible on mobile so that’s probably too big. Lets just make it 16, its not super important. Lets get it down to a nicer size. Transform my footer, make him the right size. And now lets get my artboard in and just get him to snap to the bottom there. Back to the move tool, click off somewhere else. See that little bit of white line there. I'm going to tap that up. Excellent. That is my mobile version, now this is a pretty quick mock up of our mobile layout.

Now this video was really a how to make a mobile version, if you want to look up why you build different things on mobile verses desktop you want to start looking into the world of user experience or UX design. You'll also have to start working with the website and prototyping it so you can see what it actually looks like on the website. Its one thing to design it in Photoshop and it’s another to see it working on a mobile device and the different kinds of mobile devices. Whether it’s a really big Huawei G7 like I've got or one of the little mini Samsung’s that are around. You'll need to play around with both of them to make sure that your site is actually useable. Last things ill do before I leave this version is I'm going to tidy up my folders. So I've got my footer, he should be in there. My submit button, that , that, that, that should all be inside my contact form, and there's all my buttons with my mobile dropdown that can all be turned on and off.