ptg From the Library of Wow! eBook ptg Todd Parker Patty Toland Scott Jehl Maggie Costello Wachs designing with progressive enhancement building the web that works for everyone From the Library of Wow! eBook ptg DESIGNING WITH PROGRESSIVE ENHANCEMENT: BUILDING THE WEB THAT WORKS FOR EVERYONE Todd Parker, Patty Toland, Scott Jehl, Maggie Costello Wachs NEW RIDERS 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the Web at www.newriders.com To r e p o r t e r r o r s , p l e a s e s e n d a n o t e t o e r r a t a @ p e a c h p i t . c o m New Riders is an imprint of Peachpit, a division of Pearson Education Copyright © 2010 by Filament Group, Inc. The Filament Group, Inc. is Todd Parker, Patty Toland, Scott Jehl, and Maggie Costello Wachs. Acquisitions Editor: Wendy Sharp Project Editor: Wendy G. Katz Technical Editor: James Craig Production Editor: Myrna Vladic Composition: David Van Ness Indexer: Jack Lewis Interior Design: Mimi Heft Cover Design: Aren Howell NOTICE OF RIGHTS All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com. NOTICE OF LIABILITY The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the authors nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. TRADEMARKS Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identied throughout this book are used in editorial fashion only and for the benet of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other afliation with this book. ISBN-13: 978-0-321-65888-3 ISBN–10: 0-321-65888-4 9 8 7 6 5 4 3 2 1 Printed and bound in the United States of America From the Library of Wow! eBook ptg Contents acknowledgments x introduction xiii SECTION I THE TESTDRIVEN PROGRESSIVE ENHANCEMENT APPROACH chapter 1 our approach 3 Testing browser capabilities 4 Planning for progressive enhancement: the x-ray perspective 7 From x-ray to action: the building blocks of progressive enhancement development . 8 Putting theory into action . 10 chapter 2 progressive enhancement in action: the x-ray perspective 11 An overview of the x-ray perspective 12 Dening content hierarchy and mapping components to HTML . 13 Building foundation markup and minimal, safe styles . 15 Applying markup, style, and script enhancements 17 Case 1: Planning structure and organization in a news website . 18 Evaluating content organization and naming 19 Leveraging native HTML hierarchy features for content organization . 20 Structuring navigation . 20 Accommodating layered and animated content 21 Supporting dynamic ltering and sorting . 22 Case 2: Workows, validation, and data submission in a checkout form 23 Breaking down the checkout form design 24 Marking up the form to ensure accessibility 29 Applying constraints and validation . 31 Assembling the basic and enhanced experiences 32 From the Library of Wow! eBook ptg iv Case 3: Interactive data visualization in a budget calculator 32 Choosing basic markup for the budget line components 33 Creating accessible sliders from the foundation markup 35 Building the pie chart 36 Case 4: Supporting full-featured application capabilities in the browser—the Photo Manager . 37 Marking up global navigation elements 38 Supporting complex album and multi-photo interactions 40 Creating custom forms and overlays 44 Building in Back-button support 46 Checklist for implementing the x-ray in action . 46 chapter 3 writing meaningful markup 49 Marking up text and images 50 Elements for meaningfully marking up text 51 Lists 56 Ta b u l a r d a t a 57 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Embedded rich media . 61 Embedding external page content . 63 Marking up interactive content 64 Anchor links 65 Form structure 65 Form controls 67 Creating context in the page . 73 Know when to use block-level vs. inline elements 73 Identify elements with IDs and classes . 75 Identify main page sections with WAI-ARIA landmark roles 76 Maintain legible source order . 77 Use the title attribute . 79 Setting up an HTML document 80 The DOCTYPE . 81 The document header . 82 Building in accessibility 87 Accessibility guidelines and legal standards 88 Web Content Accessibility Guidelines (WCAG) . 89 From the Library of Wow! eBook ptg  v chapter 4 applying styles effectively 91 Applying CSS to the page . 92 Maintaining styles in external style sheets 92 Linking to external style sheets . 93 Using meaningful naming conventions 95 Styling the basic and enhanced experiences 96 Safe styles for the basic experience 96 Styling the enhanced experience 98 Accessibility considerations . 99 Dealing with bugs and browser inconsistencies 101 Conditional comments . 101 Common issues and workarounds . 102 chapter 5 scripting enhancements and interactivity 107 How to properly reference JavaScript . 108 Avoiding inline JavaScript . 108 Referencing external JavaScript . 108 Understanding JavaScript’s place in the basic experience 109 Best practices for scripting enhancements 109 Running scripts when content is ready 110 Applying behavior to markup . 110 Building enhanced markup with JavaScript . 113 Managing content visibility 115 Applying style enhancements . 116 Preserving and enhancing usability and accessibility 117 Implementing keyboard access . 118 Assigning WAI-ARIA attributes . 120 Te s t i n g a c c e s s i b i l i t y 120 Maintaining state and preserving the Back button 121 chapter 6 testing browser capabilities 123 EnhanceJS: a capabilities testing framework . 124 The mechanics of EnhanceJS: how the tests work . 125 Applying enhancements with EnhanceJS . 128 Conguring EnhanceJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Loading additional style sheets 131 Loading additional scripts 134 From the Library of Wow! eBook ptg vi Customizing the experience toggle link . 134 Forcing EnhanceJS to pass or fail . 136 Extending the EnhanceJS test suite . 136 Modifying the test suite with EnhanceJS options . 137 Creating new or multiple instances of EnhanceJS . 137 Enabling the capabilities test alert for debugging . 138 Optimizing EnhanceJS on the server . 139 SECTION II PROGRESSIVE ENHANCEMENT IN ACTION chapter 7 building widgets with progressive enhancement 143 How the widgets are coded 143 Navigating the widget chapters . 145 Example code for download . 146 chapter 8 collapsible content 147 X-ray perspective 148 Creating accessible collapsible content . 150 Foundation markup and style . 150 Enhanced markup and style 151 Collapsible enhancement script 155 Using the collapsible script 158 chapter 9 tabs 161 X-ray perspective 162 Creating the tabs 164 Foundation markup and style . 164 Enhanced markup and style 167 Ta b s s c r i p t . 172 Ta k i n g t h e t a b s f u r t h e r . 176 Bookmarking and history (Back button) tracking . 176 Auto-rotating tabs 181 Referencing external tab content . 182 Displaying tabs as an accordion . 182 Using the tabs script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 From the Library of Wow! eBook ptg  vii chapter 10 tooltips 185 X-ray perspective 186 Creating a tooltip from title content . 189 Foundation markup and style . 189 Enhanced markup and style . 190 Enhanced tooltip script 193 Creating a tooltip from an anchor link . 195 Creating a tooltip from an external source . 197 Using the tooltip script 199 chapter 11 tree control 201 X-ray perspective 202 Creating the tree control . 204 Foundation markup and style . 204 Enhanced markup and style . 206 Enhanced tree script 210 Using the tree script 220 chapter 12 charts with html5 canvas 223 X-ray perspective . 225 Foundation markup . 226 Creating an accessible chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Parsing the table data 230 Using canvas to visualize data 236 Adding enhanced table styles 246 Keeping the data accessible . 247 Ta k i n g c a n v a s c h a r t s f u r t h e r : t h e v i s u a l i z e . j s p l u g i n . 249 chapter 13 dialogs and overlays 253 X-ray perspective 254 Creating the dialog . 256 Foundation markup and style 256 Enhanced markup and style 258 Enhanced dialog script . 265 Ta k i n g d i a l o g f u r t h e r 271 Using the dialog script 271 From the Library of Wow! eBook ptg viii chapter 14 buttons 277 X-ray perspective . 278 Styling input-based buttons 279 Foundation markup and style . 280 Enhanced markup and style 282 Enhanced hover state script 286 Creating buttons with complex visual formatting . 287 Foundation markup and style 288 Enhanced markup and style 289 Enhanced input-to-button script . 290 Using the input-to-button script 293 Ta k i n g t h e b u t t o n f u r t h e r . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 9 4 chapter 15 checkboxes, radio buttons, and star rating 297 X-ray perspective 298 Creating the custom checkbox . 300 Foundation markup 301 Enhanced markup and style 303 Checkbox script 306 Creating custom radio buttons . 309 Foundation markup 309 Enhanced markup and style . 310 Radio button script . 312 Ta k i n g c u s t o m i n p u t s f u r t h e r : a s t a r r a t i n g w i d g e t . 316 Foundation markup 316 Enhanced markup and style 318 Scripting the star rating widget . 320 Using the custom input and star rating scripts 323 chapter 16 slider 325 X-ray perspective . 326 Creating the slider 330 Foundation markup and style 330 Enhanced markup and style 331 Slider script . 339 Using the slider script 345 From the Library of Wow! eBook ptg  ix chapter 17 select menu 349 X-ray perspective 350 Creating an accessible custom select 352 Foundation markup and styles 352 Enhanced markup and styles . 353 Enhanced custom select script 363 Ta k i n g t h e c u s t o m s e l e c t f u r t h e r : a d v a n c e d o p t i o n s t y l i n g 375 Using the custom select script . 377 chapter 18 list builder 379 X-ray perspective 380 Creating the list builder 381 Foundation markup and style 382 Enhanced markup and style 383 List builder script . 387 Ta k i n g t h e l i s t b u i l d e r f u r t h e r : m u l t i - s e l e c t , s o r t i n g , a u t o - c o m - plete, and contextual menus 394 Multiple selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 Drag-and-drop sorting 394 Auto-complete . 394 Contextual menus . 395 Using the list builder script . 395 chapter 19 file input 397 X-ray perspective 398 Creating the custom le input . 401 Foundation markup and style 401 Enhanced markup and style . 402 Custom le input script . 406 Using the custom le input script 409 summary 411 index . 413 From the Library of Wow! eBook [...]... whenever possible The key to progressive enhancement starts with the careful separation of content (HTML), presentation and styles (CSS), and behavior (JavaScript), which allows us to deliver a workable and appropriate experience for each browser Progressive enhancement and graceful degradation: same difference? Progressive enhancement is frequently compared to, and sometimes confused with, the coding practice... a way Designing with Progressive Enhancement is a practical guide to web design and development that focuses specifically on how to create sites that deliver the highly interactive experiences that JavaScript, advanced CSS, and Ajax afford, and at the same time ensure that the very same codebase will work everywhere Our approach is built on the basis of a coding methodology called progressive enhancement, ... that our clients’ content, message, and functionality reach everyone— not just those with modern browsers that support the latest web technologies, but any user with a web-enabled device This is why we decided a few years ago to start incorporating the philosophy of progressive enhancement into our client work Progressive enhancement is simple in theory: serve standards-compliant, HTML-only pages to increase... single, manageable codebase that would work everywhere, created with the cleanest, most efficient and future-compatible development approach From the Library of Wow! eBook xxvi Designing wit h Prog r essive e n h a n cemen t: BuilD i ng the w e B t h at wo rks fo r e ve ryo ne We believe we’ve found a near-perfect solution with progressive enhancement First coined by Steven Champeon and Nick Finck at... expressed in this book From the Library of Wow! eBook This page intentionally left blank From the Library of Wow! eBook introduction the case for designing with progressive enhancement In many ways, right now is the best possible time to be a web designer New sites and applications emerge at an astounding rate and transform the way we work, communicate, and live We manage our businesses, build our relationships,... have been met in the simplest way, the robust enhancements that modern browsers can handle are layered on progressively (hence the progressive in the name) to build up to the complete, complex experience From the Library of Wow! eBook in t roDuct ion : t h e ca s e fo r D e s i gni ng w i th Progre ssive e nhanc e me nt xxvii We’ve been using progressive enhancement as a cornerstone of our development... markup Over the past few years, progressive enhancement has been quietly adopted by some of the biggest and best sites on the web, precisely because it allows them to reach the widest possible audience Browse Google, Facebook, Amazon, or Digg with JavaScript and/ or CSS turned off, and you’ll see that the sites will work surprisingly well Each site may approach progressive enhancement a bit differently,... develop a universally accessible site by applying simple, workable progressive enhancement techniques that have been tested in the real world In the first section, we’ll review our approach to implementing progressive enhancement, including a different way of thinking about planning designs, and our unique From the Library of Wow! eBook xxviii Designing wit h Prog r essive e n h a n cemen t: BuilD i ng the... applying enhancements Then we’ll review the HTML, CSS, and JavaScript best practices that will arm you with all the tools you’ll need to build sites a new and better way After that, we’ll look at a dozen specific interface components or widgets and take you step by step through a process to show the specific markup, style, scripting, and enhanced accessibility features you’ll use when working with progressive. .. with progressive enhancement These examples individually provide specific how-tos, and collectively represent a set of principles and methods that can be extended to other coding situations to broadly apply progressive enhancement in any situation We’ve used these techniques on our own site and in a number of client engagements, and have found that our approach helps to make progressive enhancement practical . Maggie Costello Wachs designing with progressive enhancement building the web that works for everyone From the Library of Wow! eBook ptg DESIGNING WITH PROGRESSIVE ENHANCEMENT: BUILDING. 138 Optimizing EnhanceJS on the server . 139 SECTION II PROGRESSIVE ENHANCEMENT IN ACTION chapter 7 building widgets with progressive enhancement 143 How the widgets are coded 143 Navigating. Wow! eBook ptg introduction the case for designing with progressive enhancement In many ways, right now is the best possible time to be a web designer. New sites and applications emerge at an