Now the most popular solution  to handle different browser sizes at the moment is the grid  system and of the grid systems,  something called Bootstrap is by far the most common. Now whether you are using Bootstrap  or any other way to build your website,  you're probably going to be using the grid system  and that's what we'll use in our Photoshop document. The grid system allows designers  to work from a base 12 column grid. Designers can span any amount of those columns  to suit their website. Let's take a look at this example grid system here on  Edward Robinson site. You can see it up here.

It's called  responsive grid system.com. Now what you'll see down, if I scroll all the way  to the bottom here, it starts at a base columns of 12. Now I'm yet to see anybody use exactly all 12 of them  unless there may be bullet points or lists  or something similar. So what tends to happen is design is end up  spanning a few of these columns. Down the bottom here you'll see  that it starts at a base level of 12 columns  and at the top here you can see we can span those. We can easily span those 12 columns, say six of them  and six again to carve our website in half.

And this is a really nice way. 12 is a really nice number  'cause we can cut it in two thirds and quarters  and sixth all very easily using the 12 column grid. This is another example here on Edward's site. You can see couple of uh, example layouts for responsive. Now this intro page here, forget the heights, okay,  'cause the heights are really short. But see the different cutups in terms of the navigation.

You can see here this is where my logo goes  and this other chunk here, this other two thirds um,  would be where my navigation goes. So this is span it all  and this might be say a rotating  carousel like they've got written here. These are feature boxes all carved into thirds. Okay, so four columns. Four columns, four columns. And then my footer would be spanning all three.

You can see here's a couple of different examples of ways  of cutting out websites. So I've switched here to the Photoshop file  that you can download as part of the exercise files. Um, if you haven't done that, do that from the link below. Otherwise you can create your Rome pages. Now what I've done is watch this. If I got a view and I got a show  and I go to guides, you'll see  that it's been cut up in two columns of 12 with a bit  of padding in between them all.

So I've done it for desktop, tablet, and mobile. Now you'll notice here on mobile,  the mobile doesn't actually have 12 columns like  the tablet and desktop. We do this because 12 columns on such a small size becomes  this dense mass of columns  and nobody actually cuts a mobile site up into  12 distinct columns. Now when deciding what pages  and what sizes they should be,  you can see the desktop here is nine 60 pixels wide. When you're deciding what size desktop should be  and tablet to B and mobile two B,  don't get too caught up on actual pixel dimensions  'cause there are so many different screen sizes,  it's impossible to group them all together into  one exact pixel size. You pick a generic size that fits mobile desktop  and tablets that are common at the moment  and that's gonna change as time goes along as well.

So be prepared for in a couple  of years when screen resolutions are all changed  or there's a new kind of Fity desktop mobile version  that you might have to go through  and design a separate style to accommodate that screen size. If you are looking for exact dimensions to get started with,  then you can download the Photoshop template that I've got  and the resources or if you're using say Bootstrap,  you can go and check Bootstrap to see  what the media breaks their views. Okay? What they can consider mobile is  what they consider tablet is. So if we go have a look now I'm over at  [email protected],  I'm in the slightly preview version, okay? And version four at the moment we're up to version three,  but version four will be out really soon.

So we'll be using that for this course. Click documentation, then go down to layout and pick grid. Now if I scroll down here, I'll get to one. This one here says grid options. You can see here here's my small case, that'd be mobile  and portrait. Then I've got small,  which is considered phone at landscape medium tablet large  is say a laptop screen  and extra large is a really big say IMAX screen.

You'll see the sizes here are written in this uh,  measurement called REM, which is a root M. If you've never used this measurement before, don't worry. Essentially you take the 45 and you times it by 16. 16 is considered the default size in a browser. So 45 times 16 gives us seven 20 pixels. And if we go back to Photoshop, you'll see  that I've used seven 20 pixels for this tablet.

Now when we get up to bootstrap five  and bootstrap six, they'll go and adjust these things. Depending on what the most common sizes are,  they might get bigger, they might get smaller,  whatever's really popular at the time. So that's a good place for us to start  for our Photoshop mockup. Now what I've done for you here as well is  that these guides can be a little hard to work with as well  because they kind of stretch past the pages. What I've done in here is say you're working on your desktop  view, you can toggle this layers down  and you'll notice in here I've got this one called  helpful column guides. If I toggle that down, I've laid out a couple  of basic column grids.

So watch this. I'm gonna turn my view show guides off  and I prefer to work this way. Say I'm doing something that is meant to be three columns. I'm gonna click this on my three columns  and it's just the transparent background so  that I know when I'm working with my document, okay,  I am dragging it around and I know I'm working within these  three columns here. When you finish using the column,  you can turn the eyeball on  and turn it off on another one  to work on a slightly different  layout or a different grid system. Now you notice in this tutorial that we are using only three  of the sizes we're using the small, the uh,  less than 34 eams okay, for, uh, portrait Mobile,  the tablet and desktop.

Now we haven't done this one that's in between here,  which is kind of a landscape phone  and we haven't done the really large  or extra large desktop as well. It's mainly just to keep the time down from this tutorial. And it depends on, I guess, the level  of complexity your website has. If it's a quick Throwout website, you might not spend  as much time with the Excel  or the small version,  which is the small landscape foam version, um,  until maybe the site's a little bit more mature. If you are working on a bigger project,  then definitely you're gonna be looking at all five media  queries and all five sizes here in Photoshop.