Layout, Position, and Color Scheming with CSS

Overview Website Layout Using CSS –Considerations –CSS Positioning Frameworks –Positioning Tips and Tricks Color Color and CSS

Layout Considerations Consistency in rendering –Between browsers –Between platforms E.g. Non-GUI, CLI-based Browsers, , parsers –Between devices Printers Hand-held devices Other websites (industry, social, aggregators) Aural devices / Screen-readers

Layout Considerations (…) Accessibility –Vision impaired Consider element sizing model –Relative units of measurement “px” vs. “em” vs. “%” –Does site break at font-sizes > 24pt? 48pt? How big is big enough? Aural stylesheets –Added with CSS-2 –Allows for control of screen-readers / aural browsers Control voices, volume, 360 spacial orientation, delays/cues, audio mixing

Layout Considerations (…) Control vs. Flexibility –“Grid” Framework Strict control over text rendering, page elements and overall layout –Reasoning Readability – prevent overly long lines of text in wide windows Don’t want elements to “slide” around Trade-off: flexibility –Less control for page visitor on how page is displayed –May force visitor to right-scroll

Layout Considerations (…) –“Flow” Framework (not really a “framework”) Let each element know how to position itself relative to other element(s) and/or a containing element Leaves more up to the browser –Elements “slide” around to fit containing-element/window –Page conforms to fit large/small containing-element/window Allows for better rendering on hand-held devices (e.g. iPhone) Trade-off: Less control of layout, text rendering, and look/feel

CSS Positioning Relative positioning –Elements are positioned relative other elements and/or a containing element –Allows for greater rendering flexibility for the browser –Examples:

CSS Positioning Absolute Positioning –Elements are positioned inside a containing element with specific x,y (and z) coordinates “Could care less” about other elements inside the same container –Situations when absolute positioning is useful Need to make use of CSS-2’s “z-index” property –E.g. “pop-up” ad that needs to render “in-front” of the rest of the page An element must position itself within strict x,y coordinates –E.g. A CSS/js version of “Pac-Man” –BEWARE of using absolute positioning with non-relative units of measurement (e.g. “px” and “pt”).

CSS Positioning Lesson learned –Rounded tab box Different “box model” between FF/IE The solution: negative margins

CSS Positioning Tips/Tricks Negative margins –Example:

CSS Tips/Tricks The :hover psuedo-class –Useful for “rollover” effect, and SO much more! –Example: –Example: es.html es.html es.html

Color Scheming Many of the same rules as in painting/art Use “web safe” colors Limit number of colors on website –3 colors + black/white is a good rule of thumb Use color wheel to achieve different effects –High contrast pick two complimentary colors 3 rd color is intermediary –Low contrast pick two analogous colors 3rd color is intermediary –Monochromatic Pick one color Adjust brightness levels and saturation

Applying Color with CSS “background” property “color” property Cross-browser Transparent backgrounds –filter:alpha(opacity=60); –-moz-opacity: 0.6; –opacity: 0.6; span-for-all-browsers/ span-for-all-browsers/

Applying Color with CSS Layering divs to create color effect Example: l l l

Web Resources On Color Kuler: Swatch-based color-schemer RGB-based color-schemer: On CSS –CSS Positioning Resources CSS Positioning Introduction: –CSS Design Tutorials / Examples CSS Zen Garden: –“Select a design” to apply different stylesheets to the page, good example of the power of CSS Meyerweb.com: A List Apart: –Check out the “Topics” section –Layout Templates Open Source Web Design: –Good place to start when looking for inspiration

Additional Resources Firebug – IE Developer Toolbar – d=E59C D-4511-BB3E- 2D5E1DB91038&displaylang=en d=E59C D-4511-BB3E- 2D5E1DB91038&displaylang=enhttp:// d=E59C D-4511-BB3E- 2D5E1DB91038&displaylang=en CSS Vista – Supported CSS, by OS & Browser – support/basic_concepts.html support/basic_concepts.htmlhttp:// support/basic_concepts.html