U48 318—Advanced Web Site Design and Development

Washington University in St. Louis
University College
Dept. of Communications & Journalism

Spring 2013
Saturdays 9:00 a.m.–12:00 p.m.
19 January—4 May 2013
Eads 14

Instructor: Scott Granneman

You can also read my full CV.

Course Description

This course focuses on one of the most important advanced areas of Web development: Cascading Style Sheets (CSS), which allow developers to set the formatting and positioning of Web pages in a standards-based and robust way. Through understanding CSS, Web developers can proceed to the next level of Web development.

Mini-Topics

During each class I will take a few minutes & discuss a mini-topic for 15 minutes or so. Some of these mini-topics include:

Requirements

Texts

There are no required books. Readings will consist of articles, analyses, & ephemera from the Internet. Virtually everything you need can be accessed via my website. While I’m not requiring any books, I recommend the following as particularly worthy of your attention:

• Jon Duckett: HTML & CSS: Design and Build Websites
• Eric Meyer: Eric Meyer on CSS: Mastering the Language of Web Design
• Eric Meyer: More Eric Meyer on CSS
• Christopher Schmitt: CSS Cookbook
• Jeffrey Zeldman: Designing with Web Standards
• John Allsopp: Developing with Web Standards
• The Zen of CSS: Visual Enlightenment for the Web*
  Written by the designers of CSS Zen Garden. Wash U's library has the book available online (& many other web development books as well!). If you are off-campus you will need to log in to the Wash U library.

Tasks

In order to participate fully in this class, you need to sign up with GranneClass, an email discussion group hosted by Yahoo Groups.

To subscribe, send an email with a short sentence explaining who you are to granneclass-subscribe@yahoogroups.com. To send and receive email, you do NOT need to be a Yahoo member.

To view archived messages, go to http://groups.yahoo.com/group/granneclass; note, though, that you must be a Yahoo member (which is free and relatively painless) to use the group on the Web.

Grading

Your grade will be based on the following factors:

• Class attendance and participation (25%): You are expected to attend class prepared to learn and discuss the topics with your fellow classmates. We may also work on in-class exercises, and you are expected to take an active part in those exercises.
• In-class mini-projects (50%): We will practice CSS in class. At scheduled times, you will have one week to complete an assigned mini-project involving the use of these technologies. Think of it as an open-book test, since you will be allowed to use your class notes and any other resources you can access.
• Final project: CSS Zen Garden (25%): Go to http://www.csszengarden.com & you'll find an awesome collection: a series of designs that all use the same HTML, but use wildly different CSS to change the look of the site. Download the sample HTML & CSS from the site and then go nuts changing the CSS to match a theme you come up with … but do not change the HTML! Your CSS Zen Garden design is due the last day of class, & we will take turns showcasing them to everyone. Information about exactly how to proceed is at CSS Zen Garden Project.

Grades will be based on an average of the above as follows:

100 A+
94-99 A
89-93 A-
86-88 B+
83-85 B
79-82 B-
76-78 C+
73-75 C
69-72 C-
66-68 D+
63-65 D
59-62 D-
0-58 F

Policies

Accommodation of disabilities

Webster University is committed to providing accommodations and/or services to students with documented disabilities. If you have registered as a student with a documented disability and are entitled to classroom or testing accommodations, please inform me at the beginning of the course.

Academic Integrity

This course will follow Washington University’s policies concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question & referral to the appropriate individuals, who have discretion to impose a stricter penalty.

While academic dishonesty includes cheating on exams and quizzes, it also includes plagiarism in written assignments. Plagiarism is not only passing off someone else’s work as your own, but also giving your work to someone else to pass off as their own. It also includes submitting work from another course. While I strongly encourage you to discuss your work with each other in and out of class, and while you may research issues together, your work should be your own.

Any papers you submit must be your work alone, and must include citations to all references in your work. Please include the URL, or Web address, for articles and resources found on the Internet.

If you have any questions about academic integrity, please bring them to me before you do anything that may jeopardize your grades, your education, & your future!

Distractions

I have no problem with students using a laptop, tablet, or smartphone during class for academic purposes; in fact, I would do the same thing. However, please do not use your personal device (or the computer on your desk) during class to conduct personal business such as Facebook, email, or IMing. This reduces your concentration & participation and distracts others around you. Repeated distractions will reduce your grade for the course. Please do what you need to do to keep cell phone distractions at a minimum.

Netiquette

It is paramount that we respect each other online in our email listserv. Follow this simple rule: disagree with the idea, but not the person. In other words, it’s OK to say “That’s a bad idea, because …”, and it’s not OK to say “You’re a bad/stupid/inconsiderate person, because …”. If you have an issue with a classmate’s behavior online, please bring it to me privately by emailing me at scott at granneman dot com. If you’d like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

Key Links

As we proceed through the course, you will find yourself constantly installing, using, and depending upon certain software, websites, and resources. In an effort to make your life easier, I have consolidated most of those items onto Web Site Design and Development Key Links.

Tentative Schedule

Slides

• CSS Selectors—Handouts [1.3 MB PDF]
• CSS Selectors—Slides [1.4 MB PDF]

Readings: CSS Selectors

Continuation of 19 January 2013

Slides

• CSS Fonts & Formatting—Handouts [3.9 MB PDF]
• CSS Fonts & Formatting—Slides [3.9 MB PDF]

In-class

• CSS Reset (to test, use the code at HTML & CSS Test Page)
• CSS Tools: Diagnostic CSS (to test, use the code at HTML & CSS Test Page & make errors)
• Basic Typography

Merrrry Gusmas!

In-class

• Default Fonts
• Web Browser Font Defaults

In class:

• CSS & Punctuation
  • Quotation Marks & Apostrophes
  • Hyphens, Dashes, & More

Practice:

• Drop Caps, Formats, Definitions

Switching CSS

• A prime example: css Zen Garden

Code

• Easy
  • A simple way to begin together: Easy Print-Friendly Webpage
    Download media-specific-easy.zip, unzip it, & create a print style sheet that only shows important content when printed, keeping the screen style sheet
  • Once you’ve done that …
    Now download media-specific-easy-plus.zip, unzip it, & create a print style sheet that only shows important content when printed, keeping the screen style sheet
• Code to switch styles with JavaScript (based on Pete McVicar's Print to Preview) ~ Slightly more complicated, but provides print CSS if the user clicks the browser's Print button or uses the Print Friendly link (learn how to add this to your web page/site by reading Creating a Print-Friendly Page with CSS & JavaScript: The McVicar Method)
• Code to switch styles with JavaScript ~ The same as the above, except that a Print dialog box does not automatically open when the Print Friendly page opens
• Code to switch styles with JavaScript (based on WebSanity's code used on http://www.aclu-nj.org) ~ Less complicated, but only provides print CSS if the user clicks the Print Friendly link, NOT if the user clicks the browser's Print button

Handouts

• Media-Specific Styles (handouts) (3.2 MB PDF)
• Media-Specific Styles (slides) (3.2 MB PDF)

IE Conditional Comments

Turning unordered lists into site navigation

• Listutorial ~ "… the basics of building background image lists, rollover lists, nested lists and horizontal lists"
• Listamatic ~ Take one list coded in HTML, change the CSS, & get many different options
• Suckerfish Dropdowns ~ Turn lists into cool dropdown menus with some CSS & some JavaScript
• In-class practice: From List to Dropdown Navigation

Other readings: CSS & Navigation

Centering

• Text
• Block-Level Elements
• Vertical Centering a Single Line
• Vertical Centering Using display:table-cell

Float

• Floatutorial
• Prev/Next (Split) Links
• Prev/Next (Split) Text

Lightbox defined at Wikipedia

fancyBox

How to Use fancyBox, a Better Lightbox

Postioning: The Box Model

• CSS Box Model—in laymans terms! ~ http://www.tanfa.co.uk/css/articles/css-box-model.asp ~ A super-simple explanation. It don't get much easier than this!
• Basic CSS Box Model Demo ~ http://www.redmelon.net/tstme/box_model/ ~ A really neat Flash-based interactive demo of the box model
• Thinking inside the box ~ http://www.wpdfd.com/editorial/wpd1002.htm#feature ~ A nice introduction to the CSS box model

Intro to Positioning

• Learn CSS Positioning in Ten Steps ~ http://www.barelyfitz.com/screencast/html-training/css/positioning/ ~ A brief tutorial examining different layout properties available in CSS: position: static, position: relative, position: absolute, and float
• An introduction to CSS-Positioning ~http://www.webreference.com/programming/css_utopia/chap5/2.html ~ Covers: basic box model, padding, margins, borders, display property, absolute & relative ositioning, multiple columns/li>
• CSS Positioning ~ http://www.brainjar.com/css/positioning/default.asp ~ An excellent introduction to CSS-P
• Complete CSS Guide: Page Layout Properties ~http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html ~ A very good overview of CSS-P, from WestCiv

Uses for Positioning

• Practical CSS Layout Tips, Tricks, & Techniques ~ http://www.alistapart.com/articles/practicalcss/ ~ How to layout images, forms, & more … without tables!

Intro to Positioning Layouts

• Flexible Layouts with CSS Positioning ~ http://www.alistapart.com/articles/flexiblelayouts/ ~ Absolute & relative positioning of divs
• Liquid layouts the easy way ~ http://www.maxdesign.com.au/presentation/liquid/ ~ A comprehensive walk through a liquid layout

Positioning Layouts

• 2 columns
  • 2 columns—left menu ~ http://bluerobot.com/web/layouts/layout1.html ~ 2 columns with the menu on the left
  • 2 columns—right menu ~ http://bluerobot.com/web/layouts/layout2.html ~ 2 columns with the menu on the right
  • Two columns with color ~ http://nemesis1.f2o.org/articles ~ Just your basic 2-column layout with liquid width
  • LAYOUT TECHNIQUES: nested float ~ http://glish.com/css/1.asp ~ Nested, floating menu in the upper right (or left)—not really 2 columns, but close enough
  • Faux Columns ~ http://www.alistapart.com/articles/fauxcolumns/ ~ Using background property to create the illusion of columns
• 3 columns
  • Flanking Menus ~ http://bluerobot.com/web/layouts/layout3.html ~ Three columns, and no tables
  • LAYOUT TECHNIQUES: 3 columns, the holy grail ~ http://glish.com/css/7.asp ~ Three columns, with the center fluid
  • LAYOUT TECHNIQUES: 3 columns, all fluid ~ http://glish.com/css/2.asp ~ Three columns that readjust width as the window changes
  • LAYOUT TECHNIQUES: static width and centered ~ http://glish.com/css/3.asp ~ Three columns, all static width & centered
  • The compulsory three columns ~ http://www.s7u.co.uk/layouts/threecol.html ~ A three-column layout from Cutting edge CSS
• 4 columns
  • LAYOUT TECHNIQUES: 4 columns, all fluid ~ http://glish.com/css/8.asp ~ Four columns that readjust width as the window changes
• Collections
  • Little Boxes ~ http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html ~ Pick your layout, & grab the CSS it makes for you
  • Sample CSS Page Layouts ~http://www.maxdesign.com.au/presentation/page_layouts/index.cfm ~ Single column, two column, three column … it's all here
  • Layout-o-matic ~ http://www.inknoise.com/experimental/layoutomatic.php ~ Pick a layout, click a button, & you've got your code

Sorting tables

In-class critiques of CSS Zen Garden projects

Evaluation form