search | site map

Home > Teaching > Washington University > Website Design & Development > Archives > Spring 2011 Syllabus

U48 318—Advanced Web Site Design and Development
Washington University University College

Spring 2011
Saturdays 9:00 a.m.–noon
22 January—7 May 2011
Eads 14

Instructor: Scott Granneman

Adjunct Professor

Washington University in St. Louis

Author

Don't Click on the Blue E!: Switching to Firefox (O'Reilly: 2005)

Hacking Knoppix (Wiley & Sons: 2005)

Linux Phrasebook (Pearson: 2006)

Podcasting with Audacity: Creating a Podcast with Free Audio Software (Prentice Hall: 2007)

Google Apps Deciphered: Compute in the Cloud to Streamline Your Desktop (Prentice Hall: 2008)

Mac OS X Snow Leopard for Power Users: Advanced Capabilities and Techniques (Apress: 2010)

Contributor, Ubuntu Hacks (O'Reilly: 2006) & Microsoft Vista for IT Security Professionals (Syngress: 2007)

Former columnist for SecurityFocus & Linux Magazine

Former professional Blogger for The Open Source Weblog (also see personal blog)

Full list of publications at /writing/

Business Owner

Principal, WebSanity

Contact Info

scott at granneman dot com

314-644-4900 (office)

314-780-0489 (mobile)

Twitter: scottgranneman

Facebook: http://www.facebook.com/scottgranneman

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.

Required Texts

Readings will consist of articles, analyses, & ephemera from the Internet. While I'm not requiring any books, I recommend the following as particularly worthy of your attention:

• Eric Meyer: Eric Meyer on CSS
• Eric Meyer: More Eric Meyer on CSS
• Christopher Schmitt: CSS Cookbook
• Jeffrey Zeldman: Designing 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, at http://proquest.safaribooksonline.com.libproxy.wustl.edu/0321303474. If you are off-campus you will need to log in with your Wash U library ID and password.

In addition, students will need to sign up with the following listserv:

• GranneClass, the class listserv, hosted by Yahoo Groups. To subscribe, send a blank email to granneclass-subscribe@yahoogroups.com. To review the home page and look at 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. To send and receive email, you do NOT need to be a Yahoo member.

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.
• 2 in-class mini-projects (25% each): 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: 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.

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

Academic dishonesty

This course will follow Washington University's policies concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question and/or referral to the college's Academic Integrity Office, which has 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 writing should be your own. The 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.

Accommodation of disabilities

If you have a disability that might affect your ability to complete the required assignments, please contact me during the first week of class to discuss an accommodation.

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@granneman.com. If you'd like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

Background Materials

Following are materials that you should use to brush up on the knowledge you'll need to participate and succeed in this course.

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

Browser support for CSS (& some other technologies)

• CSS Compatibility and Internet Explorer ~ Microsoft's own tables for IE, from versions 5.5 to 9
• When can I use… ~ Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers
• Advanced: Guide to CSS support in email clients ~ HTML & CSS support in email clients is all over the map, so here's a guide to what email apps support what CSS

Selectors: the basis for CSS

• Selectutorial—CSS selectors ~ "Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses" (you do not need to look through "Selectors in action—a step by step tutorial", but it wouldn't hurt)
• Complete CSS Guide: Selectors ~ A tutorial on selectors
• Advanced: Selectoracle ~ Find out what some complicated selectors mean

Slides

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

font-family

• Advanced: Anchor Points: Fonts & font foundries ~ http://www.codestyle.org/css/font-family/AnchorPoints.shtml ~ Popular fonts & the companies who make them

font-size

• Relative font sizes and inheritance ~ http://www.maxdesign.com.au/presentation/relative/ ~ A look at relative font sizes
• Specifying small type sizes ~ http://www.wpdfd.com/editorial/wpd0303.htm#toptip ~ When to use pixels & when to use ems
• Sane CSS Sizes ~ http://www.thenoodleincident.com/tutorials/typography/index.html ~ An interesting solution to the problem of font size
• Ideal line length for content ~ http://www.maxdesign.com.au/presentation/em/ ~ Using ems to set the perfect line length for reading
• Advanced: The Trouble With EM & EN (and Other Shady Characters) ~ http://www.alistapart.com/articles/emen/ ~ A couple of years old, so it's now safer to use named entities instead of decimals, but it's an excellent overview
• Advanced: CSS Design: Size Matters ~ http://www.alistapart.com/articles/sizematters/ ~ Old & focusing on versions 4 & 5 of browsers, but still useful

Why browsers display fonts like they do

• Really Undoing html.css ~ http://www.meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/ ~ Eric Meyer explains how & why your Web browsers display HTML markup the way they do
• Fractionally Restoring html.css ~ http://www.meyerweb.com/eric/thoughts/2004/09/20/fractionally-restoring-htmlcss/ ~ After removing the built-in styles used by your web browser, Eric Meyer tells you how to restore the ones you need

font tricks

• Hanging Punctuation ~ http://www.realworldstyle.com/hang_punct.html ~ Line up the left margin of blockquote text

• CSS Design: Custom Underlines ~http://www.alistapart.com/articles/customunderlines/ ~ Change that boring underline to something more interesting & useful
• Link Styles ~ http://www.mako4css.com/BasLink.htm ~ The order that you specify links in your CSS matters—here's why

Slides

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

Practice in-class

Right-click and download this file for in-class practice with embedding fonts: http://files.granneman.com.s3.amazonaws.com/webdev/font-embed.htm

Abbreviations, Acronyms, & Definitions: JavaScript Tooltips

• overLIB, "a JavaScript library created to enhance websites with small popup information boxes (like tooltips)"
• Create a Nice, Lightweight JavaScript Tooltip: A walkthrough of HTML, CSS, & JavaScript needed to create a nicely-styled tooltip.
• jQuery Tooltip: The slickest, most full-featured way to create a JavaScript-based tooltip.

Headers

• Headings as images—The Lindsay method: Instead of text, use images … cleverly.

Cleaning up & Minifying CSS

• CSS Formatter and Optimiser: Reorganizes and minifies your CSS.
• Robson CSS Compressor: An online service that compresses your CSS.
• Dust-Me Selectors: A Firefox extension that finds unused CSS selectors on your website. You can then remove those selectors from your CSS.
• CSS Optimizer: Available as a command line program for Linux and Mac OS X, a Mac OS X app, & an online service, this one optimizes CSS code by stripping unneeded characters.

Float basics

• Floatutorial: "… the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts."
• CSS Floats 101: An article that shows you "exactly what the float property does to your elements and how incredibly useful it can be"
• Splitting the Difference ~ http://www.realworldstyle.com/split.html ~ A very cool use of the float property that makes it easy to understand
• Floating Thumbnails ~ http://www.realworldstyle.com/thumb_float.html ~ Rows of thumbnail images in a liquid design
• Floated items inside containers ~ http://www.maxdesign.com.au/presentation/floatsample.htm ~ Some details on the behavior of floated items in containers

Cool things to do with floats

• Boxpunch: Eric Meyer shows how to punch out the corner of a box for a very cool effect.

• Boxpunch, Formatting, Floats, Alternative Style Sheets

Switching CSS

• A prime example: css Zen Garden
• Alternative Style: Working With Alternate Style Sheets ~ A short how-to about how to switch between style sheets using JavaScript & cookies
• Advanced: Build a PHP Switcher ~ Switch between style sheets using PHP
• Advanced: Big, Stark & Chunky ~ Advice on designing your site for low vision users

Code

• A simple way to begin together: download http://files.granneman.com/webdev/css/styleswitch/media-specific-easy.zip
• 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

• About Conditional Comments ~ http://msdn.microsoft.com/en-us/library/ms537512.aspx ~ Microsoft's own explanation
• Conditional comments ~ http://www.quirksmode.org/css/condcom.html ~ Another explanation, with examples
• Conditional comments of IE ~ http://www.javascriptkit.com/howto/cc2.shtml ~ Yet another explanation, with examples

Lists for navigation

• List inheritance and Descendant Selectors ~ http://www.maxdesign.com.au/presentation/list_cascade/ ~ A short & simple illustration of an important concept
• Listutorial ~ http://css.maxdesign.com.au/listutorial/index.htm ~ "… the basics of building background image lists, rollover lists, nested lists and horizontal lists."
• CSS Design: Taming Lists ~ http://www.alistapart.com/articles/taminglists/ ~ Using CSS to do cool things with lists
• Taming the "Taming lists" model ~ http://www.maxdesign.com.au/presentation/tame/ ~ Improving Taming Lists to be even better
• pure CSS menus ~ http://www.meyerweb.com/eric/css/edge/menus/demo.html ~ Eric Meyer on turning lists into navigation menus
• Listamatic ~ http://css.maxdesign.com.au/listamatic/index.htm ~ Take one list coded in HTML, change the CSS, & get many different options
• Listamatic 2 ~ http://css.maxdesign.com.au/listamatic2/index.htm ~ Nested lists
• CSS navigation menu ~ http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml ~ A walkthrough for turning an unordered list into a horizontal nav menu
• CSS Showcase: A gallery of CSS menus/CSS navigation tabs ~ http://www.alvit.de/css-showcase/index.php ~ A collection of submitted web sites that have fancy navigation
• Advanced: Suckerfish Dropdowns ~ http://www.htmldog.com/articles/suckerfish/bones/ ~ Turn lists into cool dropdown menus with some CSS & some JavaScript
• Advanced: CSS Menus ~ http://www.s7u.co.uk/menus/index.html ~ 14 examples, and even though lists aren't used, they easily could be

More, & hopefully better, lists for navigation

• Experimental Menu #2—Magic Menu series ~ http://www.cssplay.co.uk/menus/magic_menu_two.html ~ Uses a small javascript file to rewrite the order of the link tags for Firefox and Mozilla only. This does require that the menu is placed in a div with an id. The id can have any name you like as long as this is placed in the body 'onload' javascript call. Works in IE5.5, IE6, IE7, Netscape, Opera, Firefox, Mozilla, and Safari.
• Experimental Menu #6—Magic Menu series ~ http://www.cssplay.co.uk/menus/magic_menu_six.html ~ Uses just CSS, no conditional comments, no behaviors, no hidden .htc file, and no javascript. The only downside is that it doesn't validate because of the use of the Microsoft proprietary 'comment' tag. This tag is used purely for IE5.5 and IE6 to work. Tested in IE5.5 (requires hacks for the faulty box model), IE6, IE7, Firefox, Opera, Netscape, Mozilla, and Safari.
• The ULTIMATE CSS only drop-down menu ~ http://www.cssplay.co.uk/menus/final_drop.html ~ This works in IE5.5, IE6, IE7, Firefox, Opera, Safari, Google Chrome, Netscape 9, and Mac Firefox 1.5 and Safari, though not Mac IE5.x.
• Dropdown with Flyout CSS Menus ~ http://www.cssmenus.co.uk/dropdown.html ~ The dropdown is limited to one level of flyout but this can easily be expanded to cater for multiple level flyouts.
• Create a multilevel Dropdown menu with CSS and improve it via jQuery ~ http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery ~ The CSS-only menu is cross browser tested and from what I can tell works with all browsers except for IE6. Internet Explorer needs the addition of our jQuery function to work properly.
• CSS only drop-down menu—further examples ~ http://www.cssplay.co.uk/menus/drop_examples.html ~ These menus should work in IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 etc., though not Mac IE5.x.
• ADxMenu: Horizontal menu, top to bottom ~ http://aplus.rs/adxmenu/examples/htb/ ~ Features the simplest possible HTML, simplest possible maintenance, ready-made CSS for basic work. It works using only CSS in all modern browsers: Firefox, Opera (9+ recommended), Safari, Camino, OmniWeb, Konqueror, IE7. For IE6, there's a small Javascript that circumvents the lack of li: hover support in it. For more info, see http://aplus.rs/adxmenu/.

Tabs

• Rounding Tab Corners ~ http://www.complexspiral.com/publications/rounding-tabs/ ~ Eric Meyer shows us how to create tabs with rounded corners
• An example at mozilla.org ~ http://www.mozilla.org/releases/mozilla1.8a1/README.html ~ A very cool use of the
  element & CSS
• Sliding Doors of CSS ~ http://www.alistapart.com/articles/slidingdoors/ ~ Creating CSS-based tabs (you'll need to download sliding_doors.zip for this reading)
• Sliding Doors of CSS, Part II ~ http://www.alistapart.com/articles/slidingdoors2/ ~ Sliding doors & CSS-based tabs, taken further
• Advanced: Tabs ~ http://www.brainjar.com/css/tabs/ ~ Build tabs with CSS

Drop-down menus

• The ULTIMATE CSS only drop-down menu ~ http://www.cssplay.co.uk/menus/final_drop.html ~ Easy, powerful drop-down menus … but fixed-width
• CSS-Based Navigation Menus: Modern Solutions ~ http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/
• CSSplay | CSS only menus ~ http://www.cssplay.co.uk/menus/ ~ An excellent, massive list of CSS-based navigation menu solutions
• CSS on mouseover Drop-down Menu ~ http://www.theimposter.org/examples/onhovermenu/ ~ Drop-down menus with CSS only

In-class practice

• Turning Lists Into Navigation

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

Centering

• CSS Centering—fun for all! ~ http://www.maxdesign.com.au/presentation/center/ ~ How to horizontally center in CSS
• Vertical Centering with CSS ~ http://www.wpdfd.com/editorial/wpd0103.htm#toptip ~ A trick that allows you to center
  's both horizontally AND vertically
• Advanced: Centering a site ~ http://www.quirksmode.org/css/centering.html ~ Center a block, horizontally & vertically, in a window
• Advanced: Centering: Auto-width Margins ~ http://bluerobot.com/web/css/center1.html ~ A method for centering, with a workaround for IE

How’m I doin’?

Evaluation form ~ https://spreadsheets.google.com/viewform?key=pb3ZUwzv8bbNcQOxB2YSCHw