Oct 6

third class - XHTML and CSS part 2

preliminaries

questions
today
- more XHTML and CSS
- various examples
- discuss your projects' progress
aside 1 : this site does not validate
aside 2 : weird characters on Q and A

simple example

Before jumping in, let's remember what this stuff looks like. I'll come back to this example after an overview of tags, properties, and all that.

example : source | page | without css or jpg

XHTML

     yes:  <![CDATA[ ... ]]>
     no:   <!--  ... javascript ... -->
 
     See appendix C in WebDesign for character entities &amp; etc
     Basic structure
       <head></head><body></body>
     Text 
       block
         <h1>...</h1> and other sizes
         <p> ... </p> always starts a new line
         <pre> ... </pre>
       inline:
         sub, sup, cite, code, strong, em, ...
         <br />
     Generic
       block
         <div>...</div>
       inline
         <span>...</span>
     Lists (block by default) and Tables
        <ul> <li>...</li> <li>...</li> </ul>
        similar for ol (ordered lists)
        <dl> <dt>tag</dt><dd>data</dd> <dt>tag</dt><dd>data</dd> </dl> 
        <table> <tr><td>..</td><td>..</td></tr> <tr>...</tr> </table>
     Other
        <hr />
     Links
        <a href="...">...</a>
        <a name="..."></a>
          target="_blank"  or target="somename" : POP-UPS (hmmm)
          mailto:user@host
     Images
        <img ... />  most common
           alt="..." (REQUIRED)
           width="" height="" (suggested; quicker layout)
        favicon :
           in header : <link rel="icon" href="***.ico" type="image/x-icon" />
     Objects : flash, multimedia, and all that
        ... still not consistent across browsers; 
        see discussion on pg 197 of WebDesign
      youtube's version :
      <object width="425" height="350">
       <param name="movie" value="http://www.youtube.com/v/r6tlw-oPDBM"></param>
       <param name="wmode" value="transparent"></param>
       <embed src="http://www.youtube.com/v/r6tlw-oPDBM"
          type="application/x-shockwave-flash" wmode="transparent" width="425"        
          height="350"></embed>
      </object>
 
     Forms
       <form action="url" method="get">  or method="post"
         <input type="text" name="..." /> lots of types
         <textarea name="..."> ... 
       </form>

CSS

It's all about

selectors : picking an XHTML tag to work on
properties : choosing some visual thing about that tag to modify
values : understanding what you can set the properties to

 selector {
   property : value; 
 }

The real source for the details :

http://www.w3.org/Style/CSS/
http://www.w3.org/TR/CSS21/ : CCS 2.1 spec

Here's the overview of the important concepts.

 * names
     CSS names 
 * cascade (in order of precedence)
     first  : match media type
     second : find selectors that match
     third  : browser < author < author !important < user !important
     fourth : more specific 
     fifth  : latest specified 
 * selectors
     tag_name
     .class
     #id
     "pseudo  (:hover, :active)
     [attribute]   (pick elements that have an attribute set)
     nesting: 
 * syntax examples:
 
     /* css comment looks like this */
 
     css:    div font[color] { color: orange !important; }
       would change things like
     xhtml:  <div><p>This is <font color="red">orange</font></p></div>
       since there is a font tag 
 
   Also, can specify multiple selectors with commas, e.g.
     css:     div, p, #stuff { border: 10px; }
    
   There are also special symbols for direct child (namely '>')
   and sibling ('+') but I've had mixed luck across browsers with 'em.
 
 * media types :
    css: 
           @import url(fancyfonts.css) screen;
           /* or */
           @media print { /* style sheet goes here */ }
 
   xhtml:  <head> <link rel="stylesheet" type="text/css" 
                        media="print, handheld" href="print.css"> </head>
 
   list of types: (with various properties: paged, interactive, ...)
           braille, embossed, speech, tty,
           handheld, tv, projection,
           screen, print, all
 
 * units: px, em, %
    see http://www.w3.org/TR/CSS21/syndata.html#length-units
 
 * colors and backgrounds: 
    url(), name (e.e. white red yellow, ...), #rgb or #rrggbb in hex
    see http://www.w3.org/TR/CSS21/syndata.html#color-units
 * background-image and background-repeat
    see http://www.w3.org/TR/CSS21/colors.html
    Note that often a very narrow image is used for fixed-width layouts
    which repeats down the length of the page, to give left/right borders
 
 * box model : content < padding < border < margin
               top right bottom left
               other properties:  
                 border-style, collapse, 
                 height, width, min-*, max-*
                 visibility: visible | hidden
     width and height refers to content only; margin+border+padding are extra
     see http://www.w3.org/TR/CSS21/box.html#box-dimensions
 
 * positioning - this can get often get pretty tricky
   * three properties: display, position, float
     see http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
 
 * display: inline | block | none | ...
     see http://www.w3.org/TR/CSS21/visuren.html#propdef-display
     Everything in the page is either a block (div, table, ...)
     or 'inline' with other text (span, strong, ...).
     You can modify this property directly, say, to make list items
     display horizontally like text.
     Note that images are inline by default.
 
 * position: static (i.e. normal) | relative | fixed | inherit
     Where to put something :
     'absolute' : absolute position in parent block; on top or behind other stuff
     'fixed' : doesn't scroll with window
     'relative' : leave space for it as usual, but offset it a bit
 
 * float: left | right | none
     Move this thing to the side and let other stuff wrap around it.
     The 'clear' property makes something else go below a float.
 
 * layers: z-index lets you put blocks in front or or behind other blocks
 
 * fonts and text : 
     Properties are font-family, font-style, font-weight, font-size, ...
     There are elaborate discussions as to how to best set the sizes
     of things so that everthing works nicely.  Some people swear by pixels.
     Other like 'em' so that when the font size changes, everything changes.
 
     font-size: 
     'Web Design' books suggests :
        body {font-size: 76%;}    /* which gives 12 pixel text usually */
        p {font-size: 1em}
        h1 {font-size: 1.5em}
     zeldman likes '62.5% solution' described at http://www.clagnut.com/blog/348
        body {font-size: 62.5%}   /* which gives 1em=10px usually */
        #main {font-size: 1.2em}  /* back to 12px text */
        h1 {font-size: 2em}       /* for h1's inside #main, 24px headings */
 
   lots of other goodies; see chap 18 in 'Web Design' for the details.
 
 * default HTML 4 stylesheet : http://www.w3.org/TR/CSS21/sample.html
 * full property table : http://www.w3.org/TR/CSS21/propidx.html
 
 * IE5 and IE6 break a lot of the rules, especially in regards to box layout;
   see for example  http://www.positioniseverything.net/explorer.html

Got all that? Sure you do.

In practice we all look hard at other people's CSS, and borrow and adopt what works for them. Even the best folks out there do this.

In spite of its power, CSS is often more frustrating than inspiring. There are a lot of things you can't do (no variables, so no "2px more than that", for example). The wikipedia:cascading style sheets discusses some of the other problems.

So let's look at some examples.

examples

Jim's simple example : source | page | css | without css or jpg

http://www.smartbrief.com - a small but clean modern business example
- http://www.smartbrief.com/about/board.jsp

http://www.glish.com/css/ - some common layout themes

http://www.openwebdesign.org - many interesting examples

http://www.cssplay.co.uk/ - many interesting examples of amazing CSS effects
- http://www.cssplay.co.uk/menu/photo_album.html
- http://www.cssplay.co.uk/menus/tutorial.html

design

Jim's questions to ask :

    * in 2 seconds, what is this?
    * billboard test :
      * clear visual hierarchy
      * conventions used / abused
      * clearly defined areas
      * where can I click?
      * minimize noise
    * navigation :
      * where am I now?
      * where can I go?
      * site layout, breadcrumbs, hierarchy
    * accessibility :
      * legibility
      * key info "above the fold"? At what size?
      * resizing text and/or window size (800x600 ... 1280x1024)
      * browser compatibility , handhelds
      * does it break gracefully?
    * Jim's pet peeves :
      * does it validate?
      * who, when, copyright
    * artistic merit :
      * home page vs interior
      * match for intended audience?
      * cohesion, identity
      * tagline
      * images, colors, typeface : what and why
    * sucky stuff :
      * garish (... is in the eye of the beholder?)
      * mystery meat
      * pop ups (Jim's opinion : let *me* decide, eh?)
      * slow load time

And when looking at other sites :

 * How do they do what they do?
 * Is there stuff there that can help me?

some sites to look at and dicuss

http://www.google.com/analytics/conversionuniversity_ac.html
http://www.clagnut.com/blog/348
http://www.backpackit.com/
http://www.brainjar.com/
http://www.flickr.com/
- http://www.flickr.com/explore/interesting/7days/ - inside
http://www.archive.org
http://bleb.org/random/ - take a few random jumps

your projects

assignment for next time

... see the assignments page

http://cs.marlboro.edu/ courses/ fall2006/web_design/ notes/ oct_6
last modified Friday October 6 2006 2:10 pm EDT

attachments

name last modified size

WebDesign

course

navigation