Web Authoring Syllabus
Fall 2009

Discussion

Introduction

A printable (PDF) course description & list of course policies can be found on the Resources page.

We'll start the class by going over the course requirements, the structure of the semester, and some basic concepts for web authoring.

Web Page Examples

Let's look at some examples of different web pages. Each of these pages belongs to a particular genre or familiar category of web page. The page includes eatures that users expect to find on instances of that genre. To what genre do each of the following pages belong? What standard features identify the page as instance of the genre?

1. Old simple webpage: Climate Change Symposium
2. Newer simple webpage: Strictly Film School's Kiyoshi Kurosawa page
3. Simple bio page: Robert Sapolsky Page

View the "source" code for the last example in Firefox (Ctrl + U), or use this link: Simple HTML

Here are examples of some common genres of site that, with some adjustments, would make suitable projects for this class:

• Professional Site for Writer: Rose George, author of The Big Necessity
• Webcomic Site: Jane Irwin's Clockwork Game
• Portfolio Site: Stanza, Artist
• Portfolio Site: Nathan Good, Architect
• Portfolio Site: Attitude Design
• Digital Art Project Site: Noplace

I'm trying to find a good example of a family history site; I'm sure many are out there, but the ones I find are kind of bad. Still, that is one kind of project.

Note: A project for this class might present and document an online art (or other) project. Or it may document and supplement a non-web art (or other) project, your own or (with some qualification) the work of another.

Final Project

Next: let's take a preliminary look at the major project of the semester, the final project.

For this project you'll produce a website multi-page website with RICHNESS and CLARITY of content (information), with CONTINUITY and IDENTITY, and with EASE OF USE (logic of organization, good navigation).

Discussion

Final Project Ideas

We'll go over some of the project ideas that you've posted to the Class Forum. We'll talk about ways to focus your ideas and to start developing your initial ideas into the first stage of a project.

We might also take another look at the choosing a topic section of the FP page.

One more thing: If you're stuck for an idea, a good place to begin is to find a good non-fiction book that interests you (you'll need to write a review of one for your project) and develop your project idea from the book.

The Next Two Early Project

As you finish your Bio Page, we'll begin working on two new projects.

One is the End of the World Project (EWP), a six-part project that we'll return to periodically over the semester. You'll complete the first of its six parts for the next class.

The second project is the Further Reading Page. This project also has several parts. We'll work on these consecutively over the next three weeks.

For the next class (Feb. 11), you'll need to complete the research/prep and graphics parts of the assignment.

This research along with the images constitutes the content for the FRP. We'll build the page around this content in XHTML. Then we'll style the page using CSS.

If we have time: we might build a skeleton version of the page in today's class. Otherwise we'll get to it in the next class.

Bio Page Review

Review of some of your Bio Pages via the Class Forum. This review will focus on (1) XHTML clarity, economy, and validity; and (2) image selection and presentation.

CSS, Block-Level Elements, and the Box Model

You can think of the web page structure as a series of smaller boxes inside larger boxes (body and head inside html, paragraph inside body, table cell inside table row inside table, etc.) and boxes in a stacked order or succession (e.g., one paragraph following another paragraph following a table, etc.).

Each box on the page, in turn, consists of a further series of boxes:

Note: Elements inside the body element divide between block-level and inline elements.

Discussion

Introduction

Three preliminary ideas for your project: (1) site macro-purpose; (2) site macro-genre (e.g.,web magazine, professional portfolio); (3) macro-theme for site design.

IMPORTANT clarification: Help via email – etiquette and format.

How web authoring differs from web design.

The traditional division of labor (with reference to Robert Waller): content producer, web designer, and content user. How the relation between the three roles has changed. The concept of "access structure."

Remarks on completing assignments.

Page Complexity

Basic page design: Strictly Film School's Kiyoshi Kurosawa page.

Fancy page design: The Lippincott homepage.

The differences in design are quite clear. But what do these pages have in common?

Bio Page Critique/Review

Start by looking at XHTML v. HTML; Bad Tags; and Span and Div.

Next, let's look at the content, design, code, and (very important) image use of some of your Bio Pages. We'll access these via the Class Forum.

Note: Remember that a link to your work needs to be posted in the correct thread in the forum. If the link to your work is missing (or if it doesn't work), your assignment will count NOT submitted.)

Color Schemes

Your sites should not be TOO colorful, but color should be used both aesthetically and meaningfully. For instance, use color to organize your page visually.

One method of logical page-coloring is to use a key image – e.g., from your home page – to generate a multi-color palette for background color, border colors, link colors, etc.

Select the image. Then apply the image to, e.g., Color Palette Generator, and see what we get.

An especially useful web tool for generating and testing coherent color schemes is Adobe Kuler.

Discussion

Information Design: Basic Rules

The basic information design rule for web authoring: Every visual (presentational) difference should signal a semantic or functional difference in the content. Every visual repetition or connection (e.g., two elements with the same color) should signal a semantic or functional connection.

Related to this is a rule of information design economy: Avoid using more visual signals than are needed to clearly establish differences in content.

For example: A heading should be differentiated from the textual content falling under that heading. It can be larger, bolder, italic, underlined, in a different color or font-family. It can have a different texture or contain an image. It can be differently aligned (indented, centered, aligned right). It can have a different behavior (e.g., it can fade into view when the page loads or vibrate). Etc. But it does not need to have more than one or two of these differentiating properties to contrast sufficiently with its underlying text.

Very often only one difference is needed, perhaps two for optimal aesthetics. More than two starts to get the user wondering about other differences (beyond the heading-content difference) might be signaled that she is missing; and this slows down the communication of the information and the appreciation of the page.

Also a rule of maximal accessibility: Make your design both as human-readable and as machine-readable as possible.

Information Design: Further Principles

Edward Tufte's Five Principles of Information Design: According to Tufte, good information design presents information is

1. Comparative
2. Causal
3. Multivariate
4. Multimodal (using whatever it takes)
5. Well-documented

Here is Tufte's favorite example:

Let us consider your projects as instances of (excellent) information design according to the above principles.

To Tufte's five principles I want to add two Robert Waller::

1. Accessible (navigable, user-friendly)
2. Genre-based (uses conventions the intended user is familiar with and expects to find)

Review of Web Typography Reading

Typedia: Anatomy of a Typeface.

Code Style: Build better CSS font stacks

Ross Shannon, Web Typography (overview)

Oliver Reichenstein, Web Design is 95% Typography

Michael Owens, 6 Ways To Improve Your Web Typography

Web 2.0 Style

Here is a pretty terrible old web page: Wondermints fan site.

And here is an article on Current Web Style.

And here is an example of that style: Net Squared website.

And here is a related Web 2.0 How To tutorial.

CRAP Design Review

Visual logic of the page: uses page design to visually indicate what goes together, what doesn't.

CRAP = Contrast, Repetition, Alignment, and Proximity.

Another principle is Sallience: Your design should enable the user to focus on the main content of the page (e.g., the textual information, the informative graphics, the art work) and not on blank space or page decoration.

Let's compare these examples:

• Print example: Rolex Awards for Enterprise
• Another look at: Wondermints fan site

Let's go over this CRAP principles design demonstration based on the Rolex Awards example above.

More examples:

• Digitmash: A mash of work from Australian designer, Rob Morris
• Another counter-example: 1001 Pens
• Example: IKEA
• Example: Drake's Cakes
• Counter-example: Drakes Cakes Online

First Text Page Assignment: Book Review

The product or event review is an important and widely used genre of web writing. It provides content of interest to a wide range of users; is often a good way to attract attention to your website, no matter the topic of the site; is a way of entering into dialogue (directly or indirectly) with other web authors; and is a rich method for adding context for your site (to your project, your work, etc.) by presenting, in the form of a review, relations between the content of your site and one or more other products.

The first major page of your final project will be a review page with an accompanying sidebar of blurbed links related to the subject(s)/product(s) of your review(s). The default assignment is a book review, but we can discuss other products (or events) for review. Whatever the object of your review(s), the page (excluding the sidebar and any long quotes) must contain at least 1200 words of writing (equivalent to about 4 double-spaced pages of printed text).

As discussed, the book should be a recent (as recent as possible but within the past five years) book related to your site topic and of likely interest to your intended site users. Also, it must be approved by the instructor.

You may review multiple books or other products, but need to discuss this with the instructor.

We'll look at several examples of online reviews in the next class. Here are two examples with which to start:

• Sander Bauman reviews Book review: The Wayfinding Handbook and Book review: Identity 2.0.
• Cal Evans reviews PHP and MySQL by Example.

Note: Supplying access to a chapter list/table of contents for the book via a link (e.g., to the publisher's website) or other supplementary device is a good EXTRA feature for a book review, and one I recommend; but it should NOT be included in the body the review, as Evans does in his review.