design:
"A Standardista's Alphabet" : http://www.alistapart.com/articles/alphabet
"Web3.0" : http://www.alistapart.com/articles/web3point0
what's wrong with the web2.0 buzz; Jan '06; Zeldman
"Where Am I" : http://www.alistapart.com/articles/whereami
"Home Page Goals" : http://www.alistapart.com/articles/homepagegoals
"Design Choices ..." : http://www.alistapart.com/articles/designcancripple
(about testing, with a specific example)
"Good Designers Redesign,
Great Designers Realign" http://www.alistapart.com/articles/redesignrealign
Jakob Nielsen's "Top Ten Mistakes in Web Design"
http://www.useit.com/alertbox/9605.html
"Avoid within-page links":
http://www.useit.com/alertbox/within_page_links.html
"Screen Resolution and Page Layout", usability recommendations, July 2006
http://www.useit.com/alertbox/screen_resolution.html
Steve Krug, "Don't Make Me Think" http://www.sensible.com
"If you really want to know if your web site works, ask your next
door neighbor to try using it, while you watch. (You bring the beer.)"
* 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
===================================
topics:
XHTML
yes:
no:
See appendix C in WebDesign for character entities & etc
Basic structure
Text
block
Other
Links
...
target="_blank" or target="somename" : POP-UPS (hmmm)
mailto:user@host
Images
most common
alt="..." (REQUIRED)
width="" height="" (suggested; quicker layout)
favicon :
in header :
Objects : flash, multimedia, and all that
... still not consistent across browsers;
see discussion on pg 197 of WebDesign
youtube :
Forms
Frames
... I don't like 'em myself; not forward compatible, for one thing
* http://www.w3.org/Style/CSS/ *
* http://www.w3.org/TR/CSS21/ * CCS 2.1 spec
* 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:
This is orange
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:
list of types: (with various properties: paged, interactive, ...)
braille, embossed, speech, tty,
handheld, tv, projection,
screen, print, all
* box model : content < padding < border < margin
top right bottom left
other properties:
border-style, collapse,
height, width, min-*, max-*
visibility: visible | hidden
* units: px, em, %
* block level vs inline (and variations) : can be modified explicitly
* positioning: normal, float, absolute
* layers: z-index
* colors and backgrounds:
* fonts: font-family, font-style, font-weight, font-size, ...
* text: text-align, text-indent, text-deoration, white-space, ...
default HTML 4 stylesheet :
http://www.w3.org/TR/CSS21/sample.html
full property table :
http://www.w3.org/TR/CSS21/propidx.html
* case studies :
- from opensourcewebdesign
- typical layout
- menus (various levels of complexity)
- browser bugs
--------------
http://www.alistapart.com/articles/holygrail
3 column, liquid center
http://www.code-sucks.com/css%20layouts/index.php
http://www.code-sucks.com/free-css-templates/
9 best CSS resources - Aug 2006 (Hmmmm)
http://www.leahey.org/2006/08/25/the-9-best-css-resources/
---------------
-- basecamp --
http://www.37signals.com/
http://www.backpackit.com/
-- typical modern commercial site --
http://www.smartbrief.com/index.jsp
-- interesting example of effective web design --
http://www.google.com/analytics/conversionuniversity_ac.html
http://rgruet.free.fr/PQR24/PQR2.4.html
http://www.google.com/support/analytics/bin/answer.py?answer=27229
-- google doesn't validate - why ? --
http://www.markkawakami.com/entries/1184.html
answer : *bandwidth* , consistent enough w/ everything, ... why else?
http://googleenterprise.blogspot.com/ ... but this one does
http://www.w3.org/QA/2002/04/valid-dtd-list.html
------------
http://www.cssplay.co.uk/
"Experiments with Cascading Style Sheets"
http://www.cssplay.co.uk/menu/photo_album.html
- show different photos in same rectangle,
using only CSS, no JavaScript (!)
http://www.cssplay.co.uk/menus/tutorial.html
- button tutorial
----------------
http://www.positioniseverything.net/
- lots of articles, layouts, and bug lists
http://www.positioniseverything.net/articles/onetruelayout/example/rounded
http://www.brainjar.com/css/positioning/
- nice overview of box model, floats, and positioning
http://www.brainjar.com/css/using/default.asp
- overview of selectors and stylesheets 101
-----------------
http://www.brunildo.org/test/
- articles and examples
http://www.456bereastreet.com/lab/
- articles and examples
http://www.brainjar.com/
- ditto
- also several interesting stylesheet variations for his page
- also has some ajax examples
- tabs : http://www.brainjar.com/css/tabs/ (uses some javascript)
http://www.culturedcode.com/css/
- css 2.1 properties reference
-------------------
http://www.positioniseverything.net/explorer.html - explorer bugs