Designing with Web Standards

by Zeldman, Jeffrey

• ISBN13: 9780321385550
• ISBN10: 0321385551
• Edition: 2nd
• Format: Paperback
• Copyright: 2007-01-01
• Publisher: Peachpit Press

Summary

The ultimate resource for standards-based Web design, updated and enhanced for current and future browsers.

Table of Contents

Introduction	1	(10)
One Size Does Not Fit All	2	(2)
Theory Versus Practice	3	(1)
A Continuum, Not a Set of Inflexible Rules	4	(2)
Show, Don't Sell	4	(1)
Let Your Work Do the Selling for You	5	(1)
Selling In-House	5	(1)
The Smell of Change	6	(5)
Part I Houston, We Have a Problem
Before You Begin	11	(132)
Spiraling Costs, Diminishing Returns	12	(2)
Ending the Cycle of Obsolescence	14	(1)
What Is Forward Compatibility?	15	(1)
No Rules, No Dogma	16	(2)
Practice, Not Theory	18	(2)
Is This Trip Really Necessary?	20	(1)
1 99.9% of Websites Are Still Obsolete	21	(22)
Modern Browsers and Web Standards	22	(3)
New Code for a New Job	24	(1)
The "Version" Problem	25	(2)
Backward Thinking	27	(12)
Outdated Markup: The Cost to Site Owners	31	(2)
Backward Compatibility	33	(1)
Blocking Users Is Bad for Business	33	(5)
The Road to Stupidville	38	(1)
When Good Things Happen to Bad Markup	39	(2)
The Cure	41	(2)
2 Designing and Building with Standards	43	(30)
Jumping Through Hoops	45	(1)
The Cost of Design Before Standards	46	(1)
Modern Site, Ancient Ways	47	(4)
The Tragic Kingdom	51	(2)
The Trinity of Web Standards	53	(4)
Structure	53	(3)
Presentation	56	(1)
Behavior	57	(1)
Into Action	57	(1)
Benefits of Transitional Methods	58	(2)
The Web Standards Project: Portability in Action	60	(3)
One Document Serves All	63	(1)
A List Apart: One Page, Many Views	63	(4)
Design Beyond the Screen	65	(1)
Time and Cost Savings, Increased Reach	66	(1)
Where We Go from Here	67	(6)
Transitional Forward Compatibility (Hybrid Design)	67	(2)
Strict Forward Compatibility	69	(4)
3 The Trouble with Standards	73	(28)
Lovely to Look At, Repulsive to Code	74	(4)
Common Goals, Common Means	76	(1)
Perception Versus Reality	77	(1)
2000: The Year That Browsers Came of Age	78	(5)
IE5/Mac: Switching and Zooming	79	(3)
Netscape's Bold Move	82	(1)
The Floodgates Open	82	(1)
Too Little, Too Late?	83	(1)
CSS: The First Bag Is Free	84	(1)
Bad Browsers Lead to Bad Practices	84	(5)
The Curse of Legacy Rendering	85	(1)
Inherit the Wind	86	(1)
Miss Behavior to You	87	(1)
Standardized Scripting at Long Last	88	(1)
Confusing Sites, Bewildering Labels	89	(3)
Academics Versus Economics	90	(1)
Consortia Suggest, Companies Sell	91	(1)
Product Awareness Versus Standards Awareness	91	(1)
The F Word	92	(5)
The Value of Flash	94	(2)
The Trouble with Flash	96	(1)
The Other Trouble with Flash	96	(1)
Compliance Is a Dirty Word	97	(4)
The Power of Language to Shape Perceptions	97	(1)
The Inspiration Problem	98	(1)
Other Problems	99	(2)
4 Findability, Syndication, Blogs, Podcasts, the Long Tail, Ajax (and Other Reasons Standards Are Winning)	101	(42)
The Universal Language (XML)	103	(13)
XML and HTML Compared	104	(1)
One Parent, Many Children	105	(1)
An Essential Ingredient of Professional and Consumer Software	105	(1)
More Popular Than a White Rapper	106	(2)
Builds Strong Data Five Ways	108	(1)
A Mother Lode of Inventions	109	(4)
Web Publishing Tools for the Rest of Us	113	(1)
At Your Service(s)	114	(2)
XML Applications and Your Site	116	(1)
Compatible by Nature	116	(1)
A New Era of Cooperation	117
Test Suites and Specifications	117	(1)
How Suite It Is	118	(1)
WHAT Working Group	119	(1)
Internet Explorer 7 and The Web Standards Project	119
Web Standards and Authoring Tools	10	(112)
The Dreamweaver Task Force	120	(1)
WYSIWYG Tools Come of Age (Two Out of Three Ain't Bad)	121	(1)
From FrontPage to Expression Web Designer	122	(1)
The Emergence of CSS Layout	122	(9)
The Browser Upgrade Campaign	123	(3)
The Flood Begins	126	(2)
Countless Converts and the Help Sites They Rode in On	128	(3)
The Ultimate CSS Knowledge Base	131	(1)
Faddishness...with a Purpose	131	(1)
The Mainstreaming of Web Standards	132	(11)
Commercial Sites Take the Plunge	134	(1)
Wired Digital Converts	135	(2)
Turning On Designers	137	(2)
The Hits Keep Coming	139	(1)
The Road to Joy Is Paved with Validation	140	(3)
Part II Designing and Building
5 Modern Markup	143	(14)
The Secret Shame of Rotten Markup	148	(2)
A Reformulation of Say What?	150	(2)
Executive Summary	152	(1)
Which XHTML Is Right for You?	152	(5)
XHTML 2—For Me and You?	152	(2)
Top to Reasons to Convert to XHTML	154	(1)
Top 5 Reasons Not to Switch to XHTML	155	(2)
6 XHTML: Restructuring the Web	157	(20)
Converting to XHTML: Simple Rules, Easy Guidelines	158	(11)
Open with the Proper DOCTYPE and Namespace	158	(3)
Declare Your Content Type	161	(2)
Write All Tags in Lowercase	163	(2)
Quote All Attribute Values	165	(1)
All Attributes Require Values	166	(1)
Close All Tags	167	(1)
Close "Empty" Tags, Too	167	(1)
No Double Dashes Within a Comment	168	(1)
Encode All less than and & Characters 168
Executive Summary: The Rules of XHTML	169	(6)
Character Encoding: The Dull, the Duller, and the Truly Dull	169	(2)
Structural Healing—It's Good for Me	171	(1)
Marking Up Your Document for Sense Instead of Style	171	(4)
Visual Elements and Structure	175	(2)
7 Tighter, Firmer Pages Guaranteed: Structure and Meta-Structure in Strict and Hybrid Markup	177	(28)
Must Every Element Be Structural?	178	(9)
div, id, and Other Assistants	179	(4)
Semantic Markup and Reusability	183	(4)
Hybrid Layouts and Compact Markup:
Dos and Don'ts	187	(8)
Giving Names to Bad Things	187	(1)
Common Errors in Hybrid Markup	188	(3)
divs Are Just All Right	191	(1)
Loving the id	192	(2)
Banish Redundant Table Cells	194	(1)
Outdated Methods on Parade	195	(10)
The Year of the Map	195	(1)
The Map and Its Discontents	196	(1)
No Access, No Structure	197	(1)
Slicing and Dicing	197	(1)
The Slice Comes of Age	198	(1)
The Redundant Verbosity of Redundantly Verbose Tables	199	(1)
Bad CSS Comes to Town	200	(4)
Moving On	204	(1)
8 XHTML by Example: A Hybrid Layout (Part I)	205	(14)
Benefits of Transitional Methods Used in These Chapters	206	(1)
Style Sheets Instead of JavaScript	206	(1)
Basic Approach (Overview)	206	(8)
Separate Tables: CSS and Accessibility Advantages	208	(1)
The What and Why of Skip Navigation	208	(5)
Additional id Attributes	213	(1)
First Pass Markup: Same as Last Pass Markup	214	(5)
Navigational Markup: The First Table	215	(1)
Presentation, Semantics, Purity, and Sin	216	(1)
Content Markup: The Second Table	217	(2)
9 CSS Basics	219	(24)
CSS Overview	220	(2)
CSS Benefits	220	(2)
Anatomy of Styles	222	(12)
Selectors, Declarations, Properties, and Values	222	(1)
Multiple Declarations	223	(1)
Whitespace and Case Insensitivity	224	(1)
Alternative and Generic Values	225	(1)
Grouped Selectors	226	(1)
Inheritance and Its Discontents	226	(2)
Descendant Selectors	228	(1)
id Selectors and Descendant Selectors	229	(1)
Class Selectors	230	(1)
Combining Selctors to Create Sophisticated Design Effects	231	(3)
External, Embedded, and Inline Styles	234	(4)
External Style Sheets	234	(4)
Inline Styles	238	(1)
The "Best-Case Scenario" Design Method	238	(6)
From Embedded to External Styles: The Two-Sheet Method	239	(1)
Relative and Absolute File References	240	(1)
Benefits of the Best-Case Scenario and Two-Sheet Methods	240	(3)
10 CSS in Action: A Hybrid Layout (Part II)	243	(28)
Preparing Images	244	(2)
Establishing Basic Parameters	246	(13)
Overall Styles, More About Shorthand and Margins	246	(1)
Hide and Block	247	(2)
Coloring the Links (Introducing Pseudo-Classes)	249	(2)
Sketching in Other Common Elements	251	(2)
More About Font Sizes	253	(3)
Laying Out the Page Divisions	256	(3)
Navigation Elements: First Pass	259	(3)
Navigation Bar CSS: First Try at Second Pass	262	(1)
Navigation Bar CSS: Final Pass	263	(5)
Final Steps: External Styles and the "You Are Here" Effect	268	(3)
11 Working with Browsers Part I: DOCTYPE Switching and Standards Mode	271	(14)
The Saga of DOCTYPE Switching	272	(8)
Controlling Browser Performance: The DOCTYPE Switch	274	(3)
A Complete Listing of Complete XHTML DOCTYPEs	277	(3)
Celebrate Browser Diversity! (Or at Least Learn to Live with It)	280	(5)
12 Working with Browsers Part II: Box Models, Bugs, and Workarounds	285	(26)
The Box Model and Its Discontents	286	(12)
How the Box Model Works	287	(1)
How the Box Model Breaks	288	(7)
The Box Model Hack: Making CSS Safe for Democracy	295	(3)
The Whitespace Bug in IE/Windows	298	(4)
The "Float" Bug in IE6/Windows	302	(2)
Float, Peek-a-Boo, and Beyond	304	(1)
Flash and QuickTime: Objects of Desire?	304	(7)
Embeddable Objects: A Tale of Hubris and Revenge	305	(1)
Twice-Cooked Satay: Embedding Multimedia While Supporting Standards	306	(1)
A Fly in the Ointment: Object Failures	307	(1)
A Workaday, Workaround World	308	(3)
13 Working with Browsers Part III: Typography	311	(20)
Size Matters	311	(1)
User Control	312	(1)
Old-School Horrors	312	(3)
Points of Difference	314	(1)
A Standard Size at Last	315	(6)
Good Works Undone with a Click	318	(1)
Sniffing Oblivion: The Wrong Reaction to the Change in Browsers	318	(2)
Standard Sizes and Best Practices	320	(1)
Sizing With Ems: the Laughter and The Tears	321	(1)
User Choices and Em Units	321	(1)
A Passion for Pixels	322	(3)
The Smallest Unit: It's Absolutely Relative	323	(1)
The Trouble with Pixels	324	(1)
The Font-Size Keyword Method	325	(8)
Why Keywords May Beat Ems and Percentages	325	(1)
Initial Problems with Keyword Implementations	326	(3)
Just Your Size	329	(2)
14 Accessibility Basics	331	(34)
Access by the Books	333	(1)
Widespread Confusion	334	(4)
The Genius Puts His Foot in It	335	(3)
The Law and the Layout	338	(3)
Section 508 Explained	339	(2)
Accessibility Myths Debunked	341	(5)
Myth: Accessibility Forces You to Create Two Versions of Your Site	341	(1)
Myth: A Text-Only Version Satisfies the Requirement for Equal or Equivalent Access	341	(1)
Myth: Accessibility Costs Too Much	341	(2)
Myth: Accessibility Forces You to Create Primitive, Low-End Designs	343	(1)
Myth: According According In Section 508, Sites Must Look the Same in All Browsers and User Agents	344	(1)
Myth: Accessibility Is "Just for Disabled People"	344	(1)
Myth: Dreamweaver MX/Cynthia Says/LIFT/Insert Tool Name Here Solves All Compliance Problems	345	(1)
Myth: Designers Can Freely Ignore Accessibility Laws if Their Clients Tell Them To	346	(1)
Accessibility Tips, Element by Element	346	(10)
Images	346	(3)
Apple's QuickTime and Other Streaming Video Media	349	(1)
Macromedia Flash 4/5	349	(1)
Macromedia Flash MX and Flash 8	349	(2)
Color	351	(1)
CSS	351	(2)
Rollovers and Other Scripted Behaviors	353	(1)
Forms	354	(1)
Image Maps	355	(1)
Table Layouts	355	(1)
Tables Used for Data	355	(1)
Frames, Applets	356	(1)
Flashing or Blinking Elements	356	(1)
Tools of the Trade	356	(2)
Loving Cynthia	358	(4)
Keeping Tabs: Our Good Friend, the tabindex Attribute	358	(4)
Planning for Access: How You Benefit	362	(3)
15 Working with DOM-Based Scripts	365	(14)
DOM by the books	366	(1)
What's a DOM?	367	(13)
A Standard Way to Make Web Pages Behave Like Applications	368	(2)
So Where Does It Work?	370	(1)
Please, DOM, Don't Hurt 'Em	371	(3)
Style Switchers: Aiding Access, Offering Choice	374	(5)
16 A CSS Redesign	379	(12)
Defining Requirements	380	(11)
Top Ten Requirements	380	(2)
Laying the Faux-dation	382	(4)
Bannerama	386	(4)
Finishing Up	390	(1)
Web Standards Bookshelf	391	(2)
Index	393