Hi. In this video we're gonna look at screen resolution versus  our actual pixel size. So this can be a little confusing when you are starting,  you're thinking, great, I'm gonna do a mockup  for an iPhone six. And you go off into Photoshop  and you go, all right, here's the dimensions. You Google it and it says it's this pixel width  by this pixel height. And you decide, all right, I'm gonna make that.

So I'm gonna go into Photoshop,  I'm gonna make a new document. It's gonna be seven 50 by this 1, 3, 3, 4,  and you make it, okay, you end up with this size here. Now this isn't the true size it's going to be, okay. Let's look back at that website here,  and we'll see that it's the CSS width that we really need  to observe when we are designing for mobile. Because we all know that mobile phones, apart from a couple  of them, are all very similar in size. Okay?

But what will happen is it's this pixel ratio here. You can see when it is one-to-one  that it is whatever physical size it is,  it's the actual size of the screen here. There's no real density. And if you've seen an old iPhone  three, you'll notice that the graphics aren't great,  but it's the physical same size as uh, an iPhone six. But what happens is when you get this denser pixel ratio,  the same physical size, we see it's doubled here. The actual pixels get a lot bigger,  but the actual size of the phone is exactly the same.

Okay? And you'll notice, like say this LG G four,  this one here has a picture ratio of four. So it's quite a small phone, okay? Same sort of sizes as the iPhone six,  but you can see it's hugely bigger in terms  of its physical width. But if we have a look at it here in comparison  with each other, they're actually not that different. Okay?

Slightly bigger. The iPhone six is slightly bigger,  but not a huge big jump as in this indication here. So that can be quite confusing when you're new. The basics are, is that when you're designing a Photoshop,  designing for this physical size will give you the best  representation of the actual phone rather than following  these physical pixel widths over the site here.