Information architecture

Where are we?

We’re creating a framework for a site. The framework is made up of:

• Information architecture

• Page layout

• Look and feel

This page is about the first part: information architecture.

This page’s goals

By the end of this page, you should:

• Know what information architecture is.

• Know how that hierarchy is a common architecture.

• Know that search cuts through a hierarchy.

The visitor’s problem

Suppose Wendy goes to Delightful Dogs’ Web site. She has a goal in mind: “Find out what type of flea shampoo is best for my dog Goober.”

There might be hundreds of pages on the site, for different products, for grooming, exercise, play, diet, ... How is Wendy going to find the specific information s/he is looking for?

Information architecture (IA) is about organizing the content on a site to make it easy for people to complete task goals. This means being able to find information, even with a visitor does not know exactly what information s/he wants.

Hierarchy

One solution is to create a hierarchy on the site. The Weber divides pages into categories and subcategories. The site shows the categories to visitors, usually in nav bars and site maps.

Let’s look at two examples. TigerDirect:http://www.tigerdirect.com/ and Newegg:http://www.newegg.com/ are online retailers of computers and electronics. They both sell thousands of different products. Both companies want customers to be able to quickly find what they’re looking for. If someone can’t find what s/he’s looking for on TigerDirect, Newegg is just a click away.

Here’s the top left of TigerDirect’s page, as it was at the time of writing. There’s a nav bar with some product categories.

Figure 1. TigerDirect

Newegg uses different categories:

Figure 2. Newegg

But both are using a nav bar to present categories.

Each of the categories is divided up further. For example, click on the Computers tab on TigerDirect and you get:

Figure 3. Subcategories

As you might guess, this page uses the <table> tag.

Subcategories have subcategories:

Figure 4. Subsubcategories

And so on.

Hierarchy is the most common way to organize a site. You can capture the organization in structure map. Here’s an example.

Figure 5. Structure map for a dog nutrition site

Choosing categories

There are many different ways to categorize information. TigerDirect and Newegg organize their sites around product categories. They group the products differently, but both sites are about products.

Sites that are not about products do different things. For example, here’s a nav bar from CNN, as it was at the time of writing:

Figure 6. CNN nav bar

The categories are based on the content of the story.

Getting the hierarchy right is important. Visitors want to quickly find the category that’s likely to hold the information they want, then the subcategory, and so on, until they find the specific thing they’re looking for. Visitors will keep clicking through pages, as long as they’re following the scent of the information they need.

Often the people working for the business will know how customers think about things. Start there for your categories.

Site maps

Site maps show the entire structure on a single page. They’re good for a number of reasons.

• They help new visitors understand how you think about the site and its content.

• They help experienced visitors quickly jump to a page deep in the hierarchy.

• They help with searching, as we’ll see in a moment.

Structure map for Delightful Dogs

Here’s your first structure map for the DD site.

Figure 7. First structure map

The “Stores” category will have a page for each store, with business hours, driving directions, a map, and contact information.

The site includes a blog. You and Clara talked about having a blog as a way to engage customers. When a new blog entry appears in a customer’s news reader, it reminds him or her about Delightful Dogs.

Blogs also help people using search engines. Someone searching for “dog food bad ingredients” might come across a blog entry Clara wrote two years ago about the bad things some manufacturers put in dog food. This visitor gets useful information, and sees the DD branding on the page.

You show the structure map to Clara and her staff. Together, you find some problems. First, Delightful Dogs is known for its services. The products are less important to the business, and not a central part of the Delightful Dogs brand. Adding a “Services” category doesn’t seem useful. It just makes visitors click through to an extra level.

The second problem is with the product categories. The product category “Training” makes sense to the employees who train dogs. They think of collars, leashes, and other things as training products. But the “Training” product category isn’t something that customers understand. If they come to the site looking for a collar, they wouldn’t think to look in the training products category.

Another issue is that many customers who want products come in looking for toys. This category makes sense to customers, but it isn’t in the structure map.

Here’s a revised structure map.

Figure 8. Final structure map

Each service is now at the top of the hierarchy, equal to “Products.” L&C stands for leashes and collars (I ran out of space in the box). A toys product category was added.

Clara agrees that this will be a good structure for the site. You tell her that you’ll also add some other pages, like a site map and a copyright page.

Searching

Information architecture is about grouping content to make it easy for site visitors to find. But navigating through a hierarchy isn’t the only way people look for information.

Visitors also find information by searching. This is especially true on very large sites, like Wikipedia. Wikipedia does have a hierarchy. Here’s part of it:

Figure 9. Wikipedia categories

In all the times I have used Wikipedia, I don’t remember ever having used the categories. I go right to the search widget:

Figure 10. Wikipedia search widget

Why? I always have a specific question in mind. Maybe I want to look up something about Willow (sigh) from Buffy the Vampire Slayer. It’s faster for me to search than to dig through the structure.

I also search site maps. But not with a widget, with my browser’s search feature. I go to a site map, hit control+F, type in some text, and the browser will show me where on the site map the text appears. It might be deep in the structure, and I can jump right there.

Summary

This page is on information architecture.

• Information architecture is about dividing up site content, so visitors can find what they want.

• Most sites use hierarchies. You should choose categories that make sense to visitors.

• A structure map shows the hierarchy.

• A site map shows the structure of a site in one place.

• Search engines help visitors skip straight to the content they want.

What now?

The first part of a site’s framework is its information architecture. The next part is its page layout. Let’s talk about that next.

Page layout

Where are we?

You’ve learned about the first part of a site’s framework: information architecture. Let’s move on to page layout.

This lesson’s/page’s goals

By the end of this lesson/page, you should:

• Know that Web pages are often divided into regions: top, left, right, bottom, and center.

• Be able to create a liquid page layout, one that adjusts to the width of the browser window.

• Be able to create a static page layout, one that is always the same width.

Regions

Web pages are often divided into the following regions:

Figure 1. Regions

Different things can be placed in different regions.

• The top region is often used to show site branding (logo and site name), and sometimes a horizontal nav bar. It’s often called the header.

• The left region usually shows a vertical nav bar. It’s also called the left sidebar.

• The right region might show ads, or more navigation. It’s also known as the right sidebar.

• The bottom region might show copyright information, and another nav bar. It’s often called the footer.

• The main content of a page usually goes in the center region.

Not all sites are like this, of course. CoreDogs isn’t, for example. But the regions in Figure 1 are common.

Here’s how the regions might be used.

Figure 2. Regions example

In this one, the top region contains the logo, the site name, and a nav bar. The center region has a page header and content. The bottom region has a nav bar. The left and right regions are not used.

You make layouts with CSS. There are many ways to make layouts. They fall into two main categories, depending on what happens when the user resizes the browser window.

Liquid layout

A liquid layout expands horizontally to fill the browser window. Usually it’s the center region that expands. Liquid layout are also called fluid layouts.

Figure 3. Liquid layout

Liquid layouts use as much of the browser window as they can. However, the width of the center region is unpredictable. Many designers prefer fixed layouts, where they have better control. We’ll look at fixed layouts later.

Liquid layout, no white space

Let’s start by creating a page that looks like this:

Figure 4. Liquid layout, no whitespace

The page has five regions: top, left, center, right, and bottom. There is no whitespace between the regions, or inside the regions. We’ll change that later.

You can try the page. Resize the browser window, and watch the center region change its size.

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Liquid layout</title>
    <style type="text/css">
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 0;
      }
      p {
        margin: 0;
        padding: 0;
      }
      #top_region {
        background-color: #E0E0E0;
      }
      #left_region {
        float: left;
        width: 120px;
        background-color: #defee2;
      }
      #center_region {
        margin-left: 120px;
        margin-right: 120px;
        background-color: #fdffca;
      }
      #right_region {
        float: right;
        width: 120px;
        background-color: #ddddff;
      }
      #bottom_region {
        background-color: #E0E0E0;
      }
    </style>
  </head>
  <body>
    <div id="top_region">
      <p>Top region</p>
    </div>
    <div id="left_region">
      <p>Left region</p>
    </div>
    <div id="right_region">
      <p>Right region</p>
    </div>
    <div id="center_region">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut aliquip ex ea commodo consequat. </p>
    </div>
    <div id="bottom_region">
      <p>Bottom region</p>
    </div>
  </body>
</html>

Figure 5. Code for liquid layout with no whitespace

Let’s look at the HTML first. It’s simple. Each region has its own <div> with a unique id. That’s it!

The CSS does all the work.

Lines 10 and 11, and 14 and 15 need some explanation. They are:

margin: 0;
padding: 0;

Let’s think back a bit. Remember that every HTML tag has a default style. The default is what the browser will do if you don’t give it a CSS rule. For example, if you don’t say otherwise, <h1> renders as bold text in a large, serif font. You can use CSS to change this, but if you don’t, the browser makes <h1>s large and serifed.

Just as there are defaults for font-size and font-family, there are defaults for padding and margin. By default, the browser adds a little whitespace around headings, paragraphs, and other elements. Even the <body> tag has some whitespace by default.

Unfortunately, the amount of default whitespace varies across browsers. This makes it hard to create pixel-perfect pages. Setting margin:0 and padding:0 takes care of that. It tells the browser to remove spacing entirely. Then we can add the exact spacing we want to each element.

Let’s move on. Lines 20 to 24 style the left region:

#left_region {
  float: left;
  width: 120px;
  background-color: #defee2;
}

Line 21 uses the float property (you saw this when we talked about nav bars). float removes the left region from the normal flow of the HTML, and sends it to the left of the page. The width is fixed at 120px. It will stay that way as the browser window is resized.

Lines 30 to 34 style the right region:

#right_region {
  float: right;
  width: 120px;
  background-color: #ddddff;
}

It’s sent to the right, and given a fixed width.

The center region is styled by lines 25 to 29:

#center_region {
  margin-left: 120px;
  margin-right: 120px;
  background-color: #fdffca;
}

It doesn’t have a width property set, so it’s free to expand to fill the browser width. The left and right margins are set to allow for the left and right regions.

That’s it! You can try the page. Resize the browser window, and watch the center region change its width. The top and bottom regions expand and contract as well, since they have no width in their CSS rules.

Liquid layout, white space

Let’s add some whitespace around each of the regions. We want to end up with something like this:

Figure 6. Liquid layout with whitespace

Each region has both padding and margins. Remember the difference:

Figure 7. Margins and padding

Margins are outside the border of an element. Padding is inside the border of an element, between the border and the element’s content.

Here’s some CSS that will do the job. The rest of the page is the same as before, in Figure 5. You can try the page.

#top_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 5px;
}
#left_region {
  float: left;
  width: 120px;
  background-color: #defee2;
  padding: 5px;
  margin: 0 5px 5px 5px;
}
#center_region {
  margin: 0 140px 5px 140px;
  background-color: #fdffca;
  padding: 5px;
}
#right_region {
  float: right;
  width: 120px;
  background-color: #ddddff;
  padding: 5px;
  margin: 0 5px 5px 5px;
}
#bottom_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 0 5px 0 5px;
}

Figure 8. Adding whitespace

The top region has padding and margins added:

#top_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 5px;
}

This will add margins to all sides of the region.

The left region is immediately below the top region. We want the same sized gap above the top region and between the top and left, like this:

Figure 9. Margin goal

Both of the gaps are five pixels.

Suppose we used the following rule for the left region:

#left_region {
  float: left;
  width: 120px;
  background-color: #defee2;
  padding: 5px;
  margin: 5px;
}

Figure 10. Bad rule, naughty rule

This would seem to make sense. margin: 5px; in line 11 would add five pixels all around.

The problem is that the top region already has a five pixel margin below it. Add a five pixel margin to the top of the left region, and you get this:

Figure 11. Wrong margin

There will a 10 pixel gap between the top and left regions. Five pixels for the bottom margin of the top region, and another five pixels for the top margin of the left region.

To fix it, set the top margin of the left region to zero:

#left_region {
  float: left;
  width: 120px;
  background-color: #defee2;
  padding: 5px;
  margin: 0 5px 5px 5px;
}

Figure 12. Good margin

Line 11 has four values. Remember that they are applied in clockwise order from the top.

Figure 13. Margin order

This fixes the problem, giving us the five pixel gap we wanted.

The same approach is used for the other regions.

The center region has been adjusted a little:

#center_region {
  margin: 0 140px 5px 140px;
  background-color: #fdffca;
  padding: 5px;
}

Figure 14. Center

The left and right margins in line 30 allow for the extra whitespace around the left, center, and right regions.

Stretching the left and right regions

It’s looking good, but there’s still a problem with the layout. Have a look at this.

Figure 6 (again). Liquid layout with whitespace

Notice that the left and right regions are too short. It would be better if they looked like this:

Figure 15. Correct region heights

The left, center, and right regions are all the same height.

This is hard to do with plain CSS. Fortunately, there’s a jQuery plug-in that does it for us. Remember that a plug-in is some code that extends jQuery.

The plug-in we’ll use is called equalHeights, written by Rob Glazebrook. Here’s is the entire page. You can try it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Liquid layout with equal sidebar heights</title>
    <style type="text/css">
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 0;
      }
      p {
        margin: 0;
        padding: 0;
      }
      #top_region {
        background-color: #E0E0E0;
        padding: 5px;
        margin: 5px;
      }
      #left_region {
        float: left;
        width: 120px;
        background-color: #defee2;
        padding: 5px;
        margin: 0 5px 5px 5px;
      }
      #center_region {
        margin: 0 140px 5px 140px;
        background-color: #fdffca;
        padding: 5px;
      }
      #right_region {
        float: right;
        width: 120px;
        background-color: #ddddff;
        padding: 5px;
        margin: 0 5px 5px 5px;
      }
      #bottom_region {
        background-color: #E0E0E0;
        padding: 5px;
        margin: 0 5px 0 5px;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://coredogs.com/resources/jquery.equalheights.js"></script>
    <script type="text/javascript" language="javascript">
      $(document).ready(function() {
        $("#center_region, #left_region, #right_region").equalHeights();
      });
    </script>
  </head>
  <body>
    <div id="top_region">
      <p>Top region</p>
    </div>
    <div id="left_region">
      <p>Left region</p>
    </div>
    <div id="right_region">
      <p>Right region</p>
    </div>
    <div id="center_region">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="bottom_region">
      <p>Bottom region</p>
    </div>
  </body>
</html>

Figure 16. Equal region heights

None of the CSS or anything in the <body> has changed. The changes are in two places.

First, we need to include the plug-in code. It’s in a JavaScript file, so we include it with the <script> tag, just as we include any other JavaScript file.

You could download the plug-in to your own server. But for convenience, I’ve put it in the CoreDogs resource directory. You can refer to it there. That is what this line does:

<script type="text/javascript" src="http://coredogs.com/resources/jquery.equalheights.js"></script>

You can copy-and-paste this into your own projects, if you want.

Now that we have the plug-in in the page, we need to call it.

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    $("#center_region, #left_region, #right_region").equalHeights();
  });
</script>

Recall that code in $(document).ready() is run when the page is loaded and ready to go. We need to create a list of elements, and call the equalHeights() function on the list. It will make all of the elements in the list the same height.

The code $("#center_region, #left_region, #right_region") creates the list of elements. Remember that # means “find the element with id given.” So #center_region tells jQuery to find the element with the id of center_region. #left_region says “find the element with the id of left_region.” And so on.

Notice the comma (,) between the selectors. This creates a list of elements. Don’t forget the comma, or it won’t work.

So we end up with $("#center_region, #left_region, #right_region").equalHeights(). This builds a list of three elements, and calls the equalHeights() function on that list. Where is the JavaScript code for the equalHeights() function? In the file jquery.equalheights.js, that we included in line 48.

The result? All the columns are equal height. W00f!

If you want, copy the code in Figure 16 for your own projects. Adjust the width of the left and right regions as required.

Fixed layout

We’ve looked at liquid layouts, where the page expands horizontally to fill the entire browser window. Now let’s look at fixed layouts.

As you might expect, a fixed layout stays the same width as the browser window is resized.

Figure 17. Fixed layout

Typically, the page is centered on the screen. Extra space appears to the left and right of the fixed width page.

Fixed width designs are easier to control. You know exactly how much space there is in each column. You can create content (like images) accordingly.

No whitespace

Let’s make this:

Figure 18. Fixed layout

It’s zoomed out, of course. The content is centered in the browser window, with extra space on the left and right.

We can take the code for the fluid layout, and only change the CSS for the <body>. Here is the complete code, without padding, and without the sidebar heights made equal:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Fixed layout</title>
    <style type="text/css">
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #ffeaff;
        width: 750px;
        margin: 5px auto 5px auto;
        padding: 0;
      }
      p {
        margin: 0;
        padding: 0;
      }
      #top_region {
        background-color: #E0E0E0;
      }
      #left_region {
        float: left;
        width: 120px;
        background-color: #defee2;
      }
      #center_region {
        margin-left: 120px;
        margin-right: 120px;
        background-color: #fdffca;
      }
      #right_region {
        float: right;
        width: 120px;
        background-color: #ddddff;
      }
      #bottom_region {
        background-color: #E0E0E0;
      }
    </style>
  </head>
  <body>
    <div id="top_region">
      <p>Top region</p>
    </div>
    <div id="left_region">
      <p>Left region</p>
    </div>
    <div id="right_region">
      <p>Right region</p>
    </div>
    <div id="center_region">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut aliquip ex ea commodo consequat. </p>
    </div>
    <div id="bottom_region">
      <p>Bottom region</p>
    </div>
  </body>
</html>

Figure 19. Code for fixed layout

Only the CSS rule for the <body> tag in lines 7 to 14 has changed. Here’s the new rule:

body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 14px;
  background-color: #ffeaff;
  width: 750px;
  margin: 5px auto 5px auto;
  padding: 0;
}

Figure 20. CSS rule for the <body> tag

You can try the page.

Line 10 gives the page background a (nasty) color, so you can see where the content begins and ends.

Line 11 sets the page’s width to 750px. Why 750? PC screen resolutions have some standard sizes, like 800px x 600px, and 1,024px x 768px. Using 750px means that the page will fit on an 800px-wide screen. The extra 50px (800px – 750px) is for scroll bars, window borders, stuff like that.

Actually, 750px is conservative. As of January 2009, W3Schools reported that only 4% of their users had a width of 800px. Almost everyone uses a resolution of at least 1,024px.

The exception is mobile devices, which often use displays around 480px wide.

Line 12 centers the content on the screen. The line is:

margin: 5px auto 5px auto;

When you use auto for an element’s left and right margins, the browser centers the element. The element is the <body> in this case. The <body> contains everything, so the entire page is centered. W00f!

Whitespace and sidebar heights

Earlier, you saw code for a liquid layout with whitespace between the regions, and the sidebars given equal heights. Remember that “sidebar” is another name for a left or right region.

Let’s create a fixed version of our test page. It will look like this:

Figure 21. Fixed layout with whitespace and correct sidebar heights

It turns out to be quite easy. Just take the new CSS rule for the <body> from Figure 20, and plunk it into the code for the liquid layout. Here is code for the entire page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Fixed layout with equal sidebar heights</title>
    <style type="text/css">
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #ffeaff;
        width: 750px;
        margin: 5px auto 5px auto;
        padding: 0;
      }
      p {
        margin: 0;
        padding: 0;
      }
      #top_region {
        background-color: #E0E0E0;
        padding: 5px;
        margin: 5px;
      }
      #left_region {
        float: left;
        width: 120px;
        background-color: #defee2;
        padding: 5px;
        margin: 0 5px 5px 5px;
      }
      #center_region {
        margin: 0 140px 5px 140px;
        background-color: #fdffca;
        padding: 5px;
      }
      #right_region {
        float: right;
        width: 120px;
        background-color: #ddddff;
        padding: 5px;
        margin: 0 5px 5px 5px;
      }
      #bottom_region {
        background-color: #E0E0E0;
        padding: 5px;
        margin: 0 5px 0 5px;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://coredogs.com/resources/jquery.equalheights.js"></script>
    <script type="text/javascript" language="javascript">
      $(document).ready(function() {
        $("#center_region, #left_region, #right_region").equalHeights();
      });
    </script>
  </head>
  <body>
    <div id="top_region">
      <p>Top region</p>
    </div>
    <div id="left_region">
      <p>Left region</p>
    </div>
    <div id="right_region">
      <p>Right region</p>
    </div>
    <div id="center_region">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="bottom_region">
      <p>Bottom region</p>
    </div>
  </body>
</html>

Figure 22. Code for fixed layout with whitespace and correct sidebar heights

You can try it. W00f!

Important advice

Layout in CSS can get very complex. When you try laying out your own pages for real, you quickly find that CSS does things you don’t expect.

For example, the vertical margins between two elements will be collapsed, unless you are floating an element, and then the margin of the inner margin gets applied to the outer one, if it is larger, unless there’s padding as well, in which case it doesn’t, unless there’s a full moon, except if Frau Balckenfeld takes the number 17 bus in Berlin to visit her sister.

OK, I made up the last two things, but the others are true. The point is, it will drive you crazy trying to get a layout right. You’ll end up pulling out your own fur in frustration.

Over the years, I’ve found a good solution: give up. I no longer try to create layouts for real sites from scratch. Instead, I use a layout that someone else has created. There are many experts in CSS layout, who make their living doing just that. Some make their layouts freely available.

When I create a new site, I copy a layout, and adapt it to my needs. Of course, I only use layouts that the author has said I can use.

Here are two good sources for layouts. The first one is DynamicDrive. Here are some of their layouts:

Figure 23. DynamicDrive layouts

The layouts are bare-bones. They don’t have graphics, or anything else, just regions laid out in various ways. Choose the one you want, download it, and customize it.

Another good site is Open Source Web Design. Here are some of their offerings:

Figure 24. OSWD designs

OSWD has complete designs. They include graphics, font settings, etc., as well as layouts.

One of the OSWD designs might look familiar. Hmmm… Where have I seen that before?

Before I start using a layout or design, I open it up and look at the CSS. I want to see CSS that is simple, and that I can understand. Then I’ll be able to change it to do what I want. The design I adapted for CoreDogs – from nodethirtythree design – met those criteria.

I highly recommend that you use an existing layout or design. It will save you much anguish.

By the way, you can copy any of the layouts on this page for you own projects. Use them as much as you want.

Summary

You learned how to lay out a Web page.

• Web pages are often divided into regions: top, left, right, bottom, and center.

• A liquid page layout adjusts to the width of the browser window. A bit of jQuery can make the sidebars the right height.

• A fixed page layout is always the same width. Extra space goes to the left and right of the document.

• It’s best to use other people’s layouts, rather than create your own from scratch.

What now?

We’ve looked at two of the three parts of a sites framework: information architecture, and layout. Now it’s time for the last piece: look and feel.

Look and feel

Where are we?

You’re creating a framework for a Web site. There are three aspects to it. We’ve already talked about information architecture and page layout. Now we’ll talk about look and feel.

What is look and feel?

Look and feel is about creating a site that is both usable and aesthetically pleasing.

Usability is about task performance. The easier it is to use a site for a task, the more usable the site is.

Aesthetics is the emotional appeal of a site. Some sites are beautiful. Some are ugly.

There are three parts to look and feel:

• Typography

• Colors

• Graphics

Let’s talk about each one. We’ll look at usability and aesthetics for each of them.

Site directory tree

Where are we?

You’ve created a design. Layout, look and feel, and so on. The first step to implementing the design is to create some directories that your files will live in.

This lesson’s goals

By the end of this lesson, you should:

• Know what a site directory tree is.

• Know how to put files where Webers expect them to be.

• Know how to create a directory tree that supports reuse.

What is a site directory tree?

Let’s review some basic concepts we covered earlier.

A Web server is a computer running a normal operating system (OS) like Linux, Windows, or Mac OS. All of these OSs organize files into directories, subdirectories, subsubdirectories, and so on.

One directory is the root of your Web site. For example, on a Unix machine, your site might be in the directory:

/users/j/jones/public_html

On a Windows PC, your site might be in:

C:\xampp\htdocs

These are the root directories of your site. They are often called Web root to distinguish them from the OS’s file system root. C:\xampp\htdocs is a Web root. C:\ is a file system root.

URLs map into this structure. For example, suppose there’s a Linux server running Apache. It has a table, telling it which URLs map into which directories. Like this:

URL	Web root
@plurbtakinot.org@	@/users/j/jones/public_html@
@jumpforjackson.com@	@/users/b/bartillit/public_html@
@hogariffic.com@	@/users/x/xyralog/public_html@

Figure 1. Mapping URLs to file paths.

It actually works a little differently, but this is good enough for our purposes.

Suppose a browser requests this URL from Apache:

http://hogariffic.com/products/extras/poking-sticks.html

Apache will ask the OS for the file:

/users/x/xyralog/public_html/products/extras/poking-sticks.html

Apache will send this file back to the browser.

A site directory tree is the entire directory tree that is under the site root.

Designing the tree

We’re trying to make a site that is easy to maintain. That means two things:

• Put files where Webers expect them to be

• Support reuse

Put files where Webers expect them to be

Someone has to be able to find your files so they can maintain them. That person could be your future self. I guarantee that eventually you will forget where you put things. You’ll have to find them all over again.

Put your files where a Weber would expect them to be, to make them easier to find.

The most obvious way to organize files is the make the directories match the sections of your site.

Let’s use the dog nutrition site again, as an example. Imagine that you’re hired to create the site.

The site has the sections like Basics, Articles, Products, and Blog. The nav bar reflects this:

Figure 2. Nav bar

The blogs section has the current blog, and an archive. The products are grouped into food, treats, supplements, and other.

You might start with this directory tree:

Figure 3. Initial site directory tree

Notice that all of the directory names are lowercase only. File names are case-sensitive in Unix. So the directory DogDir is not the same as the directory dogdir.

This can be a problem when creating links. Suppose you called a directory DogDir and put the file kennel.html in it. Then you linked to this page:

<p>See our <a href="dogDir/kennel.html">best kennel</a>.</p>

Users who click on the link would get a 404 (file not found) error. There is no such file as dogDir/kennel.html. It’s called DogDir/kennel.html.

For simplicity, make all file names lowercase.

You can separate words in file names. Do not use spaces for this. I suggest using dashes (-), like best-kennel-ever.html. You can use underscores (_) as well, like best_kennel_ever.html. Google prefers dashes, though. So use dashes to make your site as Googly as possible.

Each directory would have an index.html file. This will be the “home page” for that section of the site.

Figure 4. Section home pages

Why add all of these index.html files?

Site users sometimes edit URLs in their browser’s address bar. I do this all the time. Say I’m reading about an interesting food supplement at this page:

FIGURE

Figure 5. URL of a page about a food supplement

I might want to look at other supplements. I edit the URL, deleting the page name:

FIGURE

Figure 6. Editing the URL

I’m hoping that this will give me a list of products. It might, but only if the file http://dognutrition.bz/products/supplements/index.html exists.

When I’m designing a site, I add an index.html to all of the content directories. You should do the same on your sites.

Support reuse

“Reuse” means having only one copy of a file. For example, to make the nav bar in Figure 2, you need some images for the buttons. For example, you might have a file called home.png for the Home button.

The nav bar is going to be on every page in the site. You could have a copy of home.png for every page. So if the site has 50 pages, you would have 50 copies of home.png.

It’s better to have just one copy of the fie, that all pages use.

Why?

Well, it would obviously save disk space. But disk space is cheap. There is a more important reason. Disk space is cheap, but Weber time is not.

Suppose you wanted to change the look and feel of the site, moving to a color scheme based on tints and shades of blue. That means changing home.png to the new color scheme.

If there were 50 copies of home.png, you would need to find every one, and replace it with the new file. That takes time. And it would be easy to make mistakes.

But if there was just one copy of home.png that every page used, you would replace that one file, and every page would be changed. W00f!

The way you set up your site today will affect how productive you can be in the future. Part of the Weber’s job is to create sites that are cheap to maintain.

Library directories

You can put shared files into library directories.

Figure 5. Library directories

The directory /library is for files shared across the entire site. Examples would be CSS files, JavaScript files, and images.

Some files are shared only within sections of a site. Suppose the pages in the products section had an image with “Add to shopping cart.” The image add-to-cart.png would only be used on product pages. It might be put in the directory /products/library.

Creating the tree

Time to create your site directory tree. Open up your development site, and – as Nike says – just do it!

Summary

In this lesson, you learned:

• What a site directory tree is.

• How to put files where Webers expect them to be.

• How to create a directory tree that supports reuse.

What now?

Now you have places to put your files. Time to make a template for your Web pages. The template will use the directory tree.

Creating a template

Using the template

Where are we?

(Summary of place in flow.)

This lesson’s/page’s goals

By the end of this lesson/page, you should:

• Know what .

• Be able to .

• Understand why .

Summary

What now?

(Preview of next topic.)

[ learningexercise:? ]

Remove spaces from above.

Figure ?. Legend

New syntax to test:

   program code
   ...

Figure .