Search

Rich UI Design: An Access Oriented Approach Sc For Ss.Key

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    8 Favorites

    Rich UI Design: An Access Oriented Approach Sc For Ss.Key - Presentation Transcript

    1. Rich UI Design: An Access-Oriented Scott Jehl, Designer / Developer
    2. hello. Rich UI Design: An Access-Oriented Approach
    3. A Boston-based design firm specializing in complex web application design & development. Official Sponsor and Design Team Rich UI Design: An Access-Oriented Approach
    4. The 90% Solution How it’s done now A recap of current best practices for web dev Rich UI Design: An Access-Oriented Approach
    5. Clean, semantic HTML Rich UI Design: An Access-Oriented Approach
    6. Unobtrusive JS & CSS Rich UI Design: An Access-Oriented Approach
    7. Avoid CSS hacks conditional comments (if necessary) Rich UI Design: An Access-Oriented Approach
    8. Flexible Units Rich UI Design: An Access-Oriented Approach
    9. test in all the popular browsers Rich UI Design: An Access-Oriented Approach
    10. Accessible Hiding Rich UI Design: An Access-Oriented Approach
    11. test on a screenreader Rich UI Design: An Access-Oriented Approach
    12. NVDA: <h1>You sound like a drunk person in a karaoke bar!</h1> Rich UI Design: An Access-Oriented Approach
    13. NVDA: <h1>You sound like a drunk person in a karaoke bar!</h1> Rich UI Design: An Access-Oriented Approach
    14. the promise of PE: Rich UI Design: An Access-Oriented Approach
    15. the promise of PE: Works OK for everyone! Rich UI Design: An Access-Oriented Approach
    16. right? Rich UI Design: An Access-Oriented Approach
    17. that’s the theory anyway. Rich UI Design: An Access-Oriented Approach
    18. many browsers partially understand... Rich UI Design: An Access-Oriented Approach
    19. more like... progressive mischancement! ...disenchantment? ...is this thing on? Rich UI Design: An Access-Oriented Approach
    20. HTML works everywhere* * Pretty much Rich UI Design: An Access-Oriented Approach
    21. Images, CSS, JS are extras will break (badly) somewhere Rich UI Design: An Access-Oriented Approach
    22. for example Rich UI Design: An Access-Oriented Approach
    23. Northface.com Rich UI Design: An Access-Oriented Approach
    24. Northface.com IE 5 Rich UI Design: An Access-Oriented Approach
    25. Cappuccino Framework Demo Rich UI Design: An Access-Oriented Approach
    26. Cappuccino Framework Demo Without JavaScript Rich UI Design: An Access-Oriented Approach
    27. eek. (fixed in dev) Rich UI Design: An Access-Oriented Approach
    28. All or Nothing frankly, sucks. Rich UI Design: An Access-Oriented Approach
    29. what’s a web designer to do? Rich UI Design: An Access-Oriented Approach
    30. one way to approach the problem... Rich UI Design: An Access-Oriented Approach
    31. Rich UI Design: An Access-Oriented Approach
    32. nice if you have the resources support it... Rich UI Design: An Access-Oriented Approach
    33. a more practical approach: Rich UI Design: An Access-Oriented Approach
    34. One page, many experiences Rich UI Design: An Access-Oriented Approach
    35. Slick here: Still works here: Rich UI Design: An Access-Oriented Approach
    36. everyone gets a usable, functional experience: Rich UI Design: An Access-Oriented Approach
    37. some get an even better one! Rich UI Design: An Access-Oriented Approach
    38. integrating an Access-Oriented Rich UI Design: An Access-Oriented Approach
    39. please God no. Rich UI Design: An Access-Oriented Approach
    40. not that access. Rich UI Design: An Access-Oriented Approach
    41. Access-Oriented Web Design Consider universal access Rich UI Design: An Access-Oriented Approach
    42. Take an inclusive approach! “...To progress, we must change the way we approach this task.” Rich UI Design: An Access-Oriented Approach
    43. how’s do we do it? Rich UI Design: An Access-Oriented Approach
    44. here’s how... Capabilities So you think you can enhance? Rich UI Design: An Access-Oriented Approach
    45. Test Capabilities Basic Experience Enhanced Experience Rich UI Design: An Access-Oriented Approach
    46. AS SEEN ON ALA Rich UI Design: An Access-Oriented Approach
    47. like interpretive dance, enhancements aren’t for everyone Rich UI Design: An Access-Oriented Approach
    48. how do we know who? Rich UI Design: An Access-Oriented Approach
    49. not like this! navigator.userAgent $_SERVER['HTTP_USER_AGENT'] Rich UI Design: An Access-Oriented Approach
    50. more like this! if( youCanRenderThis ){ >> enhance me! } Rich UI Design: An Access-Oriented Approach
    51. tests you say? what do we test? Rich UI Design: An Access-Oriented Approach
    52. any capabilities required for the site to function properly Rich UI Design: An Access-Oriented Approach
    53. JavaScript Support • Basic DOM traversal • Basic Element manipulation • AJAX Support • Canvas perhaps...? Rich UI Design: An Access-Oriented Approach
    54. CSS Rendering • Box Model • Positioning • Floats • Clears • Overflow • And more... Rich UI Design: An Access-Oriented Approach
    55. How we test CSS Once the <body> is ready, our test script: inserts elements into the body 1 manipulates their style 2 checks if they rendered properly 3 Rich UI Design: An Access-Oriented Approach
    56. How we test CSS function boxmodel(){ var newDiv = document.createElement('div'); document.body.appendChild(newDiv); newDiv.style.width = '20px'; newDiv.style.padding = '10px'; var divWidth = newDiv.offsetWidth; document.body.removeChild(newDiv); return divWidth == 40; } if( boxmodel() ){ >> PASS! } Rich UI Design: An Access-Oriented Approach
    57. What if it fails? Basic Experience Rich UI Design: An Access-Oriented Approach
    58. What if it passes? Basic Experience Enhanced Experience Rich UI Design: An Access-Oriented Approach
    59. What if it passes? <html class=”enhanced”> Add Class for CSS scoping Rich UI Design: An Access-Oriented Approach
    60. What if it passes? CSS JS Dynamically load CSS and JS Rich UI Design: An Access-Oriented Approach
    61. What if it passes? Cookie the Results! Rich UI Design: An Access-Oriented Approach
    62. what’s the fallback? View low-bandwidth version Rich UI Design: An Access-Oriented Approach
    63. enhance.js Available at FilamentGroup.com/lab/ Rich UI Design: An Access-Oriented Approach
    64. Let’s get to the demos Rich UI Design: An Access-Oriented Approach
    65. introducing... Our Demo Page Rich UI Design: An Access-Oriented Approach
    66. Rich UI Design: An Access-Oriented Approach
    67. Rich UI Design: An Access-Oriented Approach
    68. the foundation... Simple, Meaningful, ...and a little stylish too Rich UI Design: An Access-Oriented Approach
    69. breaking down a design comp Rich UI Design: An Access-Oriented Approach
    70. Rich UI Design: An Access-Oriented Approach
    71. <option> <table> <li> <h2> <dl> <legend> <ol> This is your <p> database <ul> <h1> <label> <select> <h3> <textarea> <input> Rich UI Design: An Access-Oriented Approach
    72. date picker control HTML: <input type=“text” /> Rich UI Design: An Access-Oriented Approach
    73. custom select menus HTML: <select> Rich UI Design: An Access-Oriented Approach
    74. slider controls HTML: <select> Rich UI Design: An Access-Oriented Approach
    75. custom radio HTML: <input type=“radio” /> Rich UI Design: An Access-Oriented Approach
    76. custom checkbox HTML: <input type=“checkbox” /> Rich UI Design: An Access-Oriented Approach
    77. custom submit button HTML: <input type=“submit” /> Rich UI Design: An Access-Oriented Approach
    78. data charts HTML: <table> Rich UI Design: An Access-Oriented Approach
    79. Rich UI Design: An Access-Oriented Approach
    80. a little <style> is OK (where it’s safe) Rich UI Design: An Access-Oriented Approach
    81. Unsafe Basic CSS floats reversed text background images positioning Rich UI Design: An Access-Oriented Approach
    82. Rich UI Design: An Access-Oriented Approach
    83. Rich UI Design: An Access-Oriented Approach
    84. the upgrade... Enhancing the with UI transformations, keyboard support, ARIA Rich UI Design: An Access-Oriented Approach
    85. first, let’s quickly set up the test Rich UI Design: An Access-Oriented Approach
    86. <link rel="stylesheet" type="text/css" href="css/basic.css" /> <script src="js/enhance.js" type="text/javascript"></script> <script type="text/javascript"> enhance({ loadStyles: ['enhanced.css'], loadScripts: ['enhanced.js'] }); </script> Rich UI Design: An Access-Oriented Approach
    87. adding some components Rich UI Design: An Access-Oriented Approach
    88. Rich UI Design: An Access-Oriented Approach
    89. first, we add first, add to the enhanced.js file Rich UI Design: An Access-Oriented Approach
    90. datepicker plugin JS: $(‘input’).datepicker(); Rich UI Design: An Access-Oriented Approach
    91. jQuery dom ready $(document).ready(function(){ //our scripting goes here! }); Rich UI Design: An Access-Oriented Approach
    92. selectmenu plugin JS: $(‘select’).selectmenu(); Rich UI Design: An Access-Oriented Approach
    93. select-to-slider plugin JS: $(‘select’).selectToUISlider(); Rich UI Design: An Access-Oriented Approach
    94. custom radio plugin JS: $(‘input’).customInput(); Rich UI Design: An Access-Oriented Approach
    95. custom checkbox plugin JS: $(‘input’).customInput(); Rich UI Design: An Access-Oriented Approach
    96. input-to-button plugin JS: $(‘input’).inputToButton(); Rich UI Design: An Access-Oriented Approach
    97. visualize plugin JS: $(‘table’).visualize(); Rich UI Design: An Access-Oriented Approach
    98. Rich UI Design: An Access-Oriented Approach
    99. Rich UI Design: An Access-Oriented Approach
    100. some tips for Rolling your Own Rich UI Design: An Access-Oriented Approach
    101. replicate before you extend! Rich UI Design: An Access-Oriented Approach
    102. scrape and repurpose Rich UI Design: An Access-Oriented Approach
    103. proxy back to the native control Rich UI Design: An Access-Oriented Approach
    104. follow native conventions and user expections Rich UI Design: An Access-Oriented Approach
    105. consider the mouse optional Rich UI Design: An Access-Oriented Approach
    106. keyboard basics Rich UI Design: An Access-Oriented Approach
    107. tab between components Rich UI Design: An Access-Oriented Approach
    108. arrow, space, enter, other within components Rich UI Design: An Access-Oriented Approach
    109. tabindex 0 vs. -1 vs. N Rich UI Design: An Access-Oriented Approach
    110. Keyboard Access Guidelines “DHTML STYLE GUIDE” http://dev.aol.com/dhtml_style_guide Rich UI Design: An Access-Oriented Approach
    111. keyboard support alone won’t be enough. Window Eyes Rich UI Design: An Access-Oriented Approach
    112. integrating WAI-ARIA support Rich UI Design: An Access-Oriented Approach
    113. many controls are beyond HTML’s vocab Rich UI Design: An Access-Oriented Approach
    114. landmarks banner, main, navigation roles tree, slider, tabs states aria-expanded, aria-checked Rich UI Design: An Access-Oriented Approach
    115. Adding ARIA to the jQuery UI Slider Rich UI Design: An Access-Oriented Approach
    116. Existing Markup <div class="ui-slider"> <a href="#" class="ui-slider-handle" style="left: 38%;"></a> </div> Rich UI Design: An Access-Oriented Approach
    117. “number link” - Jaws Rich UI Design: An Access-Oriented Approach
    118. “Number link” <div class="ui-slider"> <a href="#" class="ui-slider- Rich UI Design: An Access-Oriented Approach
    119. Adding ARIA Rich UI Design: An Access-Oriented Approach
    120. Modified Markup <div role=”application” class="ui-slider"> <a href="#" class="ui-slider-handle" style="left: 38%;" role=”slider” aria-valuemin=”0” aria-valuemax”100” aria-valuenow=”38” aria-valuetext=”38%”> </a> </div> Rich UI Design: An Access-Oriented Approach
    121. “slider control: 38 percent. Use arrows to move handle” - Jaws Rich UI Design: An Access-Oriented Approach
    122. the result... Putting it All Together Let’s see this thing in action! Rich UI Design: An Access-Oriented Approach
    123. Rich UI Design: An Access-Oriented Approach
    124. Rich UI Design: An Access-Oriented Approach
    125. the end... Thanks for links and such, visit filamentgroup.com/lab Rich UI Design: An Access-Oriented Approach

    + scottjehlscottjehl, 3 months ago

    custom

    639 views, 8 favs, 1 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 639
      • 630 on SlideShare
      • 9 from embeds
    • Comments 0
    • Favorites 8
    • Downloads 0
    Most viewed embeds
    • 9 views on http://192.168.10.3

    more

    All embeds
    • 9 views on http://192.168.10.3

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    more
    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved