Designing with Progressive Enhancement: Building the Web That Works for Everyone

Cover......Page 1
Contents......Page 4
Acknowledgments......Page 11
Introduction......Page 14
SECTION I: THE TEST-DRIVEN PROGRESSIVE ENHANCEMENT APPROACH......Page 30
 Chapter 1 our approach......Page 32
  Testing browser capabilities......Page 33
  Planning for progressive enhancement: the x-ray perspective......Page 36
  From x-ray to action: the building blocks of progressive enhancement development......Page 37
  Putting theory into action......Page 39
 Chapter 2 progressive enhancement in action: the x-ray perspective......Page 40
  An overview of the x-ray perspective......Page 41
  Case 1: Planning structure and organization in a news website......Page 47
  Case 2: Workflows, validation, and data submission in a checkout form......Page 52
  Case 3: Interactive data visualization in a budget calculator......Page 61
  Case 4: Supporting full-featured application capabilities in the browser—the Photo Manager......Page 66
  Checklist for implementing the x-ray in action......Page 75
 Chapter 3 writing meaningful markup......Page 78
  Marking up text and images......Page 79
  Marking up interactive content......Page 93
  Creating context in the page......Page 102
  Setting up an HTML document......Page 109
  Building in accessibility......Page 116
 Chapter 4 applying styles effectively......Page 120
  Applying CSS to the page......Page 121
  Styling the basic and enhanced experiences......Page 125
  Accessibility considerations......Page 128
  Dealing with bugs and browser inconsistencies......Page 130
 Chapter 5 scripting enhancements and interactivity......Page 136
  How to properly reference JavaScript......Page 137
  Best practices for scripting enhancements......Page 138
  Preserving and enhancing usability and accessibility......Page 146
 Chapter 6 testing browser capabilities......Page 152
  EnhanceJS: a capabilities testing framework......Page 153
  Applying enhancements with EnhanceJS......Page 157
  Configuring EnhanceJS......Page 159
  Extending the EnhanceJS test suite......Page 165
  Optimizing EnhanceJS on the server......Page 168
SECTION II: PROGRESSIVE ENHANCEMENT IN ACTION......Page 170
  How the widgets are coded......Page 172
  Navigating the widget chapters......Page 174
  Example code for download......Page 175
 Chapter 8 collapsible content......Page 176
  X-ray perspective......Page 177
  Creating accessible collapsible content......Page 179
  Using the collapsible script......Page 187
 Chapter 9 tabs......Page 190
  X-ray perspective......Page 191
  Creating the tabs......Page 193
  Taking the tabs further......Page 205
  Using the tabs script......Page 212
 Chapter 10 tooltips......Page 214
  X-ray perspective......Page 215
  Creating a tooltip from title content......Page 218
  Creating a tooltip from an anchor link......Page 224
  Creating a tooltip from an external source......Page 226
  Using the tooltip script......Page 228
 Chapter 11 tree control......Page 230
  X-ray perspective......Page 231
  Creating the tree control......Page 233
  Using the tree script......Page 249
 Chapter 12 charts with html5 canvas......Page 252
  X-ray perspective......Page 254
  Foundation markup......Page 255
  Creating an accessible chart......Page 258
  Taking canvas charts further: the visualize.js plugin......Page 278
 Chapter 13 dialogs and overlays......Page 282
  X-ray perspective......Page 283
  Creating the dialog......Page 285
  Using the dialog script......Page 300
 Chapter 14 buttons......Page 306
  X-ray perspective......Page 307
  Styling input-based buttons......Page 308
  Creating buttons with complex visual formatting......Page 316
  Using the input-to-button script......Page 322
  Taking the button further......Page 323
 Chapter 15 checkboxes, radio buttons, and star rating......Page 326
  X-ray perspective......Page 327
  Creating the custom checkbox......Page 329
  Creating custom radio buttons......Page 338
  Taking custom inputs further: a star rating widget......Page 345
  Using the custom input and star rating scripts......Page 352
 Chapter 16 slider......Page 354
  X-ray perspective......Page 355
  Creating the slider......Page 359
  Using the slider script......Page 374
 Chapter 17 select menu......Page 378
  X-ray perspective......Page 379
  Creating an accessible custom select......Page 381
  Taking the custom select further: advanced option styling......Page 404
  Using the custom select script......Page 406
 Chapter 18 list builder......Page 408
  X-ray perspective......Page 409
  Creating the list builder......Page 410
  Taking the list builder further: multi-select, sorting, auto-complete, and contextual menus......Page 423
  Using the list builder script......Page 424
 Chapter 19 file input......Page 426
  X-ray perspective......Page 427
  Creating the custom file input......Page 430
  Using the custom file input script......Page 438
Summary......Page 440
 B......Page 442
 C......Page 443
 D......Page 445
 E......Page 446
 F......Page 447
 H......Page 448
 I......Page 449
 L......Page 450
 N......Page 451
 R......Page 452
 S......Page 453
 T......Page 454
 V......Page 455
 Z......Page 456