1. Layout, Position, and Color Scheming with CSS

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

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

4. 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

5. 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

6. 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

7. CSS Positioning Relative positioning –Elements are positioned relative other elements and/or a containing element –Allows for greater rendering flexibility for the browser –Examples: http://chrisforee.com/collab/ex02.html http://yaml.de/en

8. 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”).

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

10. CSS Positioning Tips/Tricks Negative margins –Example: http://chrisforee.com/collab/ex05.html http://chrisforee.com/collab/ex05.html

11. CSS Tips/Tricks The :hover psuedo-class –Useful for “rollover” effect, and SO much more! –Example: http://tinyurl.com/3sev2n http://tinyurl.com/3sev2n –Example: http://www.cssplay.co.uk/menus/drop_exampl es.html http://www.cssplay.co.uk/menus/drop_exampl es.html http://www.cssplay.co.uk/menus/drop_exampl es.html

12. 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

13. Applying Color with CSS “background” property “color” property Cross-browser Transparent backgrounds –filter:alpha(opacity=60); –-moz-opacity: 0.6; –opacity: 0.6; http://www.canerten.com/transparent-div- span-for-all-browsers/ http://www.canerten.com/transparent-div- span-for-all-browsers/

14. Applying Color with CSS Layering divs to create color effect Example: http://www.chrisforee.com/collab/ex06.htm l http://www.chrisforee.com/collab/ex06.htm l http://www.chrisforee.com/collab/ex06.htm l

15. Web Resources On Color Kuler: http://kuler.adobe.com http://kuler.adobe.com Swatch-based color-schemer http://colorschemer.com/online.html http://colorschemer.com/online.html RGB-based color-schemer: http://websitetips.com/colortools/sitepro http://websitetips.com/colortools/sitepro On CSS –CSS Positioning Resources CSS Positioning Introduction: http://brainjar.com/CSS/positioning/ http://brainjar.com/CSS/positioning/ –CSS Design Tutorials / Examples CSS Zen Garden: http://csszengarden.com http://csszengarden.com –“Select a design” to apply different stylesheets to the page, good example of the power of CSS Meyerweb.com: http://meyerweb.com/eric/css/ http://meyerweb.com/eric/css/ A List Apart: http://alistapart.com http://alistapart.com –Check out the “Topics” section –Layout Templates Open Source Web Design: http://oswd.org http://oswd.org –Good place to start when looking for inspiration

16. Additional Resources Firebug –https://addons.mozilla.org/en-US/firefox/addon/1843 https://addons.mozilla.org/en-US/firefox/addon/1843 IE Developer Toolbar –http://www.microsoft.com/downloadS/details.aspx?familyi d=E59C3964-672D-4511-BB3E- 2D5E1DB91038&displaylang=en http://www.microsoft.com/downloadS/details.aspx?familyi d=E59C3964-672D-4511-BB3E- 2D5E1DB91038&displaylang=enhttp://www.microsoft.com/downloadS/details.aspx?familyi d=E59C3964-672D-4511-BB3E- 2D5E1DB91038&displaylang=en CSS Vista –http://litmusapp.com/labs http://litmusapp.com/labs Supported CSS, by OS & Browser –http://www.westciv.com/style_master/academy/browser_ support/basic_concepts.html http://www.westciv.com/style_master/academy/browser_ support/basic_concepts.htmlhttp://www.westciv.com/style_master/academy/browser_ support/basic_concepts.html