Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
For new designers the process of going from mockup to code is probably the most challenging aspect of web design. Now obviously the more experience you have at building sites the easier this process becomes, but there are some things that you can do to simplify things a bit. Now first I recommend thinking of the basic structure of the page before anything else. Don't get too concerned with exactly how each element is going to be structured; rather, think of the overall groupings of content and what the basic structure of the page will look like based on this.
It gives you a nice starting point, and it keeps things becoming too complex too quickly. Now to illustrate this, I want to show you the mockup that I created for the desolve.org site that we will be using in some of our labs, and walk through the process of determining the basic page structure for the homepage. Now if you have Illustrator installed, you can go through this with me, as I've included the Illustrator file in the assets folder. Let me show you where that is. I'm going to pull up my exercise files, and you'll notice that directly in the exercise files we have a folder called Assets. If I open that up, here you can see the mockup for the homepage, and I have also included a PDF version of it as well so that if you don't have Illustrator you can open up the PDF and kind of follow along with this as well.
Okay, so what we're looking at is the homepage. Now typically when I do a mockup I'll design not only the homepage but also some of the secondary pages as well. I don't design every single page that's going to be in the site. I don't have mockups for that. But if there is something that's going to be on a page that needs me to worked through some of the design issues, otherwise I'm just doing some secondary pages so that I can determine what the consistent design elements and structuring of those pages are going to be as well. But for brevity's sake, we're just going to look at the homepage for this particular mockup. Okay, now the first thing that I like to do after the mockup is finished--and to be quite honest with you, this is actually something that I do over the course of designing it as well-- I'd like to think about where are the basic structural areas? How is this content group together, how does it relate to each other, and what is that going to mean semantically in terms of how this content is going to be structured in HTML? So I'm just going to go from sort of the top down.
I've designed a couple of visual aids to help us sort of visualize kind of what I was thinking of here. So the first thing I am going to do is, right at the top of the page we have the Desolve logo, and we have the tagline fine urban photography, so this is content that acts as an identifier, who is this organization, and that sort of thing. So that can all be grouped together in the header of the file. Directly underneath that we have a layer of navigation. This will be the site's main navigation, so it's going to sit inside of its own region as well. Now a lot of the choices that you make are personal decisions. You make decisions as designers about how content is going to be organized.
Certainly this header content and the navigation content could be grouped together. It could all exist in one header. It's very common to see a site navigation inside the header of the document. In this case I just felt like I wanted the main navigation out by itself so that it was his own specific separate region, and that's how I'm going to structure the page. So a lot of times you're just making a decision based upon that particular site and the needs of that site, and sometimes it's just personal preference. Okay, now the next thing I'm taking a look at, just below this where it says, "We love urban photography," and it sort of has a little About Us section here where it describes who these people are and what the site is all about, that particular element is not going to be on secondary pages; it's only here for the homepage as a way of sort of introducing the user or the viewer to what this content is all about.
I'm calling that a banner, and it's going to be in a separate region because it's certainly not going to be repeated throughout the site. Okay, if I scroll down a little bit more, we start to get into the actual main content of the site. I can see just below the banner we have our latest galleries, which is followed by a list of galleries, so that's displayed visually. We have some repeating structure there. So all this content right here on the left-hand side, all of that content relates to each other, and is probably the most important content on the stage, sort of the main content, if you will. So I'm going to group that together as a single article. So this is, that left-hand column, is a single article which we will refine the structure a little bit later on.
Now beside it we have some links to archived galleries, so it relates to the article. We have some contest information right down here: this month's contest and previous contest. So all of this relates to the galleries, but it's not part of it, so that's going to go in the sidebar, and we'll talk about what type of elements we might use to represent that in just a moment. Now I finish this up by going down to the very bottom of the mockup, and here I can see I have an area for searching for content on the site, I have some copyright information, a link where they can follow us on Twitter.
So all of this is really just footer information, so content that goes in the footer of the page, and that's exactly how I'm going to display that structurally. So I'm going to group that all as a footer. So if you look at this, including the footer, we have one, two, three, four, five, six distinct regions of content on this particular page, and that gives us a really solid idea as to what the initial structure of the HTML's going to be. Now I'm going to move my page over just a minute to give myself enough room to visualize this, but I went ahead and wrote out that initial structure if you will, right here on the page. We'll turn the visibility of that on. And what we're looking at is just the basic HTML structure for the content that we are displaying here in the mockup.
So we have a header element, so that's going to be followed by a nav element, which is followed by a div. Now the reason I'm using a div here for the banner instead of another element, like a section, is because I'd really don't want this to stand out in the document's outline. If I was making a table of contents, for example, for this page, banner would not be part of that table of contents; it's really just sort of a promotional element design to just sort of show off what the site is about. So it doesn't really fit to any one distinct section, so I'm going to use a div there. And that's followed by an article element and aside because, it's related to the article, and then finally the footer element itself.
Now a lot of the elements we're using here are HTML5 structural elements, and for some of you guys this may be the first time you're seeing these elements, or it might be the first time you've worked with them. So in order to introduce you to those I have a movie a little bit later on that's going to talk specifically about those HTML5 elements and sort of what they mean to the page. Okay, so in a nutshell, that's kind of my process. By focusing on the overall organization of this page content, I'm able to identify the basic page structure and obviously put some thought into how the site is going to work together as a whole. Now while I'm doing all this, I'm trying to solve certain problems, like how will this page structure work all the way throughout the site, how can I structure the content so that it's semantically correct so that the code is basically giving meaning to the content side of it and that meaning is consistent and correct throughout the site? How do I deal with changes to the page structure? Maybe there are going to be specific pages where page structure has to change; is it flexible enough to that? Is it flexible enough to handle modifications to the content at a later date? So those are all things that I like to think about.
Now by focusing on questions like those, I'm able to create a coherent strategy around structuring the content, and if you do that, you're going to have that well before you actually begin to code your page. The more you do it, the better you're going to get at it. Now I know you've probably heard me say this before, but most of the time I really do already know how the HTML and CSS is going to be written well before I ever open up my code editor. So I go through this process, determine the page structure, I can look at the visual aspects of it, and understand how I'm going to style those elements. We're going to come back to this process in just a moment as we begin to code the initial structure of our page, but before we leave the mockup, I want to discuss a few things that you'll need to consider when planning graphics for your layout, and we're going to go ahead and do that in our next movie.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.