"Design for the Web" course

A presentation for the students at the "Design for the Web" course at Tower Hamlets College.

Transcript

1. Design for the Web Poplar, Feb '13
2. Peter Gasston @stopsatgreen
3. Creative Technologist rehabstudio.com (almost)
4. 1. HTML5 Forms 2. 3 Good Reasons 3. Advice
5. HTML5 Forms
6. HTML5 Forms
9. HTML5 Forms
10. Forms are the focal point of most of the user's interaction with your website.
11. 1. Relationship 2. Conversation 3. Appearance http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/ Form Usability
12. <input type="text"> Text inputs <input type="url"> <input type="email"> <input type="search"> <input type="tel">
13. Number inputs <input type="number"> <input type="range">
14. Date inputs <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="month"> <input type="week"> <input type="time">
15. Outputs <progress></progress> <meter></meter> <output></output>
16. Constraint Validation
17. Required fields <input type="text"> <input type="text" required>
18. Pattern Matching
19. Pattern matching <input type="url"> <input type="text" pattern="[0-9]*"> <input type="text" pattern="[0-9]*" title="Numbers only!!!">
20. Limit Matching
21. Limit matching <input type="number" max="10">
22. CSS for Form Validation
23. UI State Pseudo-classes :required || :optional :valid || :invalid :in-range || :out-of-range
24. JavaScript for Form Validation
25. Constraint Validation API el.willValidate el.checkValidity() el.validity
26. Constraint Validation Events el.addEventListener('invalid',foo); el.setCustomValidity('PLOP');
27. Enough about bloody forms
28. Working on the Web
29. It is your It is your patriotic patriotic duty duty
30. Sharing = innovation
31. The adjacent possible
32. The fruits of hard-earned experience
33. Be empathetic and subjective
34. Neither your opinion of what users should think, nor my opinion of what users should think, matters as much as what users actually do think. Be a scientist, not a priest. - Mark Shuttleworth
35. Be an idealistic pragmatist
36. Never try to discourage thinking, for you are sure to succeed. - Bertrand Russell
37. Be confident in your knowledge
38. http://xkcd.com/386/
39. Be willing to learn
40. Be unsatisfied
42. Be involved in everything
43. Be a communicator
44. Be an archivist
45. Be professional
46. Fin.