The Zen of CSS Design: Visual Enlightenment for the Web

The Zen of CSS Design: Visual Enlightenment for the Web

Released February 2005
Publisher(s): Peachpit Press
ISBN: 9780321303479

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Proving once and for all that standards-compliant design does not equal dull design, this inspiring tome uses examples from the landmark CSS Zen Garden site as the foundation for discussions on how to create beautiful, progressive CSS-based Web sites. By using the Zen Garden sites as examples of how CSS design techniques and approaches can be applied to specific Web challenges, authors Dave Shea and Molly Holzschlag provide an eye-opening look at the range of design methods made possible by CSS (Cascading Style Sheets). By the time you've finished perusing the volume, you'll have a new understanding of the graphically rich, fully accessible sites that CSS design facilitates. In sections on design, layout, imagery, typography, effects, and themes, Dave and Molly take you through every phase of the design process--from striking a sensible balance between text and graphics to creating eye-popping special effects (no scripting required).

Table of contents

  1. Copyright
  2. Acknowledgments
    1. Dave Shea Thanks:
    2. Molly E. Holzschlag Thanks:
    3. From Both Dave and Molly
    4. Special Thanks
  3. About the Authors
    1. Dave Shea
    2. Molly E. Holzschlag
  4. Introduction
    1. What Is This Book About?
    2. Who Should Buy This Book?
      1. Designers
      2. Programmers
      3. CSS Novices
      4. Advanced CSS Users
    3. Conventions Used
    4. How Should I Use This Book?
      1. Chapter 1, View Source
      2. Chapter 2, Design
      3. Chapter 3, Layout
      4. Chapter 4, Imagery
      5. Chapter 5, Typography
      6. Chapter 6, Special Effects
      7. Chapter 7, Reconstruction
  5. 1. View Source
    1. View Source
      1. Genesis
      2. The Beginning of a Change
      3. Why these Standards?
      4. Planting the Seed
        1. Influences
        2. Early Thinking
      5. Default Design—Tranquille
      6. Implications
      7. Laying the Foundation
      8. Semantic Markup
      9. Building Great Markup
        1. Use a DOCTYPE
        2. Specify a Language/Character Set
        3. Title It
        4. Use the Proper Elements
        5. Avoid div-itis
        6. Minimize Markup
        7. Use class and id Appropriately
      10. The Test of Time
      11. Zen Garden Source HTML
      12. Visual Structure
      13. Designing For Flexibility
        1. Image Replacement
        2. Lighten Up
      14. Lessons Taught
      15. Benefits of Web Standards
        1. Smaller File Sizes and Quicker Downloads
        2. Increased Portability
        3. Better Accessibility
        4. Precise Control
      16. Lessons Learned
      17. Accessibility Checking
      18. Text Scalability
      19. XHTML and Mime Types
      20. Foreign Languages
        1. Character Encoding
        2. Translation Discrepancies
      21. Copyright and Theft
      22. Build it Bigger, Build it Better!
        1. CMS Zen Garden
        2. E-Commerce Zen Garden
        3. JavaScript Zen Garden
        4. XML/XSLT/RSS/Whatever Zen Garden
        5. So Where Are They?
  6. 2. Design
    1. Atlantis
      1. Minimalism
        1. Typography
        2. Iconography
        3. Line
        4. Margins
      2. Unity and Symbolism
        1. Consistency
        2. Representation
      3. Design Prerogative
    2. Zunflower
      1. Finding the Light
      2. Preserving the Shadow
      3. Getting into Shape
        1. Primary Shapes
        2. Combining Shapes for Maximum Impact
      4. Give Me My Space!
        1. Psychological and Social Relevance
        2. Positive and Negative Space
      5. Adding Professional Polish
    3. Springtime
      1. The Influence of Color
        1. Sending a Clear Message
        2. Color and the Human Psyche
        3. Color, Culture, and Gender
      2. Color Palettes for Web Sites
        1. Study the Audience
      3. Color Options in CSS
      4. Colorful Conclusions
    4. Viridity
      1. Pattern
      2. Texture
      3. Contrast
        1. High Contrast
        2. Low Contrast
        3. Color Blindness
      4. Unity
    5. Ballade
      1. Leading the Eye
      2. Thinking in CSS
        1. Old-School Woes
        2. New-School Flow
      3. Finding the Bridge
    6. Night Drive
      1. Visualizing Code
      2. Choices
      3. Absolute-Positioning Trickery
      4. Sleight of Hand
      5. Collapsing Margins
      6. Image Trickery
      7. One Small Step
  7. 3. Layout
    1. Backyard
      1. Layout Basics
        1. Absolute Positioning
        2. Floats
      2. Layout Methods
      3. Absolutely Complementary
    2. Entomology
      1. Fixed and Liquid Layouts
      2. Getting Centered
        1. Centered Design Using Auto Margins
        2. Centered Design Using Text-Align
        3. Combining Margin and Text Alignment
        4. The Negative-Margin Solution
      3. Staying Stylish
    3. White Lily
      1. Layout Principles for the Web
      2. Look Before You Leap
      3. Layout Solutions in White Lily
      4. Layout Inspiration and Guidelines
        1. User Interface Design
        2. Usability
      5. Follow a Process
    4. Prêt-à-porter
      1. Print Design as Inspiration
        1. Breaking the Rules
      2. The Horizontal Challenge
        1. Exploring Fixed Positioning
        2. Exploiting Browser Flaws
        3. Managing Opera
      3. Lessons Learned
    5. CS(S) Monk
      1. Positioning and Meaning
      2. The Grid
      3. Constructing the Grid
        1. Header
        2. Content Area
      4. Breaking Out of the Grid
        1. Absolute Positioning
        2. Relative Positioning
      5. Flexibility Within the Grid
    6. Not So Minimal
      1. Content Overflow
      2. Float Overflow
        1. Clearing Requires Markup
        2. Floats Require Precision
          1. Make the Area Wider
          2. Limit Content Width, Italics
          3. Limit Content Overflow
      3. Absolute-Positioning Overflow
        1. Vertical Overflow
          1. Use Floats Instead
          2. Design Around the Problem
          3. Limit Overflow
          4. Script Your Way Out of Trouble
          5. Use em Values Instead of px Values
      4. Design for the Overflow
  8. 4. Imagery
    1. Japanese Garden
      1. Image Formats
        1. Why Does Optimizing Matter?
      2. Understanding Image Choices
        1. Gif
        2. JPEG
        3. PNG
      3. Transparency Limitations
      4. Optimization Tricks
        1. GIF
        2. JPEG
        3. PNG
      5. A Tough Choice
    2. Revolution!
      1. Practical Application
      2. Image Replacement
      3. Responsible Replacement
      4. Better Techniques
        1. Developers Leahy/Langridge
        2. Rundle
        3. Levin
      5. Choices
    3. Deco
      1. A New Way of Thinking
      2. Intelligent Approaches to Imagery
        1. Image Weight and Size
        2. Number of Images
        3. Layers of Images
      3. Maximum Impact
    4. No Frontiers!
      1. The Rectangular Problem
      2. Getting Curvy
        1. Easy Curves: A Single Background Image
        2. Multiple Element Backgrounds
        3. Cornering Content
        4. Custom Bullets
      3. Well-Rounded Imagery
    5. Coastal Breeze
      1. The Starting Point
      2. Techniques
        1. Using Brushes and Transforms
        2. Using Dodge and Burn
      3. Creating Imagery
      4. Acquiring Imagery
        1. Commissioned and Royalty-Free
        2. Finding Alternative Sources
      5. Copyright Notes
      6. Verdict: The Painted Look
    6. What Lies Beneath
      1. Creating Environments
        1. Understanding the Details
        2. Creating A Sense of the Real
        3. Working With Levels
      2. Unrealistic Imagery in Simulated Environments
      3. Dimensional Lessons
  9. 5. Typography
    1. Oceans Apart
      1. Type Conventions
        1. Type Form
        2. Type Contrast
        3. Type Color
        4. Type Conventions in Oceans Apart
        5. Hue and Contrast Choices
        6. Size Contrast and Color
        7. Size Contrast and Weight
        8. Relationship of Headers and Text
      2. Learning from Simplicity
    2. si6
      1. Limited Font Choice
      2. Generic Font Families
      3. serif
        1. sans serif
        2. monospace
        3. cursive
        4. fantasy
      4. Vanilla’s Nice, but...
      5. Practical Font Selection
    3. Release One
      1. Font Size
      2. Browser Controls
      3. Relative vs. Absolute
      4. Pixels and Problems
        1. Starting Point
        2. Inconsistency and Rounding
        3. Compounding
      5. Sane Font Sizing
        1. The Em Method
        2. The Keyword Method
        3. The Style-Switching Method
      6. Which Method?
    4. Dead or Alive
      1. Decorative Flourishes
      2. Typographic Layout
      3. Optical Behavior
        1. Using Gravity to Lead the Eye
      4. Avoiding Comprehension Problems
        1. Header Text
        2. Body Text
        3. Accent Text
      5. Thoughtful Type, Graceful Design
    5. Blood Lust
      1. Setting the Tone with Type
      2. Formatting Options
        1. Text Styling
          1. Font-Variant
          2. Text-Transform
          3. Text-Decoration
        2. White-Space Styling
          1. line-height
          2. Letter-Spacing
          3. Word-Spacing
          4. Text-Align
      3. All Things in Moderation
    6. Golden Mean
      1. Selecting Type
        1. Experimenting in Illustrator
        2. Finding the Tension
        3. Control Over Anti-Aliasing
      2. Getting into Typography
        1. Books
        2. Online Type Resources
      3. Balance Is Key
  10. 6. Special Effects
    1. This is Cereal
      1. The Cascade
        1. Inheritance
        2. Specificity
          1. Controlling Specificity
          2. Debugging Specificity
        3. Overriding Specificity
      2. Layering
      3. Integration
    2. Gemination
      1. MOSe
        1. Child Selectors
        2. Adjacent Selectors
        3. Attribute Selectors And Pattern Matching
      2. CSS Signatures
      3. Comparing MOSe to Internet Explorer Styles
      4. Enhanced Gemination
      5. Future-Proof Design
    3. Bonsai Sky
      1. Versioning
        1. Black Border Positioning
        2. Black Border Workaround
        3. Buddha
        4. Sidebar Transparency
        5. Special Treats
      2. Judgment Calls
    4. Tulipe
      1. Exploring Pure CSS Menus
      2. Drop-Down Menus in Tulipe
        1. Turnabout Is Fair Play
        2. Separating Styles
        3. Advancing CSS
      3. Lessons Learned
    5. door to my garden
      1. Background Savvy
        1. Background Properties in CSS
        2. Adding a Background Image and Color
        3. Attaching Backgrounds
        4. Positioning Backgrounds
        5. Controlling Background Tiling
      2. Layout Choices
      3. Additional Style Effects
      4. Great Style, Simple CSS
    6. Elastic Lawn
      1. Paper or Plastic?
        1. Fixed Width
        2. Variable Width
      2. Elastic Design
        1. Repetition
        2. Cropping
        3. Bouncing Forward
  11. 7. Reconstruction
    1. Hedges
      1. Setting Boundaries
      2. Building Columns
      3. Image Tricks
      4. Formatting
      5. Finishing Up
    2. Radio Zen
      1. Setting the Stage
        1. Layout Skeleton
      2. Layering and Attachment
      3. Column Positioning
        1. A Text-Scaling Conundrum
      4. Exploring the Possibilities
    3. South of the Border
      1. Beginning Basic
      2. Styling the Container
      3. Reining In the Text
      4. Head ’em Up
      5. Now for the Footer
      6. Absolute Containment
      7. Rounding Up the Links
      8. Move’em Out
    4. Corporate ZenWorks
      1. Take a Letter
      2. Paper, Please
      3. Corporate Identity
      4. Linking In
      5. A Little Personality
      6. Send It On
    5. Open Window
      1. The Basics
      2. Fixing the Intro
      3. Up, Down, Left, Right
        1. A Step to the Right...
        2. A Jump to the Left...
        3. And Now for the Middle
      4. Styling the Content and Links
      5. Now for Opera
      6. Three in One
    6. mnemonic
      1. Problem Solving
        1. Building Imagery
      2. Moving Forward
        1. The Nature of the Problem
        2. Design List
        3. Previous/Next Links
      3. Making the Right Choice
  12. Closing Thoughts
    1. CSS Crib Sheet
      1. When in doubt, validate
      2. Build and test your CSS in the most advanced browser available before testing in others, not after
      3. When relying on floats for layouts, make sure they clear properly.
      4. Margins collapse; apply padding or a border to avoid
      5. Try to avoid applying padding/borders and a specific width or height to an element
      6. Avoid the “Flash of Unstyled Content” in Internet Explorer 6 for Windows
      7. Don’t rely on min-width/min-height
      8. When in doubt, decrease percentage values
      9. Content not showing up properly in Internet Explorer?
      10. Make sure your desired effect actually exists
      11. Remember “LoVe/HAte” linking
      12. Remember “TRouBLed” shorthand
      13. Specify units for non-zero values
      14. Test different font sizes
      15. Match cases between your HTML and CSS
      16. Test embedded; launch imported
      17. Add obvious borders to help debug layouts
      18. Don’t use single quotation marks around paths for images
      19. Be careful when styling links if you’re using anchors
      20. Don’t link to empty style sheets as “placeholders” for future style sheets (like handheld or print media style sheets)
    2. Understand the Problem
    3. Other Resources
    4. CSS Design Web Sites
      1. CSS Discuss
      2. CSS at MaxDesign
      3. CSS/Web Standards Links
      4. Holy CSS Zeldman!
      5. Position is Everything
    5. Publications
      1. A List Apart
      2. Digital Web Magazine
      3. Web Standards Project Buzz
    6. Books
    7. Submit Your Own!

Product information

  • Title: The Zen of CSS Design: Visual Enlightenment for the Web
  • Author(s):
  • Release date: February 2005
  • Publisher(s): Peachpit Press
  • ISBN: 9780321303479