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.