1 / 16

Mastering CSS Layout, Positioning, and Color Scheming for Websites

Learn how to optimize website layout using CSS, position elements effectively, and create captivating color schemes. Explore positioning frameworks, color considerations, and maximize accessibility and flexibility.

javier
Download Presentation

Mastering CSS Layout, Positioning, and Color Scheming for Websites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Layout, Position, and ColorScheming 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

  11. CSS Tips/Tricks • The :hover psuedo-class • Useful for “rollover” effect, and SO much more! • Example: http://tinyurl.com/3sev2n • Example: http://www.cssplay.co.uk/menus/drop_examples.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 • 3rd 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/

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

  15. Web Resources • On Color • Kuler: http://kuler.adobe.com • Swatch-based color-schemer http://colorschemer.com/online.html • RGB-based color-schemer: http://websitetips.com/colortools/sitepro • On CSS • CSS Positioning Resources • CSS Positioning Introduction: http://brainjar.com/CSS/positioning/ • CSS Design Tutorials / Examples • CSS Zen Garden: 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/ • A List Apart: http://alistapart.com • Check out the “Topics” section • Layout Templates • Open Source Web Design: http://oswd.org • Good place to start when looking for inspiration

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

More Related