Week 05

Week 05 – Topics

Auditing Existing Content
Outline New Content
Create Delivery Plan
The Grid
2 & 3 Column CSS Layouts

Deliverable: Content Outline

Discuss Reading:
Chapter 4: “Phase 2: Develop Site Structure” (pg 86-95)
Stylin’ with CSS – Chapter 5: “Basic Page Layout”


Assignments

1) You can work as a team or by yourself and create a Content Outline for the Design Technology Website Design project. Remember that the name of the website will be Design Technology and not AET. The challenge is consolidating the content from all three sites into one. This will require re-organizing the content and maybe even eliminating some of the current content. Don’t feel you have to use any or all of the current content.

Each team member will post this document as a PDF to a “Week 5″ folder in their “lastname_firstname” folder AND one copy as a team to the “content outline” folder on the class server. Be sure to have your names on the file. Bring the documents with you to our next class.

Download the Content Outline to help in formulating the content for your Content Outline.

Current sites
Entertainment Technology  (http://academy.smc.edu)
Graphic Design  (http://academy.smc.edu/grdes/)
Interior Architectural Design (http://www.academy.smc.edu/intarc/)

Deliverables: Content Outline

2) Assigned Reading
Chapter 4: “Phase 2: Develop Site Structure” (pg 96-105)
Stylin’ with CSS – Chapter 5: “Basic Page Layout”

Before our next class, post answers to the following questions on your class blog.

What is a “site map?”
What are the two types of naming conventions that are addressed in the book?

3) If you need to brush up on Column CSS Layouts, please watch the Two Column CSS Layout videos  located on the tutorials page:
http://www.classes.jamiecavanaugh.com/grdes67fall/tutorials/

This is important because we are going to go to start building a more complex CSS Layout next week, so please be prepared by reviewing the one column and two column layouts.


Discussion

What are the “three views” discussed in the book involving the content of the site.  And what are the differences between the three views?
What is a “content audit?”


Content Audit

A content audit is, by definition, an evaluation of every piece of content (text, imagery, or media) in the outgoing site that is relevant to the redesign.

A content audit can be viewed as such a huge undertaking that the client may suggest simply using the existing content so that the project can move forward.

We’re in a hurry. We’ll go through the content after the redesign launches.

Here are a few things you can say to the client to help explain why this step is so important:

  • The existing content may be part of the problem. A content audit not only removes unnecessary content, it helps minimize less important content and maximize the content and messaging that fulfills branding and business goals. Think of this as a content tune-up. Your site will run better.
  • As the content is audited, it will begin to naturally organize itself. When finished, there will be groupings on a spreadsheet or several piles of printouts, each representing like areas of content. This is a great preliminary step toward chunking.
  • A content audit is a perfect opportunity to organize the content for physical delivery. If a piece of content is being kept for the redesigned site and needs no reworking, drop the web-ready digital file into a folder slated for delivery. (Auditing content while gathering content for delivery? Killing a few tasks in a single swipe never got anybody fired.)

Ultimately, the content audit is the client’s responsibility. You may have to help with this, but only the client can truly analyze their own current content and determine what needs to be rewritten or created from scratch.

Content Inventory (aka Content Survey, Audit)

A content inventory is intended to provide a consolidated snapshot of all the major sections, pages, and content on a Web site. This would include text, graphics, and multimedia. Some even go as far as to break content down into individual pieces or paragraphs of content. Sometimes a content inventory is performed on content that is not yet part of a Web site. This would be helpful for an organization that is collecting content to be placed on a new Web site. Card sorting would be helpful for organizing content in this situation.

Here a a couple examples of Web content inventory variations.

Survey – A high level review of a site’s main sections and pages. It enables you to develop an understanding of the general site scope and major chunks of content.

Detailed Audit – this is a comprehensive inventory of every page on a site. This inventory will list every page’s filename, title, URL, and possibly its file type and a description. It’s also helpful to assign a unique page ID that will correspond to the pages location on the Site Map.

Content Map – This simply entails laying out the site content in a graphical format. If you’re performing a content inventory on a current site, then an effective site map might nullify the need for a content map.

Please read the following:
Doing a Content Inventory (Or, A Mind-Numbingly Detailed Odyssey Through Your Web Site)
How to Write a Web Content Outline in 6 Steps


The Grid

Please read the following:
Grid-based Layout
960 Grid System is Getting Old

Resources
The Grid System
960 Grid System


Two & Three Column CSS Layouts
Faux column

What is a faux column and when do you use it? Take a look at this example of a 2-column structure.

Problem: Note that the left-hand column height matches the height of the content. What if the left-hand column background color needed to extend to the footer? (Which is often the case.) How do you create this layout?

Solution: Adding a graphic to the background of the layout that is the same color and width of the columns can create the illusion that the column extends down the page.

Note the following:

  • The image is added to the background of the wrapper.
  • Specify your navigation and content <div> widths in pixels.
  • You can change the background color or your <div> to match your image.
#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
background:url("images/faux_col.gif") repeat-y;
}

Here is the image faux_col.gif

Notice in the CSS below, I set my navigation <div> to 290px with background color #ffcc00, and the content div to 700px. with background color #ff6633.

CSS – Faux Column
body { font-size: 62.5%;
}

#wrapper {
 width:990px;
 margin-left:auto;
 margin-right:auto;
 background:url("images/faux_col.gif") repeat-y;
}

#header {
 height: 150px;
 background-color: #666;
}

#navigation {
 width:290px;
 float:left;
 background-color: #ffcc00;
}

#content  {
 width:700px;
 float:left;
 top:0px;
 background-color: #ff6633;
}

#footer {
 clear:both;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}

Solution: 2 column faux layout

Three Column CSS Layout

To create 3-column layouts, we need to add one more <div> to our HTML file.

<html>
<head>
   <title></title>
</head>

<body>

  <div id="wrapper">

    <div id="header"></div>

               <div id="navigation"></div>

               <div id="content"></div>

               <div id="right_side"></div>

    <div id="footer"></div>

  </div>
</body>

</html>
Three Column CSS Layout Details

Note: I’ve added 1 new div to the structure:

<div id=”right_side”></div>
This <div> creates a right-side area (this is the 3rd column) running down the right-side of the page.

HTML – Three Column CSS Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>3-column web page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

 <div id="header">
 <h1>This is the header</h1>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

 <div id="navigation">
 <h1>This is the navigation </h1>
 </div>

 <div id="content">
 <h1>This is the content</h1>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

 <div id="right_side">
 <h1>This is the right side content</h1>
</div>

<div id="footer">

<h1>This is the footer</h1>
</div>

</div>
</body>
</html>
CSS – Three Column CSS Layout

body { font-size: 62.5%; /* 1em = 16px therefore 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The code below is a good example of basic CSS properties for the <div> tags of a 3-column web page.

body {
 font-size: 62.5%;
 margin-top:25px;
}

* {margin:0; padding:0;} /* this tag is added globally*/

img {
	border: none;
}

#wrapper {
 width:990px;
 margin-left:auto;
 margin-right:auto;
}

#header {
 height: 150px;
 background-color: #666;
}

#navigation {
 width:150px;
 float:left;
 background-color: #999;
}

#content  {
 width:670px;
 float:left;
 background-color: #CCC;
}

#right_side{
 float:left;
 width:170px;
 background-color: #999;
 }

#footer {
 clear:both;
 width:990px;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}
Two & Three Column CSS Layout (Sample Code)

Two Column  CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column/

Two Column Faux CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column_faux/

Three Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/3-column/

 Resources
2 Column CSS Layout: Fixed Width And Centered

3 Column CSS Layout: Fixed Width And Centered



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow

Powered by WP Hashcash




About Author

jamie

Instructor for Graphic Design 67