Lessons

Lesson Info

How Wide for my Website

Hi there. This video is all about working out how wide your design should be. Okay. So we're doing website but this works for mobile devices as well and apps, how wide should my first page be? There's some easy tricks to work it out. Let's get started now. Alright. I promise you would get started and we are kind of let's open up XD. And the first thing we need to do is work out what to start with in terms of page sizes. So we're gonna be working on a web first design. Okay. Because all of our users at least existing company are using the, using the product via the website first and only small percentage of using it via mobile, you'll have to decide on your product and what you're doing. Yours might be mobile first. You just start with this for this particular course. We're going to work with mobile and then build an app but you might be working just with an app or an ipad app depending on what you're doing. So to get started with, just always pick this one to get started with this 9 w...

ide. Okay. And we're going to change the size as we go along. So just click on this and it opens up a page. Let's save it. It's gonna file. It's gonna save, I'm gonna put mine on my desktop. I'm gonna make a new folder for it. And this is my instructor. HQ mm hmm mock up. Okay. That's the folder that's gonna go into. If you're on a pc, there's like a new folder icon at the top or just dump it on your desktop. Now if you are in a Mac and you can't see any of that because you're like, oh it looks like this. Click on this little arrow here, you'll be able to see a lot more of the details like favorites and click on desktop. I've made a folder. I'm going to give this file a name. I'm gonna call it instructor. HQ. And this one's the mock up and this is going to be the 1.0. Give it versioning numbers like this. Okay. And when you make teeny tiny changes, maybe spelling or just a little bit of changes you'd call it. You? Re save it as .1 and if you make big fundamental changes you call your change that kind of hole number there. Okay. It's just a good way of keeping track of where you're at. Especially if you send versions out to a client and they're like, hey, have you done this? And you can double check they're looking at the right version and not like out of date version. Cool. Save It. So in terms of the page width. Okay, this is, it says 1920 it's the pixels across the width and that is too big for our website at the moment. Let me show you what I mean. So let's check out this website here. So you can see it stretches to the edge but there's a kind of an internal boundary. That's why we use 1920 which is kind of like the full width of the screen that I'm using. Okay it's a really big screen and really common really large size. And but within here we've got some like internal boundaries. Can you see everything kind of lines up within that little gap there like this one as well. You can see the color stretches to the edges and but the nav background does but not the inside part. So there are some sites that do the full use of the screen which is really cool. What we can't do at the moment though is within XD to see this one here responds. Can you see the justice as we work along? We can't do that next day. We just have to pick a size and design for it and then later on we can adjust it for the different breakpoints. But really we can't make this happen until the website actually gets coded and done. So we need to pick a size and how do we do that? Let's jump back into X. D. So it's 1920 pixels across. So within here we need to put some boundaries, how wide should it be? There's a couple of good ways to check. So one of them is under W three schools dot com. This site here is just a handy resource for web design things if you type in browsers. So slash browsers And if you come down to browsers display, you can start looking at things like in the whole wide world in January 2018, what is the most common size? So in here this is a really common size to be using at the moment. It changes all the time. It's going to jump up to that eventually. But at the moment This is the kind of really common size. You can see 32%,, 34% even of the world. Use that size. The next comment is this. So if you hit this size and it all fits within this kind of width, Okay. It means it's gonna look fine on this, but these lower sizes, it's not going to quite fit in. But you can see the percentage is getting quite low. Now you need to decide who your clients are. So look at your persona. Remember our guy Dave, I want to say Dave can't remember, we just gave him a name. He's a technology person, he's going to have probably this size screen. So we're going to say this and above, you know, if we use the size that's going to cover everything, he's not going to likely have any of these lower ones. But you say you're working with, you know, a site that is maybe a developing countries that don't have not up to date screens. You might go for something like this. 10 24 is another common like there's a smaller size that you want to go for. The other thing you can to double check is and if you're working with a client who already has a website and you can ask for them to check out their google analytics. So I've asked for access to there's okay. So um I looked at the analytics and they gave me a sign in. They can give you like a view only access so you can't mess around with their stuff but you can have a look and what you're looking for is going to the audience check out their technology and I'm gonna look at their browser, wait for it to load. You can see they're all using chrome. Okay well at least 67% of them. What I'm looking for a screen resolution here, you can see a large percentage of them are using this 1920 you can see this 13 66 a good percentage of them. And then it kind of you can see this size here. Okay. That kind of fits with in between these. Okay, so 1400 pixels across. So if I do this size it's gonna capture this this this this this because they're all you get some smaller ones in here down to 4%. So if you've already got stats check it. The other thing you might check is and if the client comes and says yeah let's really work on this website. You might find that really you should be working on either the mobile version first or a mobile website version first or an app. You can check if they've already got data like this. You can go into things like mobile, look at overview, You can see in here a huge majority of this particular website, 88% are using desktop. So if the client comes to me and said, look, let's build this mobile app to refresh the site or mobile version of the website, I'd be like, oh, let's look at doing the desktop first because this is where everybody you might want it to be mobile. But really the, you know, majority of people are using it this way. You still might end up going this way, but at least gives you some data to actually talk about rather than looking at hunches and as well, if you're going to be testing on a product and see, you know, how well this mobile phone is going and click on devices and we'll tell you like you can see a huge percentage of them are using an apple iphone and you can do some sneaky stuff by looking at screen resolution in here to decide like what version of the iphone people are using. Often this can give it away all the iphones, new iphones, this will be an ipad. Um yeah, So all right. So we've decided we're going to use the size of 1366. So we're gonna jump into XD and put that in. Okay. So what we want to do is we want to keep this 1920 across because we like to design, I guess with this this extra stuff, this is the final thing we're going to be making. We want those extra stuff on the side here because Designing within the 1316 can be really tight and I'd like to see what happens with the flow on the outside. So what we're going to do is just set up a column in the middle here to give us that visual guy that's just kind of like light blue thing here. So let's do it. Have the outboard selected. You click on the name at the top. That's the easiest way. Okay, click on the word here. And what we want to do is over here where it says grid click on this and where it says layout. Okay, where this dropdown is, we're not gonna use square. It's done more for mobile app design. We're gonna use layout because we're doing the web one Now. In terms of the columns, I'm not sure what's here by default, but what we're going to do is the easiest way to get it exactly what you need it to be is we're going to say we want one column. You can click on any other box. You can see we've just got one kind of big column here. We can say I want this column width to be 1366. I'm going to click on any other box. And what it's done is it's worked out. The padding here on either side is 277 either side. And what I'm gonna do is I'm actually going to work within this wire frame just to this. I just want to know where those edges are and that's it. I'm going to leave it there. You might be working to a grid system, Okay. And you might be a designer working two grids or you might be a web designer and you know, you have to use a framework that uses like a set of grids. It's just handy for consistent layout. If that is, you now change it back to 12. So do this thing first, get it the right with and then divide it by 12 columns, clicking the other field. Okay? Or tab out and you can see it's just gone through and added a nice little grid. This doesn't export okay. It doesn't preview in any of the devices, it's just here. So when you're drawing things out and you're trying to line things up, you can see it snaps to it and it means you can start doing things where you get some consistency across. So everything fits within this grid system, we'll look at it a bit more when we get into the kind of high fidelity part of the course. So what I'd like to do though is click on the name, I'm going to turn mine back to one, make sure it's set to 13 66. And what you might find is that sometimes the numbers jump around. It's because the divisions are quite hard to do. 13 66 math wise is quite hard to divide by 1920. So you might find this changes a little bit. So I'm just gonna force to be won by 13 66. I'm going to make it my default so every time I make a new page it's going to jump to this, The next thing we want to do is just the view ports height. Just means remember when we looked over here and analytics we we looked at technology actually just jump to this one. Remember the kind of default display size was there? It is 1366x768. Okay, so that's the kind of initial view or view ports height just means when somebody opens up the website on their screen they're only gonna see they're not gonna see 1000 and 80 pixels. They're just going to c 768 and that return and that little imaginary line here, it's not imaginary. It's there. But that line there doesn't print as well, doesn't come out, it's just there to show you this is your above the fold, this is your stuff that people will all see based on if they are using that screen. So you gotta make sure all your call to actions above here or your hero images are above this line here. Anything below here. Okay, potentially has to be scrolled to see now. What we're gonna do is a bit of navigation. Okay? So the basic navigation before we move on is zooming in and out. There is a tool over here which I never use. Ok, click on it, click once you zoom in, hold down the option key on a Mac or the volcano Pc and click once and it zooms out. What you'll find is you'll never use it because you'll use the shortcut now. We're not going to go into too many shortcuts but there's just some that are just the tool is too hard to use. So on a Mac, hold down the command key so look down your keyboards, the apple key and hit the plus on your keyboard and then I'll zoom in. Okay if you hold down the minus, so Comanche down, hold minus it zooms out. Okay, so plus plus plus zooms in command minus minus minus zooms out. If you're on a pc, it's similar, you hold down the control key so look down, grab the control key and hit Plus plus plus to zoom in and minus minus minus to zoom out. The other thing we need to work out is how to move around. Unlike some of the other adobe products, there's no kind of scroll bars here, so look down the keyboard, grab the space bar key, hold that down your hand turns into a little hand. You click hold and drag it around so give that a go hold space bar, click hold, drag couple more things before we go because we're looking at the grids here, they're quite dark. Okay, It's hard to design over the top so you can click on and see this little colored box here. It says columns, click on it once and you can pick a different color if you like. I'm going to leave mind whatever there was, I can't remember what it was row vaguely this color, but I'm going to lower the capacity of it. Okay, so you might pick a different color, different Hubei dragging this around now, I've really messed it up. Okay, and just lower the opacity so there's a hint of it so I know where the edges are but it's not interfering too much with my design. Getting in the click out to other things I want to do zoom out a little bit, remember your shortcut command minus or control minus on a pc click on the name and what that does is it gives you the kind of overall settings for the outboard. That's what this is called the big empty page. What I wanna do is I want to be able to see the bottom slider here and make this quite long because we're going to add lots of bits and pieces to it. You'll end up changing this depending on your content, but I just want you to make it nice and long now. Plus what we want to do is rename the art board. So you do that by double clicking it here. Okay. And just deleting what's in there and I'm going to call this one home page home page even And I might give it the pixel width just to help the developer later on. Everybody knows that that's how white it is. I often do that. Okay. Just because the actual pages 1920 across, but I wanted to say, look, that's what I'm designing for here. Nice. Let's save it file save. I'm not gonna do this long version anymore. I'm going to start using some of the easy shortcuts, like command s on a Mac or control s on a pc and we're ready to get into the next video. Alright, Let's jump over