Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Determining page structure

From: CSS: Page Layouts

Video: Determining page structure

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.

Determining page structure

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.

Show transcript

This video is part of

Image for CSS: Page Layouts
CSS: Page Layouts

71 video lessons · 40865 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.