Design for the Web 2

---

49540 FALL 2008

---

Weeks 5 & 6

ZEN CSS EXAMPLES

ZEN CSS EXAMPLES: Visual Themes, Motifs
http://www.csszengarden.com/005/ Grunge

http://www.csszengarden.com/059/ Egyptian

http://www.csszengarden.com/084/ Retro

http://www.csszengarden.com/103/ Classical

http://www.csszengarden.com/059/ William Morris

http://www.csszengarden.com/182/ 50's Retro

http://www.csszengarden.com/189/ Mozart

http://www.csszengarden.com/199/ Army

ZEN CSS EXAMPLES: fontsizing

023/keyword fonts

063/% fonts, emwidths

093/% fonts

152/% fonts

135/em fonts

084/em fonts

index of all csszen designs: http://www.mezzoblue.com/zengarden/alldesigns/

---

• BE SURE TO READ THE BOLD REFERENCES •

FONT sizing, general

http://css- discuss.incutio.com/?page=UsingFontSize Font sizing

http://www.elsid.co.za/download/css_fontsizes.htm Examples of font sizes

http://http: // css-discuss.incutio.com/?page=ForceFontSize Forced font sizing

---

Monitor Resolution and Font Sizing

http://www.artlebedev.com/mandership/70/ Screen Resolution and pixel sizing

http://pfunked.net/articles/css_font_sizing Screen resolution and font sizing

http://hsivonen.iki.fi/units/ Points and Pixels as Units; Monitor Resolutions

http://www.wordstar.org/computing/pages/monitor_cal.htm [Windows] default display font size

---

KEYWORDS sizing

http://css-discuss.incutio.com/?page=UsingKeywords sizing with keywords

http://www.alistapart.com/stories/sizematters/ Article on keyword sizing [2001]

PIXEL-based sizing

http://css-discuss.incutio.com/?page=UsingPixels Sizing with Pixels; also see the references on Monitor Resolution

%-based sizing

http://www.maxdesign.com.au/presentation/relative/ Relative Font Sizing

http://f6design.com/journal/2006/07/14/relative-font-sizing-made-easy/ Relative font sizing with %; explains the IE sizing fix

http:// css- discuss.incutio.com/?page=UsingPercentages Percentage-based sizing

PERFECT layouts

'perfect' layouts Perfect/%/non-breaking layouts • BE SURE TO READ THIS•

'perfect' floats layout Adaptable floats • BE SURE TO READ THIS•

http://jontangerine.com/log/2007/09/the- incredible-em-and-elastic-layouts-with-css More on em-based layout • BE SURE TO READ THIS•

---

the 'SANE' approach

http: //www.thenoodleincident.com/tutorials/box_lesson/font/ Examples of sizing across different browsers, with screenshots. Extensive list of exceptions.

http://www.thenoodleincident.com/tutorials/typography/index.html The 'sane' approach.

Use the 'SANE' template at http://www.thenoodleincident.com/tutorials/typography/template.html as a good model for graduated sizes.

The CSS for that page is here: http://www.thenoodleincident.com/tutorials/typography/css/real.css

http://www.thenoodleincident.com/tutorials/typography/ incremental_differences.html Incremental differences across multiple browsers

---

Articles on POSTIONING, various

3- column stretch Positioning using one fluid column

www.positioniseverything.net/articles/onetruelayout/ Position is Everything article: looking for good working models

http://www.positioniseverything.net/articles/onetruelayout/example/ combinedfirefoxfix The Position-is-everything Layout

table of 3-column layouts 3-Column layouts

CSS Positioning Links to examples of CSS positioning

---

XRAY Tool

Xray tool for CSS analysis: http://www. westciv.com /xray/xray_more.html

---

class site: http:// www.annetteweintraub.com/courses/49540/49540.html