Class 06

Class 06 – Topics
Midterm Project
CSS Box Model
3-column and faux column structures
Design /Comps/Mock-ups, Prototyping
In-class demo: CSS Box Model exercise


Assignment:
Option 1: Complete CSS Box Model Exercise and Exercises 1, 2 and 3 as outlined in the class notes below. Post your assignment to the class server. For those of you who are new to column and faux column structure, please read Chapter 5: Basic Page Layout in our textbook Stylin’ with CSS.
Option 2: For students who feel comfortable building sites using 2 column, 3-column structures and positioning inner divs, I would like you to create a web page using the HTML file and CSS file provided on the CSS Zen Garden site here: http://www.csszengarden.com.  This is a good exercise for those students who are trying to improve their CSS skills.  Post your assignment to the class server.

Also, be sure to complete the reading below and please review your fellow students navigation assignment on either their WP blog or on the class server here: http://www.everythingaboutweb.com/grdes67/

Be prepared to discuss the client and website project you have chosen for your midterm.

Reading for For Next Week:
Starting the creative process, Defining Smart Design, Reviewing Site Goals, Developing Concepts, Design for your audience, Presenting Design and Gathering Feedback, Confirming Flow and Functionality, Testing Functionality, Designers as Problem Solvers, Creating Graphic Templates, Creating a Design Style Guide (pages 118- 140) from Web ReDesign 2.0
Questions to discuss next week (please come prepared):
What is Smart Design and how do you practice it?
How does the development of the “look and feel” of a site start?
What is the difference between a “look and feel” and a graphic template?

Reading completed for this week:
Wireframing, Addressing Navigation, Naming and Labeling, Defining Key User Paths, Developing the HTML Protosite, Creating User Scenarios (pages 107-116) from Web ReDesign 2.0
Testing for Usability (pages 211-232) from Web ReDesign 2.0

Questions to discuss this week:
What are wireframes?
When do you not need to define key user paths?
What is the purpose of usability testing?

Midterm Project

Specifications: Design a prototype website home page and first-level page for a client** of your choice. Create a sitemap for the complete website and be prepared to present the sitemap for your presentation. Focus on implementing the thought process we studied in class and creating an interesting navigational interface that allows the user to navigate the site in multiple ways . Use HTML and an external CSS file to build the prototype for your home page and first-level page of your site. Post your thoughts and decision-making process for this project on your WP blog.

Deliverables:

  1. Sitemap for entire site
  2. Home page
  3. First-level page for one of the sections. (Commonly referred to as the “landing page.”)

** Note: For next week, please be prepared to discuss the client you have selected for your midterm project. You will need my final approval to proceed with your chosen client. Please pick a client that will allow you to explore ways to effectively design useful delivery of content for  both an online and mobile environment.

The client should be a real or fictitious company that is nation-wide and provides product(s) and/or service(s) to the general public. You should avoid picking small, local companies that do not have interest to a large public audience. You should also think about what kind of interactivity could eventually be added to the site. In what ways would the public need/want to communicate or interact with the company?

For example, a national grocer may want to provide ways for the public to order food, be notified of sale items, etc. See this New York Times article about making grocery shopping faster, more reliable, more convenient and more individualized through the online experience. This article illustrates ways in which the public could interact with grocers. The articles references the site mywebgrocer.com. Another good article about mobile interactivity is Retailers Are Learning to Love Smartphones.

Think about how you could apply these types of online interactions for the products and/or services provided by the company you choose as your client.

CSS box model


Figure: Detail of the Box Model

The term “box model” is often used by people when talking about CSS-based layouts and design. Not everyone understands what is meant by this though, and not everyone understands why it is so important.

Any HTML element can be considered a box, and so the box model applies to all HTML (and XHTML) elements.

The box model is the specification that defines how a box and its attributes relate to each other. In its simplest form, the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall.

There is more you can add to a box, though, like padding, margins, borders, etc.

As you can see, a box is made up of four distinct parts. The outside one, the margin, is completely invisible. It has no background color, and will not obstruct elements behind it. The margin is outside the second part, which is the border. The border outlines the visible portion of the element. Inside the border is the third part of the box, the padding, and then inside that the content area of the box. The padding defines the space between the content area of the box and the border.

(Note that in the image above, the only border of the three drawn that would actually be visible is the solid line – the dashed lines are added to help demonstrate the box model).

When you define a width and a height for your box using CSS, you are defining not the entire area taken up by the content, padding, border and margin. You are actually just defining the content area itself – the bit right in the middle. The padding, border and margin must be added to that in order to calculate the total space occupied by the box. (From this point on, we will use width for demonstrations, but the same principles apply to both width and height).

box {
width: 200px;
border: 10px solid #99c;
padding: 20px;
margin: 20px;
}

The above CSS, applied to a box, would mean that that box occupied 300 pixels of space horizontally on the page. The content of the box would occupy 200 pixels of that (dashed line added to demonstrate the edge of the area occupied by the box). Note: just to be clear, the name of the div can be anything, not only “box.”

In the above image, you can see that the pale blue area is 240 pixels wide (200 pixels of content plus 20 pixels padding either side). The border is 10 pixels wide either side, making the total width including the border 260 pixels. The margin is 20 pixels either side, making the total width of the box 300 pixels.

In practice, this can cause some confusion. For example, if I have a 100 pixel wide space available, and want to fill it with a pale red box with a dark red border and a small amount of padding, it would be very easy to write the CSS like so:

box {
width: 100px;
border: 1px solid #900;
padding: 10px;
margin: 0;
background: #fee;
}

(A declaration of 0, as used for the margin above, does not require a unit to be added. Any value other than 0 does require a unit, e.g. px for pixels. Also, although “background” is defined as a shorthand property, it is more widely supported than the more correct “background-color”.)

However, that will not give us a 100 pixel wide box, as the width declaration defines the content area of the box. The content area of the box will be 100 pixels – the total width of the box as defined above will be 122 pixels:

In order to set the above box to only occupy 100 pixels horizontally, you would need to set the width of the content area to be 100 pixels minus the padding and minus the border, in this case 78 pixels, like so:

box {
width: 78px;
border: 1px solid #900;
padding: 10px;
margin: 0;
background: #fee;
}

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

Above material about The Box Model from Added Bytes website. Content on the site is licensed under a Creative Commons License.

CSS Box Model Exercise

Using the CSS_BoxModel_exercise files, recreate the Cupcake Mama website using div tags as demonstrated in class. For your reference, here is a link to the Cupcake Mama web page. Please be sure to follow the steps below:

  • Set up the proper file structure by creating both a final web and source files folder. Be sure to move the images into the images folder.
  • Insert 5 divs: wrapper, header, photo, content and footer. Be sure that the wrapper div contains the 4 other divs.
  • If you want to see the divs you may add color by going to View > Visual Aids > CSS Layout Backgrounds.
  • When you insert the 5 divs, zero out the margins and padding in the “Box” category of the CSS rule interface.
  • Below are the properties we know from referencing the Photoshop file:
    wrapper div width is 750 px
    header div height is 150 px
    photo div width is 390 px
    content div width is 340 px
    footer div height is 20 px
  • Dont’ forget your floats and clears!
    photo div needs to float left, content div needs to float right, and the footer div needs to clear both.
  • Remember in order to center the entire site, you need to set the left and right margins of your wrapper div to “auto.”
  • When you insert the inner content, remember this: You should position inner divs absolute in relation to the “parent” div (the div they are inside of). The “parent” div must be defined as relative.
  • Insert a table into a div tag to insert the rollovers for your navigation.
  • Create CSS styles using the compound selector for the following: (be sure to include the h1 tag in your HTML code)
    #photo img {
    }
    #content p {
    }
    #content h1 {
    }
  • Okay, now take this layout a couple steps further and add additional content (like an image or extra text to the content and/or photo divs). In the divs that form the 2-columns you can’t use absolute positioning because it will break your 2-column structure.
  • Position your new content for these two divs using margins, padding and floats. Experiment and play around with the properties! This will help you understand how to position content in inner divs and how to create more complex layouts.
  • Post your exercise files to the class server in a folder called “lastname_boxmodel”

Gallery of Column Structures

Two column structure: http://www.everythingaboutweb.com/classes/examples/2-column/

Two column faux structure: http://www.everythingaboutweb.com/classes/examples/2-column_faux/

Three column structure: http://www.everythingaboutweb.com/classes/examples/3-column/


XHTML & CSS Exercises
Faux Column

Adding a graphic to the layout’s background that is the same color and width of the columns, to create the illusion that the column extend right down the page.

Notice the following:

  • The image is added to the background of the wrapper.
  • You need to specify your navigation and content <divs> in pixels.
  • You need to change the background color or your <divs> to match your image.

Here is the image I used in the demonstration. (Notice in the CSS, I set my navigation <div> to 290px with background color #ffcc00, and the content div to 700px. with background color #ff6633.)

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
background:url("images/faux_col.gif") repeat-y;
}
CSS example
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;
}

Exercise 1: Using the HTML code from the 2-column layout from last week, create a 2-column layout with a column that extends down to the bottom of the page using a graphic.

3-column Liquid layout

Basic Div structure:

<div id=”wrapper”>

<div id=”header”></div>

<div id=”threecolwrap”><!–encloses the three columns–>

<div id=”twocolwrap”><!– encloses the left and center columns–>

<div id=”navigation”></div>

<div id=”content”></div>

</div><!–end of twocolwrap–>

<div id=”right_side”></div>

</div><!–end of threecolwrap div–>

<div id=”footer”></div>

</div>

<!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="threecolwrap">
<!--encloses the three columns-->

<div id="twocolwrap">
 <!-- encloses the left and center columns-->

 <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>
 <!--end of twocolwrap-->

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

</div>
<!--end of threecolwrap div-->

<div id="footer">

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

</div>
</body>
</html>
CSS example

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*/

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

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

#threecolwrap {
 float:left;
 width:100%;
 background-color: #ffffcc;
 }

#twocolwrap {
 float:left;
 width:100%;
 display:inline; /* stops IE doubling  margin on float*/
 margin-right:-170px; /* neg margin move */
 }

#navigation {
 width:150px;
 float:left;
 background-color: #999;
 display:inline; /* stops IE doubling margin on float*/
}

#content  {
 width:auto;
 top:0px;
 margin-left:150px;
 margin-right:170px;
 height:1%;
 background-color: #CCC;
}

#right_side{
 float:left;
 width:170px;
 display:inline; /* stops IE doubling  margin on float*/
 background-color: #999;
 }

#footer {
 clear:both;
 width:100%;
 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;
}

Exercise 2: Create a page with a 3-column Liquid layout following the example above. Add your own content and styling to the page.

3-column Faux column layout

Exercise 3: With the help of our textbook “Stylin’ with CSS,” create a HTML file and CSS file for a 3-column layout with columns that extends down to the bottom of the page. Remember, this is called a “faux column” and is done using a graphic.

Assignment

Exercise 1: Using the HTML code from the 2-column layout from last week, create a 2-column layout with a column that extends down to the bottom of the page using a graphic. (This is often referred to as a “faux column.”
Exercise 2: Create a page with a 3-column Liquid layout following the example above. Add your own content and styling to the page.
Exercise 3: With the help of our textbook “Stylin’ with CSS,” create a HTML file and CSS file for a 3-column layout with columns that extends down to the bottom of the page. Remember, this is called a “faux column” and is done using a graphic.

Design Process
Design Comps/Mock-ups

We have already used Photoshop and Illustrator to create the design comps or mockups for our weekly projects in this class. Normally the Design Comp or Mock-up is created after the sitemap has been developed and finalized and the Wireframes have been created. As the designer, you may need to base a design on the the information contained in a series of final wireframes for a project.

Prototyping
Most Common Prototyping Methods 1

Todd Warfel ran a survey investigating a number of things related to prototyping. One of these was a question of the type of prototypes people are often creating.

In order of most common to least common, here they are:

  • Paper — 81%
  • Hand coded html — 58%
  • Auto generated (e.g. Axure, iRise, Visio, Fireworks or similar) — 39%
  • Clickable Screenshots (using HTML) — 34%
  • Interactive Flash, Flex, AIR, Blend, or similar — 27%
  • Keynote or PowerPoint — 24%
  • Clickable PDFs — 21%
  • Production Environment (e.g. Rails, PHP, .Net, Java, Xcode, C) — 9%
  • 3D Models (e.g. Cardboard, Foam Core, Circuit-boards) — 1.2%

Participants were allowed to select any and all methods they used. Close to 200 participants responded, representing a mix of researchers, designers, developers, product managers, and business analysts.

1 http://toddwarfel.com/archives/most-common-prototyping-methods/

HTML for Prototyping
HTML Cheat Sheet

http://lesliefranke.com/files/reference/htmlcheatsheet.html

CSS Cheat Sheets

http://lesliefranke.com/files/reference/csscheatsheet.html
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/



Comments

Sorry, but comments are currently closed.

About Author

jamie

Instructor for Graphic Design 67