click to play button
click to replay button
Approach to Building Accessible Web Soutions - Fluid 20100309 11.54.13AM
X
  1. An Approach to Building Accessible Web Solutions:Fluid Project
  2. Topics We’ll Cover
  3. The Project
  4. Fluid...
  5. What We Do
  6. DEMO
  7. Why we do it (design)
  8. Why we do it (development)
  9. Why we do it
  10. What is Accessibility?
  11. W3C: Web Content Accessibility Guidelines (WCAG) 2.0
  12. Double-click to edit
  13. Double-click to edit
  14. A New Definition
  15. A Layered Approach
  16. Through all the layers
  17. Introducing
  18. Fluid
  19. World, Meet Infusion
  20. What’s in Infusion?
  21. Infusion Goes Deep
  22. Fluid Skinning System
  23. Components
  24. Double-click to edit
  25. Double-click to edit
  26. Double-click to edit
  27. Double-click to edit
  28. UI Options
  29. Double-click to edit
  30. UI Options & FSS
  31. UI Options & FSS
  32. UI Options & FSS
  33. UI Options & FSS
  34. UI Options & FSS
  35. UI Options & FSS
  36. Fluid Engage
  37. Double-click to edit
  38. It all starts with Design
  39. a11y
  40. Do the stuff that gets done last, first
  41. It takes a Community
  42. It takes a Community
  43. It takes a Community
  44. It takes a Community
  45. It takes a Community
  46. It takes a Community
  47. Teaching others:UX Toolkit
  48. It takes a Community
  49. Community Culture
  50. How Fluid Can Help You
  51. How You Can Help
  52. The Solution
  53. It takes a Community
00:00 / 00:00
CC
Double-click to edit The Fluid community Problems that motivate us Solutions: our approach -- layers! A participatory community An Open Source Community for Inclusive Design Is an open source community of Designers Developers Accessibility experts Helps other open communities Consists of universities, museums and individuals Offer design advice and resources Contribute to other communities: jQuery UI Dojo W3C Accessibility Build Infusion, our JavaScript application framework + interaction components Offer design advice and resources Contribute to other communities: jQuery UI Dojo W3C Accessibility Build Infusion, our JavaScript application framework + interaction components poor and inconsistent user interfaces UX designers not well integrated into development culture Poor UX an impediment to adoption and use Needs of users differ greatly in our preferences, needs, habits, concepts, comforts, convictions…. Custom widgets often look, but don’t act, like their counterparts on the desktop HTML provides only simple semantics Not enough information for ATs Dynamic updates require new design strategies to be accessible UX is a challenge for all open source projects and all institutions Fluid is looking at common problems Accessibility... Double-click to edit Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive. Principle 2: Operable - User interface components and navigation must be operable. Principle 3: Understandable - Information and the operation of user interface must be understandable. Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive. Principle 2: Operable - User interface components and navigation must be operable. Principle 3: Understandable - Information and the operation of user interface must be understandable. Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. WCAG 2.0 Quick Reference List 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 1.2 Time-based Media: Provide alternatives for time-based media. 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout ) without losing information or structure. 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. 2.1 Keyboard Accessible: Make all functionality available from a keyboard. 2.2 Enough Time: Provide users enough time to read and use content. 2.3 Seizures: Do not design content in a way that is known to cause seizures. 2.4 Navigable: Provide ways to help users navigate, find content and determine where they are. 3.1 Readable: Make text content readable and understandable. 3.2 Predictable: Make Web pages appear and operate in predictable ways. 3.3 Input Assistance: Help users avoid and correct mistakes. 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies. Accessibility is the ability of the system to accommodate the needs of the user Disability is the mismatch between the user and the interface provided We all experience disability Accessible software = better software Architecture Components Design graceful degradation & progressive enhancement Double-click to edit Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre, University of Toronto Jess Mitchell, Fluid Project Manager, Boston, MA Application framework built on top of jQuery The culmination of our work helping others Designed for usability and accessibility Open architecture: everything is configurable Lightweight CSS framework for styling Accessibility tools and plugins for jQuery UI components you can reuse and adapt jQuery Keyboard Navigation Plugin ARIA everywhere Everything is highly adaptable and flexible Users can customize their environment FSS is built to be hacked on Provides a core set of building blocks Reset, text, layouts, themes, MOBILE Themes for better legibility & readability Developers can fit them easily into an application Fundamentally adaptable: Change the markup Restyle with CSS Add/replace actual behavior Double-click to edit Double-click to edit Double-click to edit Double-click to edit One size doesn’t fit all Allows users to customize your app: layout styling navigation Uses FSS by default; can be configured to work with your own classes Double-click to edit Double-click to edit Double-click to edit Double-click to edit Double-click to edit Double-click to edit Double-click to edit The ultimate in markup-agnosticism Use markup as its own template No funky ${} or <% nonsense Specify all data-orientation and binding in a separate, pure JSON "component tree" Double-click to edit Our process Teaching others Tools we use Look at what an interaction is like for various AT users and contexts and then (re)envision how it could be start with interactions, not technology iterative testing have a wide-open community Test early Get it in front of users QA runs deep into the process Get things wrong and fix them early Double-click to edit problem statement design goals boundary document scenarios look for similarities across interactions and experiences flow of ideas (narrative meets visual) storyboard early wireframes wireframes iterate, iterate, iterate storycards UI Design Patterns UX Walkthroughs Testing techniques User profiles All the stuff you need to design great interfaces! Tools Teamwork Decision-making How do we... make decisions? grant commit access? ensure code quality? cut releases? handle licensing and contributions? Use Fluid components in your applications Accessibility & great design for free Build new UIs using Fluid’s techniques and plugins Robust strategies for UI development UX Walkthroughs Assess and improve your user experience Join our mailing lists Share code Help with design effort Use and extend Fluid components in your tools Write your own Fluid components User testing Deep designs for interactions Describe user interfaces with ARIA Add consistent keyboard controls Provide flexible styling and presentation Build fundamentally open solutions in an open community Q&A
. . . Display so quickly I am just until . and the Fluid Project Manager . he said And . no I'm very glad same academic computing and in project management of those various things . large crowds a smile projects the International projects should be projects . so I'm standing from hundred and Duke Africa iTunesU . no . a project that stems from the Gary Add to Vancouver SOAP . forward to . flat world Expose so I'm a flat world Project Manager five . what a wide talk in a town about Islam and the Fluid Friday so how many new reducing last year this has DAOs his own . Dallas still for seventy this may fuel a bit like a cry this important additions how much progress edit think that you can actually see some pretty cool stuff . and how many new range and Greece presentation just a moment em . we'll see saw some cool stuff and other so you data and and and Mention images going through its alerted to go the time to take a look a summit together pieces two Agenda showing you New portal that are Fluid pieces in what it means that they're there . so one of the Design make sensible approach to designing an open top really take Is petition important to us that since one and that the core values that we have one more building software is if you is a sensibility MEANS his ability . so I'm org and talk about what kind of approach we take a and in doing that explain a little bit of our approach . explain a little bit about design and Tom Display little bit of the men approach and talk about some of the tools you can use to how many people are developers learn . King How many people are Designers . I mean developers are ASP to do design in their projects . OK . so here nonsense and that bias Designers region do you design a citizen can sit this picture as you can make a dozen people to get securing it seven to break while and it's it's to give enough of a cross section we can see some the layers . so what we do in in Fluid has we had a tendency to do Saturday leaders and students on Q and A pirate . and it's you . I've stepped into the layers and and do meaningful things in the gloom all together server . what you looking at you can imagine is the Design The presentation of the wall mice bred to this . the crew . on the walls and e . if we can take this matter for it that the bricks . you can't then the motor the pieces that fitted together and then the way the bricks are configured to suspend the architecture and Add to solve these things have Accessibility sibling them altogether . so . SEN . in in going through this conversation about where certain talk about and some basics about the Fluid County to see you understand what it is we do when we're on increasing components and user interfaces are getting Uses in the application you're using your cell . you as developers can use some of those solutions in other applications that you are that you're developing you can also Contribute them into the portal System John's been doing a ton about . and I was in talk about some of the the design aspects of of the project the UK Incorporated to your work . so . Fluid is but for the soccer Friday can lead that this kind code certainly we've come promoted and in the project as I said we're a Distributed . they opened Friday to UN We are pretty concerned with creating best practices and around whenever we do we wanna make sure that people can come and volunteer and people within the product of the clear . and the clarity about what they're doing why they're doing and why it's important and how we can improve it . with input SOAP will marry my job any new ideas and new new ways of approaching things and in doing that were coming up New is increasing Design Development . so we knew where it got large community of Designers Developers six USABILITY experts people who are just genuinely interested in user interfaces and and design . um . people from other communities are interested in helping our community to help their community . I sincerely of the area group that does this mean Recent ease of freelancers we've caught people of Involved from museum say it is a very broad . and Alec of people that probably hit so here in terms or maybe Multiple intensive yours . in that meeting . so the whole what we do we do more than just build software of what I just focused on one product and so I approaches to the wire . Pulis take we're interested in Umm . design and it in design resources so we wanted provides use in tools you can use since number of you raised your hand I asked is a Developer it's expected design as well . we treated resources you can use actually help you do some of the Design and Analysis early distribute REST and at the end . we also continue to other communities . you can see Ticker UI Dojo and only three seats USABILITY and assistant approach that do make sense to most software requires us to do design code and evangelism . Say It's not enough that we just show you design resources are we just do with design is not enough that we just Produce code and certainly not enough to weaken she meets to these of bodies for best practices and standards But it's all of these things that make up I approach . so we start out a quick Demo and skinny Turkey . the silicon millions many Mule . . remember and student student . . we set our Fluid solutions here in New portal . tool slowed the United Nation that . . so the first Sunday show you is this the end . I can switch on the flight to New stand . so what's what's the background here . . in the second one is when she agreed . . Intel on the deal or No . . well . . yes . . . demos are you back city and presentation . so what you saw is the list any system network basically New Portal allows you to change on the flying interface decided presentation of that interface you can imagine this is something that that meant looks as though it's a static at this point but when they show you it is summoned Tools we do not to go deeper into changing the of the presentation of the of the information itself so you can imagine transfats racist immobile message and shows you that something that we didn't include the system so show you some love . so why do you know stuff in announcing everything in perspective the Design Development and evangelism and all three of the city may get this ecosystem of how to approach . D sensible design . I'm very User Kansas . we do it because is it better than Tom inconsistent user interfaces up in the two really difficult these issues he's applications . it to bed to adoption . some the applications that were developing an open source . so I am the real Add difficulty with Integrating UX Designers in to Senegal in culture say never but projects that we find open source of it on the developers spend a lifetime on on making sure that the code is perfect and then and then the design comes at the and it's something that we just have to put on top of that today leisurely Content integrate Designers into this Coulter's an interim user experience . in doing so . I resent and in this is on what should you be a justice who is getting system tissue adapt to the needs and preferences of individual users . so I mean this is something that the experience of frustration using some application are some applications as he using an is because you expect a certain of a certain logic when you press a button doesn't happen in to frustration because It's not meeting expectations is User . you had any direct reference . or maybe you just wanna see more more video . let's non text or you won a seat on captions in your video users things that they were trying to just for the on for the and users . . so the Why we do it in development using the same consistency of experience with with the user interface . so Custom widgets that YouTube take a look at with Jagr desktop in the news in the Web . often different experiences so Single Click or double click or a slide versus the Ad that whatever it isn't click and that isn't confusing for users . and so we spend a lot of our time on the Design Development sides and try to figure out how to make this an easier experience for non Involved . some of the issues also come from of the system if an Ametys team now . it doesn't allow us time to do the kind of work that we need to do . sorry Ben and DHTML requires a we have the UN to impose takes USABILITY so to simply see him now . you know we we can approach they the UI and inserted . I'm with simple semantics to make clear to user was going on this is this is not the way Web pages or are being designed them to the enough information for a tease click with the dynamic what's in requires a we take a little bit the different about approach to we concede it's USABILITY and ending the development . . SOAP Yes there's some some of some these reasons are retained as it UX is a challenge for open source projects . the dead the occasions he did great work of but they're not always the most feasible . and user centred with them of people Who want to dot the applications have trouble with adoption because you take a look at the UI and when they can pay open up the South Model mean it's not it's operating in a way that is pleasing to the users user use any Double A difficult the transition and so these are some the things return address . common problems . um in in users in the user interface but they're also common problems . with until we're interactions will take a look at some the components address in this particular interaction issues and their success ability . he said we wanted to build instance . quick Question What is excess abilities and they won a major gas . or just talk about with you . Associated accessibility . when you hear me state USABILITY when you think you can get . . . access with . Cole I had . C dollars . and a lot of use you to get her taxes this . C . yes . yes . yes . yes . . transitioned to one side . . lower trading one to Literally a wood shed do . just a few cases by was what was going over some has some major points which ranks use this wonderful um . this is a series of documents it's a it's a it's a wonderful group of nine . I'm technology specific test of will statements that are supposed to help you in achieving accessible solutions so stability of those days are out for Principle services all the barrel by the Daily three seemed to me is not specific to any technology again consists of principles to follow when you are doing development are designed so you can see there Senator around Umm perceive him and could Perceivable operable understandable in Robust NC big always done we can start to look at some of the pieces that are contained in them We'll be on the second but presume that hit on a number of these so Perceivable Information user interface components this be presented to the users ways they can perceive . he said when I when I had trouble with color right . I need to be able to choose how I one day and Company Consume the content . so Operable User interface components and navigation must be operable . How can I of use this with my screen reader . well how can I is this using a keyboard only instead of mouse . King . Understandable Information and the operation of user interface be understandable so again this gets back to the user preferences . what how how has it been a best be understandable by me . Robust Content must be robust enough that it can be interpreted reliably by Weber eighty of use Reduce systems and insisted technology so on the screen reader Spring . among other things . so this gets into very small credited MSU you carry it all that this is the Quick reference List in which it in a scene here is the sprints was broken DAOs we have core principles . Craig and then they got written out into the system can see there text alternatives . I'm in time based media and adaptable content . see you can see some things that you're in the Iranian senior projects like captions for instance like Tom Feeney able to search are being it was sort . keyboard accessibility . Make all functionality available from the keyboard that something learned talk about here with Fluid . of Kenny is here enough Time based radar can cause seizures the Maintenance happening on the interface . that little while . and readable . Predictable was content to answering the question How do we make the user interface that's going to be pleasing to the users going to help them in common it's to help them accomplish with a while accomplish with the application . s going to enter survey team is for everyone as that said not just for you users . so Input Assistance compatibility and so on teaching get into the weekend zero on . details at the deli three seed Web site and be I think that this Quick reference gives you . police an inspiration into the Developer tyranny do There are ways that you can a team What is a success ability thing to get so is that it sometimes this thing we think is ninety mobile PCs are T Mobile you can see very clearly outage you this core principles here and all the more . they takes a little bit and that would takes time and inspiration from the daily three see where we are evangelists of this work . we are in some ways creators of some the content of this works to helping to promote some the changes helping to you on modified some of the principles and so on . so I hope is that Accessibility is a billion system to accommodate the needs of the user read in the lira on the user needs to get away the user interfaces of the approach we take CIO says . so then tries disability is the mismatch between user and the interface provided so it in one of the land Examples on Teesside . I am completely hope to on captions to have a hearing impairment but I I and I won't have the captions blue video whenever I am watching a movie or when I'm watching a video on YouTube is a means to Blake me . yes temperature increase thousands who don't like to see the captions but I think is a great idea how that is not send so it's been on the media's and I can go in and said it's about and I can watch the movie . analysts of thing . Nixon had a good theater though be seen but still we don't this isn't really is appointed city in the case Larry I'm in a coffee shop in a while watching video . I can do that if I don't have the captain's option . I can hear me be because doing is either . so what success will software means more usable software and this is where this way tested early three gets the mystifying that becomes his ability . he really usable building . so the approaches that we've taken two t mean that is this Layered Approach . he architecture . we were second the brakes . components barrel on the foundations of user code components . the city of make up the pieces of the bricks and the design that met everything in certain of what you see the user . it's it's by yelling flexibility and he to these leaders that we're able to sit of the key and we like to say accessibility features to be using Fluid's lesions your nanny sensibility . just by virtue using them . so in many one downfall given this is this is an ongoing battle in custom earlier the continuum it saw something that we are able a check up and say this is done . so I'm . when you take a look at the Fluid Solutions The Fluid products on some of them are in a more mature state of being fully accessible than others so that means is the Create based on the day duration and PROGRESS Manhasset . which is basically it you gotta browser that's going to be able to accommodate a more dynamic version of our components were negated about stuff . if you dial know if you are still using all the browser with any give you one that still works when I can break your system . we're getting new UN interaction the simple it's clean it's Predictable . it's usable . so again that one agency Infusion which is one of its our core product . and culmination of things . um these are similar to use a disguise . you can success the ball high performance clean them all . why make things easy the years . so if we if we created this code solution we can get people to easily use it we failed to re using CSS stint in our JavaScript . so what we want you to be able the do you Easily and simply take the work that we've done in putting in your applications . we built this and you can basically tweak in and and I'm you know . change all that then thousand missiles so that it'll fade Europe to killer application . so Infusion is components and Mention but also Application framework built on top a decrease Oh honey people are familiar g career using the Korea a member Dean . so we I'm are the stuff and Jake Reed or also where appropriate Teaching meaning a number of our solutions back upstream three Jake reset your using zinc rewrite Now you're actually using some pieces of Fluid . they continue down a keyboard and plugins that allows you to use the keyboard on a number of the J Crew client . so I'm Infusion is also culmination of our work helping others and others helping us . and it's of course is ideas and earnings USABILITY which is certain fifteen through all of this . so I really don't and everything is configurable and you can take a look at that it if any Mule and Connie Johnson's workshop . I think they probably talked about some . any non . . . seven yen application framework UI is the elite CSS framework for styling trade industry leaders and I'm a technical person . but I and I'm and technical enough that I can go into CSS and play around with that and break things . that's great detail at a CSS is this wonderful emotional as a sister Double and dinner dinner figures and goes into that . some places . down . going . Symonds Integrating with navigation trying and that's something we can show me the back of steam into the Korean something you're consuming appease e g Create . we built in ARIA everywhere this is another way that we're building sensibility into our components . and um everything is super are flexible and adaptable meaning you can go into the just getting going to CSS team go into the HTML you can Changes and matches are aren't are the matches your of your presentation here years styling we're it . it does some operations slightly differently you can see having fit together . Set First Fluid skinning System . this is something that and what is showing new interior showing you on the immobile piece mentioned that this is . the Nobel Aspects if you portal or build out of immobile work that was done in Fluid . this is our new piece the mile our consumer Fluid skinning System . and it was Kenny systems and CSS framework we calIcon allows you to go in and transform presentation content so commonly seen in transformer and you see in a light blue there you can reset the layout good tax their Themes which use on your portal that I showed you changing Themes . there's also more about . still we should use I think to Themes the three ship with more investment for and you can of course Create your own team or you can adjust any of the things that are in there . so we can provide you with these building blocks for starting some CSS for transforming your content . and of course we're pushing it for their for their sin our into Mode well . the Fluid skinning System work now looks Unicon and on and enjoyed . this is all open land the and so I'm with CSS the nation knowledge of this good for him to make these Mode mile applications that work on any platform . . SEN . Mention call components for those . he says and I'm saying use Developers can fit in your application we're new at common problems is a sad one and calm problems are dealing with their the number of the things you and into the new development . everybody needs Double and everybody wanted click and added free . everybody wants a simple contexts in my Manager When taking on those common problems and were really Solutions the Accessibility bacon and their easy for you to Incorporated here development work and then it just lightweight . so you can Restyle them you can add or replace any of the behavior you can dive into the market is nothing is hidden . you have to guess about why it's working . we show you exactly why it's working in the UI change it you can do exactly that . since December Couple of Newsweek Intel back and do some Demo that the end of that the Demo portal great ago who were finished . I mentioned again Jack . so this is the Fluid Reorderer . it's a family of components and therefore components that basically allow you Reorderer things in some sort of grouping the layout Reorderer is being used in New portal which allows you to you Move Portlets click and Add Portlets from one Continental show yet . that was Let's try to focus on one of Portlets members and won . on that list re learned to bed list of NMD can click and drag it and on the fly in all and we are the guys . the Greatly are . you get some good things and then ensured or if you got image is a new one in Move where the images are . again this is all keyboard Navigable as well saying don't need to do that click and drag us what we had come for the different name than click in Chad because that seems mouse to edit it Reorderer here . any questions stuff . the next compound and tried tell you that is a simple text in mind edit . and then a Dean good to have an interface tree don't live here users have to go out Intranet mood to change some tax . he just wants me click the link is on the flying go this is this is the component the dose that . said And in its battery do you can completely strip it down you can completely builder that the contains the styling . it's can work for whatever application year Gherna be weakening simple text in one inning . when the letter . he allowed the new batch of large files or a single fileNew can do simple HTML you can do this to build one in this is the progressive enhancement graceful degradation or calendaring . . the continuing to develop this as things change in Umm in techno are so as a sumo five as Flash has all these things change when continue to change the uploaded to accommodate . the letter has a piece that actually shows you the progress and all of your home files user up learning see you can actually see practically how long it's going to take . and then this . Serious grew into a of this indicator progress Component said there and I think you're doing in getting an operation on an app on application and the one issue of users in PROGRESS this is where the Component coming . so those are Components where US and in the third putting them into the application and by doing that creating a the user interface in Allows the user to have this predictability to have this for the delay in using something that they can easily interact with Mention the at and can call it the we built that allows the user to change some things around and allowed a way that Matt was talking about when how semantics USABILITY . C UI Options does from the understanding a one size does doesn't fit all when it comes to user interfaces we've seen people try to accommodate those come in in taverns or in some rather tricky race and is only a certain difficulty you are trying to kill to number differ audience is still only allow users to do is customize the application customize the layout styling navigation choose how the applications can work rebound . and this uses of Fluid skinning System antiques Embed said further Allows them to play with their own . preferences . some Spanish are you . with his slides how this works in the season surprises in the latest a kind . and in the next slide . King . Mineta backing explain what happened there seem Guide . you guys you know any change your flight styling your minimum tax size text the same lines facing the contains a contrast background images and so on . and that's has happened here should we change the contract . seeking you out of client ago I do users to do that using the Fluid skinning System in UI Options . . . Really flew in Infusion which is a scene that's me come Application framework . these CSS framework on Fluid skinning System . components in addition view . that's our core private Fluid Infusion . we also are working on a number projects . we work very closely with the Improve was sick I was quarreling with the on . will we work with a bit . we also working on something called Fluid the needs and this is how large are considered brought some of the solution since the museum world . so it's an open source Collaboration with a number of museums . the key of the engagements over museums wanted to bring some of the great content that they have an easy and it's not visible to visitors anyone to make it available using some new technologies they wanted do that on the well the license . the twenty do that in some interesting he ATs that might be used in a house . they also wanted on a web any found that they either had a Web Solutions or they have immobile solution or they didn't have any of this . in a while since or continuity . on the user's to have predictability in experience . silly working on the map we just released about three this weekend . and we've got and we've actually auto the three on the Macquarie Museum of of team history in Montreal right now where people using it for some the do we can show you example of the islands' worse and I Flow were son Andrew were some I pod touch on and it allows users to browse through a number of exhibitions that the nuclear Museum one to show them . it allows them to collect artifacts into the backs get to send themselves an e-mail with those artifacts to take a look it's not upcoming exhibits and to interact in an exciting lanes and true to iron out Use are devoting Easy choose how they're acting with this and core museum has an Andy of making everything bilingual . so the entire applications in French and in English and can show you this Unicon can compete . the open source Web technology as immense and our approach is to take advantage of the power to the open Web searching and it does get the snow CSS is is this are the core of everything we do including on immobile around . on an immobile platform . so Alves to not say which is going to build something fried font calIcon in build something the island allow all of these devices interactions that . so this is just a quick screen showed that Macquarie Easy immobile app . . using of course Extending or to Fluid skinning System . still . when title the aisle on our design or persons and the when you are doing development here development approach is clear to you many we need to design or maybe a way that others do design may not be as clear . so from the Accessibility perspective what we do with design is we take a look of the interactions of before we get the technologies so we talked to people in our community we talk to screen reader users productive museum visitors why my going in Consume content that on a kiosk that Madelyne silly talk to them about what sorts of things that he would work what should serve out interactions with the cleaning family would accomplish with the on accomplish . to make those interactions . we do it live testing on some of our idea is to how many men who claimed a developing at were just thinking . and then we have this this openness in the community were republish everything we can clearly transparent than a week e that's a good night's . so it means anything is certain in the week you anytime . and it means that we're sending out a lot of e-mails on or are we mailing lists and to get Involved and he was going on there . the approach to dealing designed for us is to make it would areas sings it usually it last with them last first surrounding this testing early we do know people prototypes . and we'll to do or not on some Now some bombshell prototypes as well . begin front of users the people heard than anyone's using this tool or to be going in the museums and taking a look at the immobile features . we do it on the scene there QA expert happens to be here . he completely leave the community for the two weeks before any release . so he's in charge we do it he says and we make should or should thing is that the highly documented that there are issues are highly documented as a highly functional on release . so we do things wrong . a lot we Fix an Israeli the can . so a costly pushing on whatever it is for building so we know exactly what's not working . still at research created this kind of work Live six explain a were doing with Design . so how you go about deciding how you do design something along that you are doing that the UN your projects . Whelan Design leave s which is really top of and so design is on front design is thinking about lenders interaction screen technology . the thinking about what are we trying to accomplish this in phases Really or Skilling things now played two hundred and that it wanted to take a look at some the Examples are out there and while the with other people are hearing to go to them out now for instance men are working you portal immobile working museums is a lot of Nobel work going on I now see two Golota with other people are doing to look at the simple bully Why do we not immobile . features . when Suites and feel good about what we've done . and so they're really serious . we start to get into some of the behavior . so we take a look at how people are using some the existing solutions that do some of the operations of what we want to accomplish and then we we take a look at how best to describe some of those interactions . How can we say to get away from the way people are doing it now if that isn't necessarily the right we do it will talk through a we'll talk about what the expectations are . something I call glue which is where some of the idea is that Changes serious cerebral work . I'm starting to get into you what you and start to see is something Visual . so you can dine in its semi seven hundred go something mon bile . for me . immediately I get millions in my head of what this motel thing will look like . while Inter match on side races the Canaries Science . if the idea I if I wanted answered send myself something is a gonna go to e mail rates again should be between you click on the Email of Sunday's directory information . the cops that the e mail teacher your phone . so this is where the blame styling happens with unusual ideas he does get all initial ideas out there and take a look at them . denying glued is the process of moving from this mess initial ideas and just run out there to what's actually going to war . Aniston Yes work that's who we do ton of the inner a silly talk to the users we showed things to them . BC with things failed . something fails we know that there's a better way to do it . we'll Iraq from watching people we did send ads are some User testing the testing for one thing we found something else completely effortless in the Simpler mine non text that . somebody could in the space to edit the text . and that was unsure where to click to see if I analyze things and in one press anything else one way you are IT and outside of the whole application to click . Allow K meant interesting that tells something about student finalizing in line edit . so denying group is restarting its do . three of Flow maybe ideas of how we're going to build this thing is starts to look like the wireframes and the interface is coming together . and in the starting eleven for typing billion and are eating in this is where the process the whole team is talking to Designers Developers to talking to each other . if desired in Aqaba something says can be technically impossible to do the second word here . that's what is happening is the prototype thing . where I haven't Designers and Event were stricken very closely to bring something that's just me on a paid Leeds to the ACL CSS in Java scripts now actually building that thing out . Montreal leads but you can take a look at some of the some of the Deliver will succumb from each of those steps . since is we're still just are poking around and try to find out what's out there in China Define ways we're going to be solving . when looking for some of those behaviors and what's going on out there and while so some of the interactions that we expect in this particular pieces of the interface may be similar to other pieces that are out there . those ideas flowing until call my job is to ideas out there and then starts to on the Easily represent things you talking about stream early . this sets to come together and get some of those wireframes Together considers interactions together the flow of the interface . and then work very closely with the some of the this decision protecting re getting into technical solutions . this thing called the UX toolkit . Mention Munier president or nonsense writing code for not testing design twenty medals and in all three of those . certainly UX toolkit use is our opportunity try to give you tools of copied the design to be whining about you each of the application and see if it's if it's yours to clean working for users . when that we'd the know Walkthroughs do that but that does not . if you want to test how accessible your application and we're going Accessibility won three of its value on . take a look at some Design patterns were all working on similar things including uses similar to variance from application application come and take a look this man was Design patterns . and so on you can see some of those in here working and Higher Ed we've got a really extensive cloud persona library we've Build our people . and there could profiles in their lives near expectations of working with non retire and software . so where are and where it users community were highly disputed as a mentioned we use that the mix of Tools Teamwork Decision-making to accomplish what we do . the are told approaching million to many of you . um were using IRC for the community of Designers an developers and IRC channel . the state extensively . and we have to trust Timezone said to a streaking that we have had daily meeting a stand that meeting once a day for fifteen minutes remaining . we will stand up for more on video conferencing so we're all talking face to face his closest we can . and we talk about if it's fixing in the morning feeling pure on the West Coast and talk about what you do that again with today the day before . and this evening for you in the area in technology did that day which began do next in New ago . this isn't and spreads Eisner developers never been BS and a project to talk about on some common problems they're dealing with to make those connections in to take the connection offline say OK now let Let's talk about this to Ametys and thinking about this too . the CAS we do parent In the leading pair design we do Community Decision-making . we know we don't and China good vividly China good on the decision with the decision makers to do that's so odd of our practices are pulled from the Apache world for Mozilla . the other things rights to mean we've adopted a lot of those practices so for instance giving commit access to our community . they were the commander very clear how he eighteen to . M . and this is some of the things that a bit of intensity be impediment something to concerts projects to getting started going smoothly the beginning . . yes . with the Senate Components into notice him and Design handbook that wouldn't in the Components Clement your applications Red away Design handbook single business resources and start to use them to accomplish in the design testing are being asked to do . . new YORK the testimony Integrates side for free in those components rate you can continue back to the Fluid community . variations on this components to continue Themes Contribute comeback . if you want to go down another Fluid Component using our Framework Please do . we'll absolutely with you . Nguyen So Walkthroughs Assess and improve your on user Steering senior on applications . so I'm and ten we are using a lot of the typical and Tools open source communities use . we've got a very active work mailing list that also than an DAOs list is less activity can see we've got release is coming out . we are sharing all right Code say that enterprise trail as he Use he was going on within Nightly bills he can see the latest greatest . you can take a look and that components in and we do then the second . the Mets in the layers in the Selecting area Really insincere not just in development not just Email an openly the do design openly allowing users to toggle . they're our preferences needs allowing the developers to topple their own preferences and needs . Adding the keyboard controls Adding ARIA M . Mailing flexibility and asylum presentation . and the entrance open solutions in an open community . so . that's . and I would say that their weekly reading bedtime information Infusion is the core product that has to be um Application framework was CSS framework and the components and you can download that from the Fluid president were Web site . just get to me . and Jess Mitchell and we take the lead . that sharing Use the movie . demos . . CLICS . . . it seems sound . . in the room . . Demo portal you can get in this room Fluid Project the door to my mother paid . so rock and icons and Demo next to it . the CIA and e e one and two DT little people saw the one as he Demo for changes cert poking around . . Leno You Can . and you . I certainly in the hour . CC Dojo sturgeon use Email show their inside and can you can take a look at the interactions and Website where thousand words and the animal . CDC has and the mind mouse over over the lead dogs has a little box that comes up around it indicating that it can be enabled . and click . . . many men do the dialing contains three that icons and also a genuinely are you feeling use the words the Allow use and in renewed I'll take it out . Sun nineteen data . ensure you . just like Add keen on the using the mouse . King . testing and Jerry . reigning testing and read and ten Really on Duke . the Standard and cost backup . the sixteen word teacher here in London . the medical call Jasig . sales data we are No . one because the sun's billion in insured are . three . Sehwag led the NL . I'm kind team chairman Ed A hand . blue cheery . welterweight year . so the troops . the minimum . I'm going to see you . Adding . Oh . I might add and pretty . trail Senate was controlled . is the indication that selected this one . in the minimum to edit Email chief . control . Italian three using keyboard commands . Siemens the region trail . Barrow . . Lucy need . he'll IRC was . . . Euronext . I like see you increases his slider nearly increasing the tech side is New getting an example of tyranny and sign on the fly . the browser that the number of points here and teens that . and teams this to widen . teams The contrast . says the wrong pollution . . . . . . yes . tech science . I mean you really why . his alliance be seen . the city . can the I dos . high contrast unheard of . in this instance is a component that allows the user to transform the content of their needs and preferences . . you can see in the client . you can see that such transform the content of client . selling years I consider a blunder . there seem ISO for one file names or something silly like that . . so ECT system is the letter which is displayed when only CIA now . somebody browse by files . so I got one File Select an icy a better read . I read X I can do we that filed for Mike you . at this point . and will lead Display I can also add more files . . in the . . Benson then and green shotgun in Spanish new shows new Congress of both the files as well . and in total file size . they are . I mean I miss Component . yes . it's basically a bean instead destined to was inspired by nowhere code was going on in the upper air and pulled it out New Dawn Component . Syria things and PROGRESS team . so in all . . in Sydney and . in PROGRESS Component now . it's a compelling . some think . the leading teams in can see contained all of this anything UI change you can e-mail . it is so that he actually to show progress ui . you can transform whatever aspects of this are built into the code and you can take a look at the code it's all very transparent . DHTML . the Dow was content CSS and take a look in the sounds going on . and you can imagine going in there with the are with you text editor and tweaking CSS and transforming it within minutes . so many of the components you honestly no . . the recession show . . so allow self . show me am I . Chen Yes but he should either . . . . . Build Sure Larry . some free land Windows system form and sign on . . . so Steering . I . Museum they had the requirement Spring Bush and French a telling French speakers the morning . . so would return to safety . first league is seeking to go the exhibitions . my question is this come about it we can collect some of the artifacts he like yen and euro date could secure Washington in the CNN UC of to go artifacts of the number on the to question the code impl of the page . Sosa's two exhibitions . he has three exhibitions a wide features simply Montreal . User permanent collection . we didn't see UC soon creation about the exhibit you can choose read more of state in two decades . the cattle are Lynch is its and the males of those artifacts is out call from data feed from them . the desk looking can add a note . you can read all the comments . this is going Fix . . . . the Alliance gains . Antonio LMS design schemes . Elian cloud slump . prompting the in the Michael Action No . . here's my collection . I can send it to myself in an e-mail . I can tell it Katrina list be an agreed deal . mentor compelling that collected more than one object . I can go back . I can make a comment . . . Telecom and Syria . . so it seems just a French integrated hours to me she is with so much like the objects buried . . Mel all of my selections unchanged French . Oh content with an empty as French as well . . . . . . C to the Jennings Yes . . . . . . . . . . . . zero hundred can't and then aren't and we will give you the more technical answer . this and said that no matter what you're using in your development world . this will work . this is agnostic any particular toolkit are solution . so in this This email openness and flexibility Extends and throughout the whole process . so what we're trying do is create something the you can drop in Easily tear application to compare it with how you age OpenID Inc re we did that make Holland and three . . . . . . . the shooting . . . Paula . . . . . . . . what did . . Juve's . . . . we say what the browser . it's No . the Heat for you . did the best way CAS . you go into testing . browser that . don't you What is the by word . the portlet . sure and you were so lucky to have are testing leave here see the yuan hasn't . we state in a gray browsers to bed and we also work with the Canadian tests in the majors creators . so we're looking for compatibility on that most of those Platform sued just in you and just how far back in terms of specific browser . . . . . . tool . . . . . . . . zero seconds . a new word . strange is that a million to you all . . . . they won . the car . new NFL meetings . . . he's on . I mean the US and the ceiling Inter auto advocacy lead that team members and Bulgaria it Couple there we've got Ed large him and convert a day team in Colorado . Tom Wilson of people . Spain . and that's a many distant past . SEN are counting France . so and we are very nice you need it and it creates an interesting challenges that we have as a Community had certain buildings and practices to comedy to the difficulties come with being said you didn't do a lot of communicating on list to human if we maybe had a really good conversation about some design features that were concerned about one of us to documenting the unsolicited other people can take a look at and comment on that . so what will bring transparent payment everything is out there which makes it easier to LA harder to remember what is supposed to be the a bone what's not . so we just put everything out there . and as people didn't really coming comment on that since I'm the only Boston on the team I spend most of my day on Sky . and I'd be in chatting and sharing and screen which all these technologies allow us to do now . we Guide team members to I'll never talk to on video we just went and IRC which is fine . so I and anybody and that state and eighty and with all my attack clients of IRC . and also do and the mailing lists CPI number of them so there's a lot of activity on their and we use them and Web Content System the Allows this is to all come and so they like the Brady bunch when we have urged and that meeting . How many people are there we'd the know we have all these comments and have twenty boxes of people . it's it's it's pretty extraordinary . ten to delete a pearly talks Bulgaria and something that the a . . a lot . . and the reason I with one out . yes it's tech used in this . it's . you know how how easy is is this List of that . this was a great the we were . that includes . and when . the sound . yes so it isn't it and all the only team the city of and it will not have to rely twenty has had a dance in the abdomen the men release . and my reset you know we really love the Upgrade to it is well admin on the road for weeks but I saw a man Oh I message come across . I think we met created . . . . great . you . really . g . we you uPortal it . it's . we'll hold . . ease . along with the production . . should do . . . there . it's . . guy my age and how do and we well we Lower people strip out and and and to stay in the community . press No it's really important . so we do have people Easier components in production diaries we had to be really careful about that and and and concern about the stability . but we also the villain people come in and say you know I can really use this or to have are released in August . can we work together on this between now and then were absolutely keen on that . so the big the in and interested in you are coming to us with some the year development of questions in coming custom years applications and saying a load the used simple text in Line editing here . King You Can Help The Alamo . we that could Examples the download the Infusion Packaging can take a look at that those demos . you can also take a look at some of the town center the uses of these components on the wilds he can get . it's is like working with CSS you can get through the Examples and tweak them and see how you can build your own . any other questions . . became . with Yemen Questions Let's let any of us know . the deal . the The the the the