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

✍ Scribed by Parker, Todd;Jehl, Scott;Wachs, Maggie Costello;Toland, Patty

• Publisher: New Riders Publishing
• Year: 2010
• Tongue: English
• Leaves: 457
• Category: Library

✦ Synopsis

Progressive enhancement is an approach to web development that aims to deliver the best possible experience to the widest possible audience, and simplifies coding and testing as well. Whether users are viewing your sites on an iPhone, the latest and greatest high-end system, or even hearing them on a screen-reader, their experience should be easy to understand and use, and as fully-featured and functional as possible.

Designing with Progressive Enhancement will show you how. It's both a practical guide to understanding the principles and benefits of progressive enhancement, and a detailed exploration of examples that will teach you--whether you're a designer or a developer--how, where, and when to implement the specific coding and scripting approaches that embody progressive enhancement.

In this book, you'll learn:

Why common coding approaches leave users behind, and how progressive enhancement is a more inclusive and accessible alternative
How to analyze complex interface designs, see the underlying semantic HTML experience that will work everywhere, and layer on advanced enhancements safely
A unique browser capabilities testing suite that helps deliver enhancements only to devices that can handle them
Real-world best practices for coding HTML, CSS, and JavaScript to work with progressive enhancement, and cases where forward-looking HTML5 and CSS3 techniques can be applied effectively today
How to factor in accessibility features like WAI-ARIA and keyboard support to ensure universal access Detailed techniques to transform semantic HTML into interactive components like sliders, tabs, tree controls, and charts, along with downloadable jQuery-based widgets to apply directly in your projects

✦ Table of Contents

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

✦ Subjects

Design;Website Design;Internet;Web;Nonfiction;Science;Technology;Computer Science;Programming