Designing With Web Standards, Second Edition

Designing With Web Standards, Second Edition

by jeffrey zeldman
Released July 2006
Publisher(s): New Riders
ISBN: 9780321385550

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

Best-selling author, designer, and web standards evangelist Jeffrey Zeldman has updated his classic, industry-shaking guidebook. This new edition--now in full color--covers improvements in best practices and advances in the world of browsers since the first edition introduced the world to standards-based design. Written in the same engaging and witty style, making even the most complex information easy to digest, it remains an essential guide to creating sites that load faster, reach more users, and cost less to design and maintain.

Readers will learn from Jeffrey's insights as he demonstrates how web standards are driving search engine friendliness ("findability") and the Web 2.0 applications that have reinvigorated the medium and the online marketplace. Readers will discover new techniques to make CSS layouts work better across multiple browsers and ways to make web content more accessible.

Designing with Web Standards is an AIGA Design Press book, published under Peachpit's New Riders imprint in partnership with AIGA.

Table of contents

  1. Copyright
    1. Dedication
  2. About Jeffrey Zeldman (author)
  3. Ethan Marcotte (technical editor, second edition)
  4. J. David Eisenberg (technical editor, first edition)
  5. Eric Meyer (technical editor, first edition)
  6. Thank You
  7. Tell Us What You Think
  8. Introduction
    1. One Size Does Not Fit All
      1. Theory Versus Practice
    2. A Continuum, Not a Set of Inflexible Rules
      1. Show, Don’t Sell
      2. Let Your Work Do the Selling for You
      3. Selling In-House
    3. The Smell of Change
  9. I. Houston, We Have a Problem
    1. Before You Begin
      1. Spiraling Costs, Diminishing Returns
      2. Ending the Cycle of Obsolescence
      3. What Is Forward Compatibility?
      4. No Rules, No Dogma
      5. Practice, Not Theory
      6. Is This Trip Really Necessary?
    2. 1. 99.9% of Websites Are Still Obsolete
      1. Modern Browsers and Web Standards
        1. New Code for a New Job
      2. The “Version” Problem
      3. Backward Thinking
        1. Outdated Markup: The Cost to Site Owners
          1. T1 Terminator
          2. Metered Megabytes
        2. Backward Compatibility
        3. Blocking Users Is Bad for Business
        4. The Road to Stupidville
          1. How Do I Code Thee? Let Me Count the Ways.
      4. When Good Things Happen to Bad Markup
        1. Junk Markup Might Be Hazardous to Your Site’s Long-Term Health
      5. The Cure
    3. 2. Designing and Building with Standards
      1. Jumping Through Hoops
      2. The Cost of Design Before Standards
      3. Modern Site, Ancient Ways
      4. The Tragic Kingdom
      5. The Trinity of Web Standards
        1. Structure
        2. Presentation
        3. Behavior
      6. Into Action
      7. Benefits of Transitional Methods
      8. The Web Standards Project: Portability in Action
        1. One Document Serves All
      9. A List Apart: One Page, Many Views
        1. Design Beyond the Screen
        2. Time and Cost Savings, Increased Reach
      10. Where We Go from Here
        1. Transitional Forward Compatibility (Hybrid Design)
        2. Strict Forward Compatibility
    4. 3. The Trouble with Standards
      1. Lovely to Look At, Repulsive to Code
        1. Common Goals, Common Means
        2. Perception Versus Reality
      2. 2000: The Year That Browsers Came of Age
        1. IE5/Mac: Switching and Zooming
        2. Netscape’s Bold Move
        3. The Floodgates Open
      3. Too Little, Too Late?
        1. CSS: The First Bag Is Free
      4. Bad Browsers Lead to Bad Practices
        1. The Curse of Legacy Rendering
        2. Inherit the Wind
        3. Miss Behavior to You
        4. Standardized Scripting at Long Last
      5. Confusing Sites, Bewildering Labels
        1. Academics Versus Economics
        2. Consortia Suggest, Companies Sell
        3. Product Awareness Versus Standards Awareness
      6. The F Word
        1. The Value of Flash
        2. The Trouble with Flash
        3. The Other Trouble with Flash
      7. Compliance Is a Dirty Word
        1. The Power of Language to Shape Perceptions
        2. The Inspiration Problem
        3. Other Problems
    5. 4. Findability, Syndication, Blogs, Podcasts, the Long Tail, Ajax (and Other Reasons Standards Are Winning)
      1. The Universal Language (XML)
        1. XML and HTML Compared
        2. One Parent, Many Children
        3. An Essential Ingredient of Professional and Consumer Software
        4. More Popular Than a White Rapper
          1. Not a Panacea, But Plays One on TV
        5. Builds Strong Data Five Ways
        6. A Mother Lode of Inventions
          1. Extensible Stylesheet Language Transformations (www.w3.org/TR/xslt)
          2. Resource Description Framework (www.w3.org/RDF)
          3. Rich Site Summary 2.0 (blogs.law.harvard.edu/tech/rss)
          4. XMLHttpRequest (en.wikipedia.org/wiki/XMLHttpRequest)
          5. XML-RPC (www.xmlrpc.com)
        7. Web Publishing Tools for the Rest of Us
        8. At Your Service(s)
      2. XML Applications and Your Site
      3. Compatible by Nature
      4. A New Era of Cooperation
        1. Test Suites and Specifications
        2. How Suite It Is
        3. WHAT Working Group
        4. Internet Explorer 7 and The Web Standards Project
      5. Web Standards and Authoring Tools
        1. The Dreamweaver Task Force
        2. WYSIWYG Tools Come of Age (Two Out of Three Ain’t Bad)
        3. From FrontPage to Expression Web Designer
      6. The Emergence of CSS Layout
        1. The Browser Upgrade Campaign
          1. Browser Upgrades Used and Abused
          2. A Kinder, Gentler Upgrade Path
        2. The Flood Begins
        3. Countless Converts and the Help Sites They Rode in On
        4. The Ultimate CSS Knowledge Base
      7. Faddishness...with a Purpose
        1. Leadership Comes from Individuals
        2. The Mainstreaming of Web Standards
          1. Commercial Sites Take the Plunge
        3. Wired Digital Converts
        4. Turning On Designers
        5. The Hits Keep Coming
        6. The Road to Joy Is Paved with Validation
  10. II. Designing and Building
    1. 5. Modern Markup
      1. The Secret Shame of Rotten Markup
      2. A Reformulation of Say What?
      3. Executive Summary
      4. Which XHTML Is Right for You?
        1. XHTML 2—For Me and You?
        2. Top 10 Reasons to Convert to XHTML
        3. Top 5 Reasons Not to Switch to XHTML
    2. 6. XHTML: Restructuring the Web
      1. Converting to XHTML: Simple Rules, Easy Guidelines
        1. Open with the Proper DOCTYPE and Namespace
          1. Why a DOCTYPE?
          2. Which DOCTYPE Is Your Type?
          3. Follow DOCTYPE with Namespace
        2. Declare Your Content Type
          1. The XML Prolog (And How to Skip It)
        3. Write All Tags in Lowercase
          1. Don’t Worry About the Case of Attribute Values or Content
        4. Quote All Attribute Values
        5. All Attributes Require Values
        6. Close All Tags
        7. Close “Empty” Tags, Too
        8. No Double Dashes Within a Comment
        9. Encode All < and & Characters
      2. Executive Summary: The Rules of XHTML
        1. Character Encoding: The Dull, the Duller, and the Truly Dull
          1. Unicode and Other Character Sets
          2. What Is ISO 8859?
          3. Mapping Your Character Set to Unicode
        2. Structural Healing—It’s Good for Me
        3. Marking Up Your Document for Sense Instead of Style
          1. Color Within the Outlines
          2. Use Elements According to Their Meaning, Not Because of the Way They “Look”
          3. Prefer Structural Elements to Meaningless Junk
      3. Visual Elements and Structure
    3. 7. Tighter, Firmer Pages Guaranteed: Structure and Meta-Structure in Strict and Hybrid Markup
      1. Must Every Element Be Structural?
        1. div, id, and Other Assistants
          1. A Generic Mechanism for Specific Structures
          2. id Versus class
          3. The Sticky Note Theory
          4. The Power of id
        2. Semantic Markup and Reusability
          1. Table-free Image Groupings
      2. Hybrid Layouts and Compact Markup: Dos and Don’ts
        1. Giving Names to Bad Things
        2. Common Errors in Hybrid Markup
          1. Classitis: The Measles of Markup
          2. The Heartbreak of Divitis
        3. divs Are Just All Right
          1. Why a div?
        4. Loving the id
          1. But What About Images?
        5. Banish Redundant Table Cells
      3. Outdated Methods on Parade
        1. The Year of the Map
        2. The Map and Its Discontents
        3. No Access, No Structure
        4. Slicing and Dicing
        5. The Slice Comes of Age
          1. In Defense of Navigational Table Layouts
        6. The Redundant Verbosity of Redundantly Verbose Tables
        7. Bad CSS Comes to Town
          1. Party Like It’s 1997
        8. Moving On
    4. 8. XHTML by Example: A Hybrid Layout (Part I)
      1. Benefits of Transitional Methods Used in These Chapters
        1. Style Sheets Instead of JavaScript
      2. Basic Approach (Overview)
        1. Separate Tables: CSS and Accessibility Advantages
          1. The Table Summary Element
          2. Page Structure and id
        2. The What and Why of Skip Navigation
          1. Skip Navigation and accesskey
          2. accesskey: Good News, Bad News
          3. accesskey and iCab
          4. Two Utopian Possibilities for accesskey
        3. Additional id Attributes
          1. How Much Is Too Much?
      3. First Pass Markup: Same as Last Pass Markup
        1. Navigational Markup: The First Table
        2. Presentation, Semantics, Purity, and Sin
          1. A Transitional Book for a Transitional Time
          2. Making Allowances for Old Browsers
        3. Content Markup: The Second Table
    5. 9. CSS Basics
      1. CSS Overview
        1. CSS Benefits
      2. Anatomy of Styles
        1. Selectors, Declarations, Properties, and Values
          1. Choices and Options
          2. Zero Is Optional, Except When It’s Not
        2. Multiple Declarations
          1. Semicolon Health
        3. Whitespace and Case Insensitivity
        4. Alternative and Generic Values
          1. Using Order to Accommodate Multiple Platforms
          2. Not a Perfect Science
        5. Grouped Selectors
        6. Inheritance and Its Discontents
          1. All Its Children
          2. “Be Kind to Netscape 4”
          3. Is Inheritance a Curse?
        7. Descendant Selectors
        8. id Selectors and Descendant Selectors
          1. One Selector, Multiple Uses
          2. The Selector Stands Alone
        9. Class Selectors
        10. Combining Selectors to Create Sophisticated Design Effects
          1. Moving Ahead
      3. External, Embedded, and Inline Styles
        1. External Style Sheets
          1. Greatest Power, Lowest Cost
          2. Linking and Importing as Browser Selectors
          3. Embedded Style Sheets
        2. Inline Styles
      4. The “Best-Case Scenario” Design Method
        1. From Embedded to External Styles: The Two-Sheet Method
          1. Testing In and Supporting Noncompliant Browsers
        2. Relative and Absolute File References
        3. Benefits of the Best-Case Scenario and Two-Sheet Methods
    6. 10. CSS in Action: A Hybrid Layout (Part II)
      1. Preparing Images
      2. Establishing Basic Parameters
        1. Overall Styles, More About Shorthand and Margins
          1. Shorthand and Clock Faces
        2. Hide and Block
          1. Of Phark and Fahrner
          2. The Image Rule
        3. Coloring the Links (Introducing Pseudo-Classes)
          1. More About Links and Pseudo-Class Selectors
          2. Use LVHA or Be SOL
          3. Pseudo-Shenanigans in IE/Windows
        4. Sketching in Other Common Elements
        5. More About Font Sizes
          1. Users Don’t Know from Sizes
          2. The 62.5% Solution
          3. The Wonder of Line-Height
          4. Unitless Line-Heights
          5. The Heartache of Left-Align
          6. Setting Up the Footer
        6. Laying Out the Page Divisions
      3. Navigation Elements: First Pass
      4. Navigation Bar CSS: First Try at Second Pass
      5. Navigation Bar CSS: Final Pass
        1. Browser Bug Hoo-Ha!
      6. Final Steps: External Styles and the “You Are Here” Effect
    7. 11. Working with Browsers Part I: DOCTYPE Switching and Standards Mode
      1. The Saga of DOCTYPE Switching
        1. A Switch to Turn Standards On or Off
        2. Throwing the Switch
        3. Controlling Browser Performance: The DOCTYPE Switch
          1. Three Modes for Sister Sara
          2. Complete and Incomplete DOCTYPEs
        4. A Complete Listing of Complete XHTML DOCTYPEs
          1. XHTML 1.0 DTD
          2. XHTML 1.1 DTD
          3. Executive Summary: XHTML DOCTYPE Triggers in IE and Gecko
          4. DOCTYPE Switching: The Devil Is in the Details
      2. Celebrate Browser Diversity! (Or at Least Learn to Live with It)
        1. The Image-Gap Issue in Gecko
        2. One (or Two) Rules to Bind Them All: Use CSS to Turn Off Gaps
        3. The Birth of Almost Standards Mode
        4. Limitations of Almost Standards Mode
        5. From “Vive la Différence” to “@#$! This $#@$.”
    8. 12. Working with Browsers Part II: Box Models, Bugs, and Workarounds
      1. The Box Model and Its Discontents
        1. How the Box Model Works
        2. How the Box Model Breaks
          1. In Defense of the Broken Box Model
        3. The Box Model Hack: Making CSS Safe for Democracy
      2. The Whitespace Bug in IE/Windows
      3. The “Float” Bug in IE6/Windows
        1. Stuck on Old Values
        2. Fixed with a Script
        3. Float, Peek-a-Boo, and Beyond
          1. Honorable Mention
      4. Flash and QuickTime: Objects of Desire?
        1. Embeddable Objects: A Tale of Hubris and Revenge
          1. The Double Vengeance of W3C
        2. Twice-Cooked Satay: Embedding Multimedia While Supporting Standards
        3. A Fly in the Ointment: Object Failures
          1. A Dash of JavaScript
        4. A Workaday, Workaround World
    9. 13. Working with Browsers Part III: Typography
      1. Size Matters
      2. User Control
      3. Old-School Horrors
        1. Points of Difference
      4. A Standard Size at Last
        1. Good Works Undone with a Click
        2. Sniffing Oblivion: The Wrong Reaction to the Change in Browsers
          1. The Snake Swallows Its Tail: Conditional CSS
        3. Standard Sizes and Best Practices
      5. Sizing With Ems: The Laughter and The Tears
        1. User Choices and Em Units
      6. A Passion for Pixels
        1. The Smallest Unit: It’s Absolutely Relative
          1. When Pixels Fail in Opera
          2. When Pixels Fail in Netscape 4 Point Something or Other
        2. The Trouble with Pixels
      7. The Font-Size Keyword Method
        1. Why Keywords May Beat Ems and Percentages
        2. Initial Problems with Keyword Implementations
          1. The Keyword Flub in IE/Windows
          2. Progress Happens, but Usage Eludes
          3. The Keyword Comes of Age: The Fahrner Method
          4. The Method in Action
          5. Flies in the Ointment
          6. Sizes, Schmizes, I Want My ITC Franklin Gothic Demi Oblique!
        3. Just Your Size
    10. 14. Accessibility Basics
      1. WCAG 1 and 2
      2. Access by the Books
      3. Widespread Confusion
        1. The Genius Puts His Foot in It
          1. The “Blind Billionaire”
          2. Access Is Not Limited to the Visually Impaired
          3. A Cloud of Fuzzy Ideas
      4. The Law and the Layout
        1. Section 508 Explained
          1. “Equal or Equivalent Access to Everyone”
          2. Findability, Thy Name Is Access
      5. Accessibility Myths Debunked
        1. Myth: Accessibility Forces You to Create Two Versions of Your Site
        2. Myth: A Text-Only Version Satisfies the Requirement for Equal or Equivalent Access
        3. Myth: Accessibility Costs Too Much
          1. We’re Too Busy Wasting Thousands to Spend a Few Bucks Wisely
        4. Myth: Accessibility Forces You to Create Primitive, Low-End Designs
        5. Myth: According to Section 508, Sites Must Look the Same in All Browsers and User Agents
        6. Myth: Accessibility Is “Just for Disabled People”
        7. Myth: Dreamweaver MX/Cynthia Says/LIFT/Insert Tool Name Here Solves All Compliance Problems
        8. Myth: Designers Can Freely Ignore Accessibility Laws if Their Clients Tell Them To
      6. Accessibility Tips, Element by Element
        1. Images
          1. Your Friend, the null alt Attribute
          2. Use alt Attributes That Convey Meaning to Your Visitors
          3. Don’t Trust Software to Do a Human Being’s Job
          4. The alt ToolTip Fandango
          5. No alt for Background Images
        2. Apple’s QuickTime and Other Streaming Video Media
        3. Macromedia Flash 4/5
        4. Macromedia Flash MX and Flash 8
          1. Additional Flash Compliance Tips
        5. Color
        6. CSS
          1. Structured Markup Conveys Meaning When CSS Goes Away
          2. Don’t Trust What You See in One Browser Alone
          3. Take Care When Sizing Text
          4. Don’t, I Repeat, Don’t Trust Access Validation Test Results
        7. Rollovers and Other Scripted Behaviors
          1. Provide Alternatives for Non-Mouse Users
          2. Use noscript to Provide for Those Who Can’t Use JavaScript
          3. Avoid or at Least Massage Generated Scripts
          4. Learn More
        8. Forms
        9. Image Maps
        10. Table Layouts
        11. Tables Used for Data
        12. Frames, Applets
        13. Flashing or Blinking Elements
      7. Tools of the Trade
      8. Loving Cynthia
        1. Keeping Tabs: Our Good Friend, the tabindex Attribute
          1. Arriving at a Tabbing Order
          2. Building and Testing
          3. One Page, Two Designs
      9. Planning for Access: How You Benefit
        1. Access Serves You
    11. 15. Working with DOM-Based Scripts
      1. DOM by the books
      2. What’s a DOM?
        1. A Standard Way to Make Web Pages Behave Like Applications
        2. So Where Does It Work?
        3. Please, DOM, Don’t Hurt ’Em
          1. How It Works
          2. Code Variants
          3. Why It Works
          4. Why It Rocks
        4. Style Switchers: Aiding Access, Offering Choice
          1. How Will You Use It?
    12. 16. A CSS Redesign
      1. Defining Requirements
        1. Top Ten Requirements
        2. Laying the Faux-dation
        3. Bannerama
        4. Finishing Up
      2. Web Standards Bookshelf
      3. Accessibility
      4. CSS
      5. The DOM

Product information

  • Title: Designing With Web Standards, Second Edition
  • Author(s): jeffrey zeldman
  • Release date: July 2006
  • Publisher(s): New Riders
  • ISBN: 9780321385550